Cumulative layout shift is a calculation of unexpect “shifts” in content that continue to load after it’s been display . Think of a website with a button you want to click, and before you click the button, a banner pops up over the top, pushing the button down. There’s a good chance you’ll click the banner instead of the button. This is obviously a frustrating experience, so this metric is a way to counteract that.
Google reports that Core Web Vitals scores will be taken into account when determining page rankings starting in May 2021. Now is the perfect time to check out your scores and prepare for the next algorithm update.
Is your website’s page spe score not as green and shiny as you’d like? Don’t worry — there are all sorts of tricks to improve your score.
1. Get a good hosting provider.
Are you flagg for r uc initial server response time? Not all hosting is creat equal. Cheap hosting plans on shar servers won’t respond as quickly as d icat hardware. Hosts vary widely in price, and you can easily overspend. Spend some time reviewing the available packages and choose an option that will adequately support your site’s traffic.
2. Make sure GZIP is support and enabl
GZIP is a method of compressing data that occurs at the server level. It allows common assets such as images, stylesheets, and script files to load faster.
3. Compress and lazy load images.
Web designers and clients often want to upload the highest quality images they have. Unfortunately, this will completely destroy the loading spe of your site. Even if you compress your assets in Photoshop, still send them through an image compression tool like TinyPNG or Smush. Additionally, lazy load as many images as possible below the fold. Lazy loading will delay the loading of an image until the user scrolls the viewport to where that image is locat . R ucing the elements that are requir when your page loads will greatly impact spe . Plugin options are available for lazy loading, but you can also add native support by using a lazy loading library in your theme.
4. Use the “Swap” option for custom fonts.
PageSpe Insights will flag you if text isn’t visible until your custom font is load . You can avoid this “Flash of Invisible Text” (FOIT) by loading system fonts and then “swapping” them for your desir font once the resources are ready. If you’re loading Google fonts, just add &display=swap to the Google font URL. If you use font-face in your stylesheet, you can add the parameter font-display:swap;. You can also load fonts faster by preloading them in your headers. Even if you’re loading .woff2 files locally, you can use rel=”preload” in your markup to fetch your .woff2 files earlier.
5. Combine and minify CSS and JS.
Does your theme combine and minify stylesheets and scripts? Great! But this isn’t enough to give a spe test peace of mind. Using a plugin like WP Optimize can further consolidate files in your plugins and lower the total number of requests on page load.
