8 Causes of Slow Website Loading (And How To Fix Them)

Karolina Szczur

Karolina Szczur

November 15, 2022

Illustrated by

 Jeffrey Phillips

It’s no secret that slow website speeds negatively affect search engine rankings. However, leaping from knowing the problem to knowing how to fix it is a gulf that many website owners or SEOs never truly cross. The problem is confidence and expertise: people aren’t sure they have the skills to fix the problems that slow website loading.

This list of eight common site speed problems and their solutions ranges from basic to advanced. By going through each one and attempting to make even some small recommended changes, you’ll be able to shave valuable seconds off your slow load times.

Large image and video files

Unoptimised images and videos are the easiest places to start when looking to speed up your web page. These large files may take a long time to load, so cutting them down to size isn’t overly complex.

How to fix it:

  • Get rid of anything unnecessary: If your image or video is simply window dressing, then remove it for an instant speed-up.
  • Choose the correct file types: Images should be converted from PNG and JPEG to WebP or AVIF. All vector assets should be in SVG. Choose MP4s compressed with h264 for video and never use GIFs, if possible.
  • Use image compressionImage compressors make image files more efficient by removing redundancies while preserving image quality. Use our GitHub Image Actions to optimise images directly from your Pull Requests.

Plugins

If you’re operating on the WordPress platform, you undoubtedly use plugins. These tools have their uses but also come with a high-performance cost that slows down websites. All WordPress users should take a hard look at their plugins to find ways to reduce their drag on website load speeds.

How to fix it:

  • Get rid of unnecessary plugins: Consider deactivating any plugins that you don’t use. If deactivating negatively impacts your site, you could always reactivate.
  • Question performance plugins: Some plugins that promise better performance aren’t doing what they say they will. Test your pages with and without those plugins with our Core Web Vitals checker to ensure they are worth it.
  • Test lightweight alternatives: Download and activate lighter-weight alternative plugins where possible. These plugins should offer similar results with smaller footprints.

Font files

Unoptimised fonts on your website add up to 10 seconds to your initial page rendering process—an incredible burden for a design choice. Making minor changes to your fonts will speed up your slow pages considerably.

How to fix it:

  • Avoid webfonts: Although popular, webfonts are the most significant contributors to long font load times. Replace them with simpler system fonts and self-hosted fonts.
  • Change the font-display value to swap: This API instructs the browser to immediately use an available system font while your font files load. This way, you get your fonts as soon as possible and don’t risk the “flash of invisible text” issue.
  • Try variable fontsVariable fonts allow you to load a single file that contains multiple variations of your desired font. This allows for smaller files and faster load times if you need multiple fonts on a single page.
  • Use WOFF2 formats: Fonts in the WOFF2 format can be compressed far more than in the older WOFF format. This compression equates to smaller font file sizes and faster loads.

Resource bottlenecks

Pages only load so many things at once; optimise that loading process to prioritise what really needs to get done right away.

How to fix it:

  • Lazy load resources: Anything non-critical and below the fold should be lazy loaded so that resources are directed to elements visitors need.
  • Serve resources with HTTP/2, HTTP/3, or SPDY: These transfer protocols are more advanced than HTTP/1.1 and allow more tasks to load in parallel.
  • Try web workers: Web workers ease traffic on the main thread by running scripts in the background.
  • Use cache-headersCache-control headers hold instructions for browsers and servers on how often new versions of your web page need to be fetched. Adjusting these cache headings reduces the time between fetches for that page without affecting the user experience.

Unoptimised JavaScript files

JavaScript adds some of the most engaging and dynamic aspects of your websites, but those complexities come with correspondingly large file sizes. Although eliminating JavaScript file sizes completely might not be possible for you, there are some mitigation techniques you should use to make these files more manageable.

How to fix it:

  • Minify code: Remove redundancies and whitespace from your JavaScript files with tools like Closure Compiler or Terser.
  • Compress codeGzip your JavaScript files to reduce the file size by replacing repetitive code with pointers.
  • Convert to CSS: Any JavaScript code that could be executed through CSS instead is preferable, as it executes and renders more quickly. Animations are an excellent place to start.
  • Use code-splitting: Break up your JavaScript files into smaller bundles so you can preload critical JavaScript and lazy load everything else.
  • Opt for lightweight JavaScript libraries: Use a tool like Bundlephobia to check the size of your libraries and find lightweight alternatives.
  • Use server-side rendering (SSR): SSR reduces the amount of JavaScript code a page will need to execute by moving some of that work to the server. Learn more in our guide to the Next.js framework.
  • Use facades: Defer certain JavaScript code using a placeholder static image that’ll load quicker, make the page look functional faster, and not hamper the user experience.
  • Split your builds: Have one JavaScript bundle serve modern browsers with ES6, while your other bundle handles older browsers on ES5. Splitting them this way can offer faster performance for more modern outfits while still providing service to legacy machines.

Unoptimised CSS

Unoptimised CSS doesn’t get as much attention as JavaScript files. However, taking steps to reduce the size of your CSS files is just as important and can positively affect your Core Web Vitals.

How to fix it:

  • Avoid repaints and reflows: Repaints and reflows add additional processing time as the page needs to be reordered or visually updated due to conflicting CSS styles. These unnecessary slowdowns should be avoided by writing or editing your CSS stylesheets with simplicity in mind.
  • Minify, compress, code split, and cache: Just like with JavaScript, these techniques help minimise the footprint of your CSS files while making the crucial parts load faster.
  • Remove unnecessary CSS: Unused CSS slows down page loads and serves no purpose. Audit by hand or use a tool like UnusedCSS.

Third-party scripts

Third-party scripts are code you add to your own website that someone else owns and writes. These scripts often add valuable functionality but negatively impact site performance. Cutting where you can with third-party scripts is a good way to improve loading speed.

How to fix it:

  • See the impact: Use a tool like Calibre to test how third-party scripts impact page speed. Once you see the performance differential, you’ll be able to have a conversation about whether the functionality pros outweigh the page speed cons.
  • Look for alternatives: Alternative third parties offer the same functions you need with smaller footprints. For example, try switching out Google Analytics for an alternative like Plausible or Matomo.
  • Delay scripts: Many third-party scripts should be delayed until later, as they don’t drastically impact your visitors. Deferring their load allows for more critical resources to finish loading first.

Content Delivery Network (CDN) and web hosting

Better hosting and CDN platforms boost your website speed, but it’s difficult to know what “better” is beyond price. If you’ve optimised everything and still find your site isn’t quick enough, ensure the services you’re paying for match your needs.

How to fix it:

  • Server locations: The closer your hosting service and CDN servers are to your visitors, the faster the response times will be. If you’re serving a global audience, look for services that offer more hosting locations for the fastest possible load times.
  • Server quality: Ensure that the hosting provider you choose can handle the traffic you’re giving them. Specifically, check whether their servers are dedicated and have the required amount of CPU and memory for faster processing speeds.
  • Try serverless hosting: Serverless hosting options are perfect for high-traffic websites handling thousands of visitors daily. If you have these kinds of traffic numbers, consider going serverless.

Learn the secret to avoiding slow website loading times

The secret to faster page speeds is making site speed a goal of your entire team. To learn more about how to transform how you handle page speed optimisation, check out our guides to Speed Teams and Performance Budgets.

Karolina Szczur

Karolina Szczur

Karolina is a Co-founder and Product Design Lead at Calibre. With years of design experience under her belt, she’s responsible for the comprehensive user experience spanning over product, visuals and content. Find her on Twitter or LinkedIn.

Become a site speed expert

Join thousands of subscribers keeping up-to-date with web performance news and advice.

The best performance newsletter I’ve come across. Highly recommended.

Addy Osmani

Addy Osmani

Engineering Manager at Google Chrome