Optimizing your website’s speed

Websites are a lot like cars - if you take them into the shop for routine maintenance, they will last you a long time. Sometimes your car, like my trusty Honda Civic, runs like a champ, and you end up driving it for 15,000 miles before realizing you’re due for an oil change. It’s easy to let your website fall into this category of “if it's not broke, don’t fix it.” While your website can’t get a flat tire, it can sometimes start to slow down or feel sluggish, so let’s take it into the shop and see what we can do to bring it back to peak performance.

Does your entire website feel slow, or is it just slow on certain pages? Answering this question can help diagnose the problem and point to potential solutions. If it only feels slow when going to specific pages on your site, there’s likely something on that page that’s causing it to bog down. Maybe it’s the homepage with a flashy background video or many high-resolution product photos. Perhaps it’s a resource page with lots of filters and sorting options. Whatever the case may be, identifying that the problem is localized to specific pages is valuable information before getting it fixed.

---

Only some of the pages on my site are slow

Here are some of the common causes and potential solutions when only some of the pages on your website are slow.

Images

Images are one of the first places we look when doing a performance audit on a website. This is because they violate two of the core tenants of web performance: reducing the number of requests your site makes and reducing the size of said requests. On most sites, images are plentiful (i.e. generate lots of network requests) and they are large in file size. Fortunately, there are a lot of ways to reduce the impact that images may be having on your website:

• Compress images to reduce file size. This can be done online with tools like Squoosh or TinyJPG.
• Use modern formats like WebP and AVIF. These modern formats are made specifically for the web and deliver your photos at near-lossless compression for significantly less bandwidth than a traditional JPG or PNG format.
• Serve responsive images. This optimization is particularly beneficial to mobile users who are often on a slower cellular network as it serves a smaller image intended specifically for mobile devices.
• Lazy load images where appropriate. Lazyloading waits until the image is about to be in view for the user before it makes the network request to download the image. This can make a big difference if your site has a lot of images.

Some all-in-one solutions to the suggestions above include platforms like Cloudinary and imgix, both of which have a generous free tier to get started with. If you’re using Craft CMS, plugins like ImageOptimize take a lot of the guesswork out of generating and serving more efficient images.

Background videos

Background videos at the top of a web page are a common design element and can look really impressive, but they come at a cost. They slow down the initial page load, can distract users from your actual content, and can also have negative impacts on your site's accessibility. The general consensus is that they probably aren't worth it, so consider removing them entirely. If you’d prefer to keep one, consider these adjustments to keep its performance impact to a minimum:

• Compress the video as much as possible while maintaining reasonable quality (the smaller the file size, the better the performance)
• Use a static image on mobile devices and keep the videos just for desktop users. Even the smallest videos are much larger in file size than a properly sized image and that can really slow down your site for visitors on a mobile network

Complex logic / filters + sort options

When we get reports of individual pages being slower, it is commonly on those that include large collections of data along with options to sort and filter that data. This includes pages like a blog/news landing page, a product gallery page, and so on.

Typically it's not the sorting/filtering options themselves that slow things down but rather misconfigured or inefficient template logic handling all of the data. It might have worked great when the site first launched and there was less data to handle. Now that it's matured and there are hundreds or even thousands of records to sort/filter, the underlying queries and template logic probably need to be reworked.

If you're using Craft CMS, one of the first places to start in optimizing pages like this is to use eager-loading.

Embeds / iFrames

Embedded content exists in some form on just about every website. Typically it is used to add videos, maps, or content from other sites. While convenient, it also adds additional network requests that can slow a page down.

Most of the time these resources are not needed right away, so one solution to mitigate slow performance is to lazyload the embedded content. Lazyloading images works the same way it does for images as it simply waits until the embedded content is in view before downloading the resources required.

Another potential solution is to use facades. While facades are not practical in every circumstance, they can be a great option for the usual embed suspects like YouTube videos or Google Maps. Facades look just like a regular embed without the overhead. An example would be replacing a Google Maps embed with a static image of a map that when clicked, links to the Google Maps page itself with the appropriate coordinates. Tools like the official Maps Static API or this website make it accurate and easy. For YouTube or Vimeo video embeds, consider using the lite-youtube-embed or lite-vimeo-embed packages. They look and behave just like the regular embeds, but are significantly faster.

---

Nice try, but my whole site feels slow!

If it feels like your whole site is not performing as it should, we should examine what resources and other data are being loaded on each page. Let's take a look at some of the most common causes and potential solutions for site-wide slowness. Typically, every page will load some amount of JavaScript, CSS, and fonts. All of these resources are capable of causing significant slowdowns to your site, so it's worth doing an audit to see what resources are being loaded, how they're being used, and if any can be eliminated.

CSS

For CSS stylesheets, purging unused styles and minifying the stylesheet is a good place to start. Shipping critical CSS first and deferring the rest of the stylesheet can have big performance benefits, but can be tricky to set up.

JavaScript

Optimizing JavaScript (JS) is largely similar. The goal is to remove any unused or unnecessary JS, load only the JS that is absolutely necessary for your site to function when it first loads, and then load additional JS as needed. Front-end build tools like webpack, Parcel, Rollup, and Vite all have the ability to code-split or dynamically import the code that is not essential right away.

Fonts

The biggest trap to avoid is loading too many fonts. Limiting your site to 2 or 3 custom fonts is good practice. Next, adding rel="preload" attribute to the tag where your font is requested will help it load earlier in the cycle. The font-display: swap property in your stylesheets @font-face declaration will ensure that the text on your site is present even if your custom font has not loaded yet. Lastly, having an efficient caching policy for the font files can be a huge boon for performance.

Icon fonts

Icon font libraries like Font Awesome are convenient but can be costly from a performance perspective. Consider replacing these libraries with individual SVG icons for both improved rendering and faster page load speeds.

Navigations / other global site elements

Another place to look in the quest for optimal performance is the areas of your site that are the same on each page. This includes the header, often containing your site's navigation, and your footer, which sometimes includes a sitemap or similar list of content. Multi-level meganavs are common, especially on enterprise sites. It is crucial that these are set up properly. Just like the pages that have complicated logic or filtering options, it is easy for navigations to grow larger over time, eventually resulting in slow load times everywhere on your site. Ensuring that the template logic and underlying database queries are optimized will minimize performance issues.

Caching

Areas of your templates like the header that get loaded on each page are often good candidates for caching. I have intentionally avoided the topic of caching until now because it is often used inappropriately to mask the issues described above. Instead, I like to think of caching as the cherry on top – it's nice to have and fun to eat, but the ice cream sundae underneath wouldn't be ruined without it. Caching comes with its own tradeoffs and should be used with the mindset that the cache could be cleared at any moment. All that being said, it can make a huge difference in the performance of your site, especially in areas or sections that do not change frequently.

Tracking scripts

Tracking scripts like Google Analytics, Facebook Pixel, and Hotjar can be detrimental to your site's performance. That's not to say that you shouldn't use them – responsibly-collected data about your website's traffic and users is totally valid – but you should proceed with caution. Having too many tracking scripts is not only redundant, as many do essentially the same thing, but also costly for the end-user. It's good practice to do a regular audit to see what analytics tools your team is actually using and remove the ones that are no longer being used. New tools like Partytown and Zaraz can mitigate the performance impacts of third-party tracking scripts by using web workers to run the scripts in a different thread.

Managing long-running processes

If the backend of your website has any kind of long-running task such as a report generator or product import, make sure that these tasks are not inhibiting the experience for front-end users. A common way to do this is to run tasks like this in a queue – a background process that only runs when the system has available resources. Depending on your situation, you could even offload these resource-intensive tasks to a serverless function or web worker.

Web server / hosting

One last piece of the puzzle is the infrastructure that hosts your site. Small sites can often get away with small servers, but as your site grows in size and popularity, it might be time to consider upgrading the server. Larger servers can handle more resource-intensive scripts/functionality and can also handle larger amounts of traffic.

---

In summary

When it comes to optimizing your website’s speed, there are a lot of factors and no single solution. Fortunately, almost all of these factors adhere to the principle of reducing the number and size of requests made by your website. Reduce the number and size of requests your website makes using the strategies above and you will be well on your way to a fast website.