Double the speed of your web – Google PageSpeed Insights

Speed of your pages is going to be the new indicator considered when crawling and placing the pages into search. It is, therefore, important to track it. One side is to measure the speed of your pages. The other is to work with non-optimal results. Now we will focus on both.

Google PageSpeed Insights (PSI) is an interface that tracks speed performance of your pages. The control of speed is important. Speed score is one of the indicators that influence your position in search. Also, it can influence your potential customers. According to Google, up to 53% of users close the webpage that has not been loaded within 3 seconds.

Thanks to the new update you can now track 2 scores – Page speed and Optimization. Google PSI will not only measure your page´s speed, but it also offers you tips for its optimization. We have chosen 5 of them that could be helpful for your business.

1.) Avoid landing page redirects

Redirects launch new HTTP cycle of request-response that delays rendering of the page. If there are too many of these cycles, they can lead to long processes and lower performance of your website.

Google recommends responsive website, with maximum of one redirect from given URL address to landing page.

If you need to use redirects, distinguish between 301 (permanent, for instance when you have removed the old contend and the redirect leads to new one) and 302 (temporary, for instance for webpages for specific devices) redirects. In case of difference between JavaScript and HTTP redirects, Google supports both.

2.) Enable compression

When compressing you content, you will shorten the time needed for source to download that saves users´ data, and the rendering time of your webpage. Google recommends using gzip for all content that can be compressed.

Among advanced options there is removal of all unnecessary data, alternatives to gzip encoding, or other alternatives for compressions of various resources.

3.) Improve server response time

Quick response is the base.

The response time measures, how long does it take to load needed HTML code, for webpage to display, while it subtracts network delays between Google and your server.
The recommended response time is under 200ms. It depends on various factors. The first step is to detect a problem, to measure it. After measurement you should discuss a high response time with experts and check it even after the problem is solved.

4.) Leverage browser caching

When obtaining resources thanks to the network, many cycles between the client and the server are launched, what can lead to longer response time. This slow and expensive process can be eliminated by caching policy that will help the client to figure out whether and when it is possible to use responsed from past.

The policies should follow these questions:

  • Is it possible to cache the source?
  • Who can cache it?
  • For how long it can be cached?
  • How can it be efficiently revalidated?

Other solutions include ETags and Cache-Control. Efficient revalidation thanks to ETags will remove unnecessary data transfer, if the source has not changed since the last request. Cache-Control, on the other hand, controls if and for how long can be cached the response necessary for communication with server.

5.) Minify resources

Minification is a process that eliminates redundant data from sources that were delivered to visitors, that can have a huge impact on the overall speed and performance of your website. It does not influence the way the source is processed by the browser. There are various tools that can help you with modification – for instance HTMLMinifier, CSSNano, UglifyJS and so on.

6.) Optimize images

Images account for more than half of your website size and they can be a reason of slower crawling and page rendering. Just as the website, also the images should be responsive, so they can adjust to sizes of various devices without slowing down the communication with server.

Optimization can be achieved by using raster formats, reducing redundant images, removing meta data and other options. There is not one single best way how to do it and therefore we recommend you to use more options.

7.) Optimize CSS delivery

Before the webpage is rendered it has to process CSS. If CSS is blocking the rendering, loading takes more cycles that cause slowing down.

Google recommends inserting small CSS directly to HTML document, to remove small external CSS resources. Do not insert large CSS, for they can have reverse effect.

8.) Prioritize visible content

If amount of data required exceeds the initial congestion window, the communication between server and browser will be more complicated. This disruption can have consequences on users of smartphones, which will take longer time to load the webpage.
This problem can be resolved by giving your HTML a structure that favors critical, visible content. The other option is to reduce data used by your resources.

9.) Remove render-blocking JavaScript

Before the browser renders the page, it has to build DOM by parsing the HTML. Every time the parser meets the script, it has to stop and launch it, so that it could continue parsing HTML code. In case of external script the parser has to wait for the resource to download, which may incur one or more network roundtrips and delay the time to first render of the page.

If you ever find this problem, recreate the JavaScript so it does not block rendering. You can also postpone loading that is not necessary for the current webpage.

About the Author:

Marek Fule
Consultant for online business and marketing. Holder of every Google Ads certification. Account manager for BlueWinston and Shopping in EU. CSS Hero. Gamer.