The amount of time it takes for your web page to load is critical. A slow loading web page can have a negative effect on SEO (search engine optimization) and CRO (conversion rate optimization), translating to a loss in revenue and customers. Improving your web page speed score will lead to a better user experience, higher SEO rankings and conversions, and increased revenue.
Evaluate the Speed of your Website
The first step to faster page loading is identifying the current page load speed of your site. There are three popular (and free) tools available that measure speed, but each provides slightly different metrics. For a fully rounded assessment of potential speed issues on your site, use all three.
- Google PageSpeed Insights: This tool checks for common performance best practices, provides overall page speed score, a list of potential issues, and suggestions on how to fix them.
- Web Page Test: Although this tool lets you test any page from your website, much like Google PageSpeed Insights does, the results are very different. The most notable difference is the ‘First Byte Time’ metric (the time it takes to receive the first byte from the server) that Web Page Test measures. With Google recommending a first byte time of less than 200 milliseconds, this is an important metric to keep an eye on. For a median score of your page speed metrics, we recommend running a minimum of three tests.
- GT Metrix: This tool has results and actionable recommendations similar to PageSpeed Insights, but it also has a few other nice features. You can run tests on Android devices for an accurate picture of your site’s mobile performance, get your page’s Page Load Time, Total Page Size, Total Number of Requests, and even see your page’s performance relative to the average of all sites analysed on GT Metrix.
Actionable Tips For Speeding Up Your Site
So what can you do to speed up your site? Let’s take a look at how to resolve issues that are commonly identified by PageSpeed Insights, Web Page Test, and GT Metrix.
Optimize Images
For most web pages, images account for most of the download bytes on a page, and optimizing images can deliver the biggest performance improvements. It’s best to optimize your images before they are uploaded to your server. There are a number of online tools that will compress your images, including Tiny Jpeg and Tiny PNG. Google also has a tool called Guetzli, which creates high quality JPEG images with 35% smaller file sizes than other methods currently available.
But what about ads? Many websites host ads to generate income, and many times these ads are not optimized, which can hinder page speed and undermine revenue. If you have limited control over ad optimization, you can press for guidelines on media constraints and/or formats and perhaps make some headway.
Avoid or Minimize Render-Blocking JavaScript in Above-the-Fold Content
JavaScript and CSS resources usually prevent a web page from being loaded until they are downloaded and processed by the server, which can be a time suck when rendering above-the-fold content. This is especially true if they are external JavaScripts that need to be fetched before they can be executed.
Three ways to avoid or minimize the use of render-blocking JavaScript are:
- Inline JavaScript
- Make JavaScript Asynchronous
- Defer the Loading of JavaScript
Find out more about removing render-blocking JavaScript here.
Reduce Your Server’s Response Time
You can get a perfect score on GT Metrix or the magic 85/100 on Google PageSpeed Insights, but if your server’s response time is slow, you can still end up with a slow loading web page. This makes server response time crucial, and there are dozens of factors that can contribute to slow server response time, including:
- Slow database queries, routing, and application logic
- Frameworks and libraries
- Memory and resources CPU starvation
Identify and prioritize the factors that are impacting your site, and begin fixing them for improved speed. To address problems down the road, put automation in place that alerts you to future issues.
Leverage Browser Caching
Browser caching temporarily stores, or “remembers”, webpage resource files such as your company logo and CSS files. When you leverage browser cache, you can instruct browsers on how their resources should be handled. This allows subsequent site pages to load much faster for customers that visit more than one page on your site, or have repeat visits.
To cut down on “fetching” resources over the network, which is slow and expensive, all servers should specify a caching policy. Google recommends a minimum cache of one week (preferably up to a year) for assets that are static or don’t change frequently.
Avoid/Minimize Landing Page Redirects
Cutting out unnecessary redirects allows a better mobile experience for users, and creating a responsive site is the best way to avoid redirects from your landing page. For some sites, such as sites with a separate mobile (often designated as m. before the URL)website, landing pages may be unavoidable. In these instances, minimizing their impact by making a single roundtrip redirect instead of multiple redirects is still helpful. Read more about avoiding landing page redirects here.
Minify HTML, CSS and JavaScript
Minification refers to the process of removing redundant or unnecessary data without changing its functionality. Depending on which element(s) you need to minify, there are tools available to help with the process:
- To Minify HTML: HTML Minifier
- To Minify CSS: CSSNano or csso
- To Minify JavaScript: UglifyJS or Closure Complier
Improving page load speed on your website will help you deliver a better experience to your customer, which in turn will result in better rankings and more conversions for your business.
