{"id":2771,"date":"2024-06-20T04:54:30","date_gmt":"2024-06-20T10:54:30","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=2771"},"modified":"2024-06-20T04:54:32","modified_gmt":"2024-06-20T10:54:32","slug":"view-transitions-break-incremental-rendering","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/view-transitions-break-incremental-rendering\/","title":{"rendered":"View Transitions Break Incremental Rendering"},"content":{"rendered":"\n<p>I&#8217;m a big fan of View Transitions. Part of what they can do, animating elements across fresh page loads, is a uniquely powerful ability. The performance story, though, is a bit complicated. You might think because you don&#8217;t have to reach for a JavaScript framework with Single Page App abilities to do this, it could be a big performance win. That&#8217;s a fair take. But it&#8217;s also important to know that <a href=\"https:\/\/ericportis.com\/posts\/2023\/view-transitions-break-incremental-rendering\/\">View Transitions Break Incremental Rendering<\/a>, as Eric Portis notes. <\/p>\n\n\n\n<p>Consider: how does the browser know which elements are supposed to render across those page loads? Well, it&#8217;ll need to fully render the 2nd page to know that, meaning it can&#8217;t incrementally render it for us, which means there is technically an increased delay which is <em>not<\/em> a good performance characteristic.<\/p>\n\n\n\n<p>Good news though. What if the browser has <em>already<\/em> rendered that 2nd page? That could be the case with <a href=\"https:\/\/frontendmasters.com\/blog\/playing-with-the-speculation-rules-api-in-the-console\/\">the Speculation Rules API<\/a> we&#8217;ve started covering. I also might argue that a site with nice animations between pages might help with the <em>perceived<\/em> performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m a big fan of View Transitions. Part of what they can do, animating elements across fresh page loads, is a uniquely powerful ability. The performance story, though, is a bit complicated. You might think because you don&#8217;t have to reach for a JavaScript framework with Single Page App abilities to do this, it could [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2600,"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":[186,101],"class_list":["post-2771","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-speculation-rules","tag-view-transitions"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/06\/pexels-photo-7911758.jpeg?fit=1300%2C1300&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2771","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=2771"}],"version-history":[{"count":1,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2771\/revisions"}],"predecessor-version":[{"id":2772,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/2771\/revisions\/2772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/2600"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=2771"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=2771"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=2771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}