![]() We encountered this on the mobile version in particular and it required paying special attention to the hydrated component markup. Fixing the news painting problem with JavaScript disabled.Īnother effect SSR can have on CLS is the movement of components before and after hydration, which can lead to further layout shifts. Finding the news painting problem with JavaScript disabled. Fixing the code responsible for the painting delay improved layout stability of the news component. Though SSR itself wasn't the problem, it helped in discovering the solution later on. This behaviour resulted in an ad skeleton shift, which worsened CLS.Īlthough Chrome's DevTools showed Layout Shift events, we couldn't find the reason for it at first. There was a delay between the initial painting of the page markup provided by the server and the insertion of news section on the client. At the moment, is experimenting with Islands Architecture to see if further performance gains can be had.Īfter implementing SSR, the team discovered the cause of CLS regression that initially went unnoticed: the news section was not inserted at the moment of rendering the first content on the page. We decided to use SSR for crucial content that the user will see on initial render, and offload rendering of hidden content on the client. SSR was not used for the entire application, as it can be an expensive process that can delay Time to First Byte (TTFB), which may affect LCP. After talking with the design team, SVG-animated UI skeletons were used as placeholders as they reduce the perceived load time of the content. Luckily, the desktop version of home page has strictly documented sizes for ads. When implementing placeholders, the first step is to determine the dimensions of the content that will replace them. To improve layout stability, our team decided to use placeholders to reserve space for ads before they load. Subsequent profiling of this page in the Performance panel of Chrome's DevTools revealed that ads were the source of the problem. Skeletons for CLS improvement #ĬLS was one of the worst performing field metrics for the home page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |