There are several tools that analyze page speed and show how quickly users can see and interact with content. Most of the tools will identify areas that need improvement looking at these main areas:
Items Fixed on Site
- Avoid Landing Page Redirects
- Avoid Bad Requests
- Minify Resources
- Optimize Images
- Optimize CSS Delivery
- Prioritize Visible content
- Remove Render-blocking JS
- Use asynchronous scripts
The list above only looks at items that are fixed on the website, which is the focus on this blog post. There are more items, but they are fixed at server level, you can read more about this on the first blog post.
Some of the tools that test site speed are:
Avoid Landing Page Redirects:
When pages redirect, they trigger an additional HTTP request-response cycle.
It’s important to minimize the number of redirects issued by your website – especially for resources needed for starting up your homepage. The best way to do this is to restrict your use of redirects to only those cases where it’s absolutely technically necessary, and to find other solutions where it’s not.
Tools trigger this rule when they detect that you have more than one redirect from the given URL to the final landing page.
Here are some examples of redirect patterns:
- com uses responsive web design, no redirects are needed – fast and optimal!
- com → m.example.com/home – one hop redirect which provides a slow mobile experience.
- com → www.example.com → m.example.com – 2 hop redirect which provides a very slow mobile experience.
Ideally you will be able to change your site to work with a responsive web design. Using responsive design will allow you to provide a great multi-device experience and eliminate unnecessary redirects.
Avoid bad requests / Avoid HTTP 404 (Not Found) error
Fix “broken links” on your site, since these 404/410 errors create wasteful requests. As your website changes over time, it’s inevitable that resources will be moved and deleted. If you don’t update your frontend code accordingly, the server will issue 404 “Not found” or 410 “Gone” responses. These are wasteful, unnecessary requests that lead to a bad user experience.
You should crawl your site for such links with a tool like Screaming Frog where you can export the inlinks and outlinks reports to get all of the links on your site and identify pages that are linking to broken pages.
Another option is looking at the crawl errors found in Google Search Console and fix them.
Minify refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser – e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.
- To minify HTML,try HTMLMinifier
- To minify CSS,try CSSNano and csso.
Alternatively, the PageSpeed Module, integrates with an Apache or Nginx web server to automatically optimize your site, including resource minification.
Images often account for most of the downloaded bytes on a page. As a result, optimizing images can often result on large performance improvements: the fewer bytes the browser has to download the faster it can download and render content on the screen.
You can optimize images for speed by:
- Reducing their file size without affecting their visual quality
- Reduce the image size by removing unnecessary whitespace for padding. Use css for padding around images instead.
- Reduce the image size to the proper dimensions used on the site. Using html or css to resize images is not a good practice since the browser still needs to load a huge image even if it is shown as a small image on the website.
- Use proper file formats. GIF, PNG, and JPEGformats make 96% of the entire Internet’s image traffic. Because of their popularity, Google’s PageSpeed Insights tool provides specific optimization recommendations and the tool allows you to download the optimized images (Google uses the image optimization library from com).
- Follow the best practices for serving responsive images
- Follow the image optimization checklist for individual images
Optimize CSS Delivery
Before the browser can render content, it must process all the style and layout information for the current page. As a result, the browser will block rendering until external stylesheets are downloaded and processed, which may require multiple roundtrips and delay the time to first render.
If the external CSS resources are small, you can insert those directly into the HTML document, which is called inlining. Inlining small CSS in this way allows the browser to proceed with rendering the page. Important: if your CSS file is large, completely inlining the CSS may cause PageSpeed issues.
In the case of a large CSS file, you will need to identify and inline the CSS necessary for rendering the above-the-fold content and defer loading the remaining styles until after the above-the-fold content. Examples of inlining a small css file.
Prioritize Visible Content & Remove Render Blocking JS
It is important for the inlined content to be small and must execute quickly to deliver good performance. Scripts that are not critical to initial render should be made asynchronous or deferred until after the first render. Please keep in mind that for this to improve your loading time, you must also optimize CSS delivery like we described above.
Use Asynchronous Resources
Fetching resources asynchronously prevents those resources from blocking the page load. When a browser parses a traditional script tag, it must wait for the script to download, parse, and execute before rendering any HTML that comes after it. With an asynchronous script, however, the browser can continue parsing and rendering HTML that comes after the async script, without waiting for that script to complete. When a script is loaded asynchronously, it is fetched as soon as possible, but its execution is deferred until the browser’s UI thread is not busy doing something else, such as rendering the web page.
Make sure you are using the asynchronous version of your script. The following popular scripts support asynchronous script loading:
- Clicky (getclicky.com/js)
- Disqus (com/count.js, disqus.com/embed.js)
- Facebook (facebook.net/…/all.js)
- Google AdSense (googlesyndication.com/pagead/show_ads.js)
- Google Analytics (google-analytics.com/ga.js)
- Google DFP GPT (googletagservices.com/tag/js/gpt.js)
- Pinterest (pinterest.com/js/pinit.js)
- ShareThis (sharethis.com/button/buttons.js)
- ScorecardResearch/Comscore (scorecardresearch.com/beacon.js)
- Twitter (twitter.com/widgets.js)