1️⃣ Preload Important Assets:
If you think that a particular resource on a page should be prioritized, use <link rel=”preload”> to load it sooner.
2️⃣ Load CSS after HTML loading:
Load CSS Codes after HTML Loading. To optimize your website, it is also a good idea to remove unused CSS code.
3️⃣ Use CDN:
A Content Delivery Network (CDN) can help you send static content to visitors more quickly through a network spread across various Countries.
4️⃣ Compress text files:
Compression algorithms, like Gzip and Brotli, can significantly reduce the size of text files (HTML, CSS, JS) as they're transferred between the server and browser. Compressing your resources will minimize their delivery size, improving load times and LCP.
Find it interesting? Follow us for more interesting and useful info on Web Performance and CWV.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
The Cumulative Layout Shift (CLS) represents the visual stability of a website. A shift in a layout can occur any time when a visible element changes its position from one rendered frame to the next.
Focus on these to improve CLS 🏆👇
1️⃣ Add Dimensions for Image and Video Elements:
Always include size attributes on images and video elements, or provide the necessary space with a CSS aspect ratio box.