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 cause 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.
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.
- 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 compression: Image 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.
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.
- 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.
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.
- 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 fonts: Variable 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.
Pages only load so many things at once; optimise that loading process to prioritise what really needs to get done right away.
- 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-headers: Cache-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.
- 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.
- 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 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.
- 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.
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.
- 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.
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 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 Mastodon or LinkedIn.