Get in the know
We stay on top of the latest trends so you don’t have to. Subscribe for a quarterly dose of marketing tips, web design techniques, creative trends, and a whole lot more, plus a look at our featured client work.
What’s the first thing almost all of us do when looking for something new? We Google it. Your website performance can now affect how high you appear on Google searches, therefore affecting how many new users come to your website. Today, we’ll look at what website performance means, tools you can use to measure your site’s performance, and common issues and fixes to improve performance scores.
What is website performance and why do we care about it?
Website performance refers to how quickly your website loads and displays content. There are new and specific metrics that Google looks at for Search Engine Optimization (SEO) rankings. These metrics affect how often and how high your website appears in Google Search results.
Your website is a user’s first impression of your brand, and it’s your best bet for attracting new customers. Website performance is the difference between a user staying on your site and making a conversion, or a user closing the page and going with a competitor. Remember, users are impatient and want instant gratification, so your website needs to meet expectations.
What is a “fast” website?
In theory, a “fast” website means that content loads quickly, and the site is useful, usable, and delightful for the user. For your users to stick around and convert, all of these should be true. Google put together these definitions to help explain user-centric performance:
All about the new Core Web Vitals
Now let’s get into the finer details. In 2020, Google introduced Core Web Vitals – a set of metrics to measure website performance and user experience. Not only are these important for SEO and website performance scores, but they are the usual suspects that require improvements when auditing website performance. Here are the Core Web Vitals, defined:
Largest Contentful Paint (LCP) = loading performance
LCP should occur within 2.5 seconds from when the page starts loading. Make sure the largest items on the page load quickly.
Common culprits: Large hero images, large hero text, slow server response
First Input Delay (FID) = interactivity
Pages should have an FID of less than 100 milliseconds. This measures how long it takes for a user to interact with the page, for example: clicking a CTA or advancing a slider.
Common culprits: External scripts, unused or extra code
Cumulative Layout Shift (CLS) = visual stability
Pages should maintain a less than 0.1 CLS. Higher CLS is caused when content shifts as the page loads, whether it be fonts, images, or items shifting around.
Common culprits: Alert or cookie banners, images loading
Common issues and how to fix them
As developers, we are always running reports while building and maintaining sites. However, clients are also running frequent reports and asking for quick fixes. Let’s cover the most common performance issues we run into and how to fix them.
Image optimization
This may seem like a no-brainer, but every image uploaded to a site needs to be optimized. We don’t ever want to serve up a 4,000px by 3,000px, 9.2MB image that the client uploaded for their homepage hero, as that will affect both LCP and CLS.
Solutions:
Ensure all images are optimized and served at the smallest file size possible.
Pro tip: Use tools like ImgOptim to crunch file size.Use WebP and SVG formats when possible with fallback PNGs or JPEGs.
Pro tip: Check WebP for degradation at aggressive settings. You can use a script like ImageMe to automatically convert to WebP.Use image transforms to ensure CMS-managed assets are resized and formatted properly.
Pro tip: CraftCMS can convert PNGs and JPEGs to WebP on the fly.Lazy load images, backgrounds, and videos.
Pro tip: Lazysizes.js is our go-to for images and can lazy load divs and iframes as well, which is useful for embeds.Use source sets to serve appropriately sized images based on screen size.
Pro tip: Lazysizes.js offers this functionality as well as native markup.Reserve space for images using the aspect ratio trick, or set explicit width and height for images above the fold to avoid content reflow.
Javascript & CSS
In 2021 nearly every website includes some form of Javascript and (hopefully) CSS. These are two of the culprits we see pop up that affect CLS and FID scores.
Common solutions:
Always serve minified files. This can make a 4-6x difference in file sizes.
Use code-splitting to break scripts into small chunks. Only call scripts when needed.
Use CriticalCSS and/or PurgeCSS to ensure you’re serving necessary styles first and removing any unused CSS.
Remove unused libraries.
External scripts & fonts
One common ask from clients is to add marketing and/or tracking scripts to their website. This typically affects LCP, FID, and CLS, and some scripts are worse offenders than others.
Defer or load scripts asynchronously whenever possible so they don’t block page load and interactivity.
Pro tip: Drift is a huge offender here. We recommend loading this on first scroll as opposed to on page load. This can be done in Google Tag Manager or using custom JS.With Typekit & Google Fonts, preload and use font-display: swap property to avoid a flash of invisible text.
Pro tip: We’ve seen both Typekit and Google Fonts getting slower lately. Self-hosting the fonts can sometimes improve things.FontAwesome was once a great solution, but it now adds too much bloat (and another 3rd party service). We prefer to use SVG icons going forward.
Pro tip: The Noun Project and Tabler are our top two recommendations.Here is a great resource that lists 3rd party scripts and load times: https://github.com/patrickhulce/third-party-web
Alert bars, cookie notices & ads
We’re often asked to add an alert banner, a GDPR cookie banner, or digital ads to a website. We have to be careful how these will appear so they don’t cause layout shifts and negatively affect CLS. Here’s what you can do:
Reserve space for anything popping up at the top of the screen.
Alternatively, move any pop-ups or alerts to the bottom.
Avoid placing ads near the top of the viewport, or reserve space.
Don’t inject new content above existing content.
Don’t forget about server optimization
I’d be remiss if I didn’t mention how important it is to make sure your servers are performant and scalable. Here are some tips to set up your site for success on a server that will help keep your TTFB (Time to First Byte) and LCP scores low.
Optimize server speed.
Check CMS caching in templates.
Implement cache policies for all file types.
Consider edge cache CDNs such as Fastly, Cloudflare, Akami, or Amazon Cloudfront; consider image/video CDNs such as Cloudinary or Imgix.
Extra tips and treats
Performance reports generate some pretty long lists of issues which makes it tough to weed through and figure out what to fix. Here are some helpful tips on the common issues that can usually be ignored.
“Image elements do not have explicit width and height”
This can usually be ignored, as most image sizing is controlled via CSS. If possible, set the width and height on large images above the fold, as these are most crucial for Core Web Vitals metrics, especially CLS.
Eliminate render-blocking resources
Your hands may be tied if you use 3rd party resources. You should try to identify the problems and see if any of these services can be removed.
Avoid document.write()
This is usually included in Google Analytics and other marketing scripts and doesn’t count against any Core Web Vitals metrics, so is usually OK to ignore.
Serve static assets with an efficient cache policy
Make sure you are caching all static assets. Similar to above, this one often points to 3rd party assets (like Google Analytics) and can be ignored.
Sometimes Google PageSpeed contradicts itself
For example, not waiting for slow web fonts before showing text improves LCP, but hurts CLS. Similarly, things don’t always add up the way you would expect, like the fact that Google Tag Manager adds load time (BAD!), but forces other scripts to run async, which improves TTFB (GOOD!).
Let’s get started!
When all is said and done, it takes a lot of trial and error – testing, fixing, re-testing – to move the needle when it comes to improving website performance. We hope we’ve left you with some good tips for tackling the new Core Web Vitals metrics. If you’re looking to upgrade your website performance and boost your SEO rankings, Imarc’s team is here to help. Let’s talk!
