{"id":3000,"date":"2024-07-11T16:21:58","date_gmt":"2024-07-11T22:21:58","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3000"},"modified":"2024-07-11T16:22:20","modified_gmt":"2024-07-11T22:22:20","slug":"view-transitions-speculative-rules","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/view-transitions-speculative-rules\/","title":{"rendered":"View transitions + speculative rules"},"content":{"rendered":"\n<p><a href=\"https:\/\/ryanseddon.com\/web\/view-transitions-speculative\/\">Ryan Seddon makes clear<\/a> the potential <a href=\"https:\/\/ericportis.com\/posts\/2023\/view-transitions-break-incremental-rendering\/\">performance problem<\/a> with cross-page View Transitions:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>&#8230; on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens\u2014this is not ideal.<\/p>\n<\/blockquote>\n\n\n\n<p>But also that our new friend <a href=\"https:\/\/frontendmasters.com\/blog\/playing-with-the-speculation-rules-api-in-the-console\/\">the Speculation Rules API<\/a> is a potential remedy:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Combining these two helps mitigate the original tradeoff of the \u201cpause\u201d between navigations while the browser loads the next document. With speculative prerender, it can render the page before the user clicks, making the transition near-instant.<\/p>\n<\/blockquote>\n\n\n\n<p>Both these APIs are Chrome&#8217;n&#8217;friends only, so I guess it&#8217;s a you-break-it you-fix-it deal. They are also both progressive enhancements so no grave harm in using them now, unless you consider potentially unused pre-renders too wasteful. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ryan Seddon makes clear the potential performance problem with cross-page View Transitions: &#8230; on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens\u2014this is not ideal. But also that our new [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1547,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[70,186,101],"class_list":["post-3000","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-performance","tag-speculation-rules","tag-view-transitions"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/transition-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=3000"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3000\/revisions"}],"predecessor-version":[{"id":3001,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3000\/revisions\/3001"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1547"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}