How To Implement Page Speed Recommendations

[share_buttons]

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:

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:

Below we’ll explain each item and provide possible solutions on how you can fix each item on your site.

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.

Recommendations

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.

If you are not able to implement a responsive design, ideally you should implement automatic redirections using http redirects or javascript redirects. If your website uses automatic redirection, be sure to treat all Googlebots just like any other user-agent and redirect them appropriately.

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.

Recommendations

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 Resources (JavaScript, CSS and HTML)

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.

Recommendations

You should minify your HTML, CSS, and JavaScript resources:

To minify HTML,try HTMLMinifier
To minify CSS,try CSSNano and csso.
To minify JavaScript,try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

Alternatively, the PageSpeed Module, integrates with an Apache or Nginx web server to automatically optimize your site, including resource minification.

Optimize Images

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.

Recommendations

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.

Recommendations

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

Similar to the case above for CSS, in order to load a page, the browser must parse the contents of all <script> tags, which adds additional time to the page load. By minimizing the amount of JavaScript needed to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, you can reduce the initial load time of your page.

Recommendations

Avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Similar to the CSS recommendations, Scripts that are necessary to render page content can be inlined to avoid extra network requests.

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.

Correctly ordering external stylesheets and external and inline scripts enables better parallelization of downloads and speeds up browser rendering time.

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.

Recommendations

Make sure you are using the asynchronous version of your script. The following popular scripts support asynchronous script loading:

How To Implement Page Speed Recommendations On Your Site

Items Fixed on Site

Avoid Landing Page Redirects:

Avoid bad requests / Avoid HTTP 404 (Not Found) error

Minify Resources (JavaScript, CSS and HTML)

Optimize Images

Optimize CSS Delivery

Prioritize Visible Content & Remove Render Blocking JS

Use Asynchronous Resources

TL;DR

Connect with us