Have you ever visited a web page and it seemed laggy and hard to find the information you were looking for? Maybe you were trying to follow a link and it wasn’t loading so you went to the next link on the Google search results. While frustrating for a customer, this can have real consequences on a business. If you find one of your pages doesn’t seem to have the traffic you are expecting, maybe it’s time for an audit on your Core Vitals.  

Google provides a tool to audit these core vitals called Page Speed Insights which utilizes Lighthouse. By visiting the Page Speed Insights web page, you can enter your web page URL and have it return data on how it is functioning. It can get pretty complicated, but there are three key Vitals that can tell you a lot about your web page.

LCP - Largest Contentful Paint

This Core Vital is the measurement of how fast your page loads. To score in the green (high score) you need the web page to be able to load in under 2.5 seconds. This becomes more difficult when viewing Page Speed Insights for mobile (a tab at the top of the page). The mobile score is based on an average mobile smartphone on a 3G connection. Every bit of extra data that is loaded onto a responsive web page will affect the mobile score more.

QUICK WINS - Images are sometimes the biggest offenders when it comes to slowing a web page down. 

    1. Make sure that the width/height of the image you are uploading is not larger than you need. 

    2. Use the right format. A PNG file should only be used when you need an image with a transparent section. Otherwise JPEG should be used to save space. While there are great new image formats gaining in popularity, at the time of this writing they are not widely supported and are discouraged. When you have properly sized your images, free services like tinyPNG.com are great to further compress the size of the image.The effect on quality is usually minimal and greatly helps the loading score of your page. 

    3. Choose the proper loading attribute for every image served on the page. Web browsers generally support lazy loading so any image that is loading below the initial viewport of the loaded page should be set to lazy load. This means the page will only load those image resources when they need them and the customer scrolls to where they are viewable. But don’t get carried away! Lazy loading images that are viewable when loading a web page such as a hero image will actually slow down the loading and negatively affect your LCP score.

First Input Delay

This is the metric that measures how long it takes before the page is able to be navigated by the user. You may notice pages that have a poor FID won’t let you interact with them for a second or two. This is because some styles, background third-party plug-ins, and Javascript are actually loading and processing before the page renders. On mobile, this will be more pronounced.   

QUICK WINS - The more third-party trackers (Facebook, Google, chat bots) and services that you use in your modules, the more it will slow down your page. Have a conversation with your team of the needed functionality and only use the ones that push you towards your business goals. If your FID and blocking times are still high, have a conversation with us about creative ways to delay the loading of this blocking data to allow quicker interaction with your web page.

Cumulative Layout Shift (CLS)

This is the final Core Vital that Google considers.  This is a reading of how much a page shifts when a page loads. Why would a page shift and why is that an issue worth considering? When images are loaded on a page, depending on their size, other areas might load before they do. For example, a menu that includes an image might appear before the image has fully loaded. When the image appears it will push the rest of the text menu causing a layout shift. This is a Core Vital because we have all been on websites where you are looking at a piece of text and it jumps out of the way making you have to find it again. Clickbait pages will do this purposefully so you accidentally click on a button that shifts underneath your cursor. This allows for a frustrating, unexpected experience when scrolling through a website.

QUICK WINS-  Having a high CLS score is easily attainable. If you have anything less than a green (high) CLS score, the Page Speed Insights score will list the largest offenders. A visual check of page shifting after load will also be helpful to identify offenders. Since images are usually loading after other resources, adding height and width attributes to the <IMG> tag will save the space that the image needs so it does not shift when fully loaded.