So, you have a well-configured server but the performance of your website is poor. Your page response times (latency) are in the seconds and your server cannot handle more than 100 concurrent users. You’ve invested in SEO but you still feel that Google Search does not give you the ranking your site deserves. What do you do? How can Google PageSpeed Insights help you? Let’s start with the basics!
Performance is an important ranking factor
Good website performance is essential. A modern website does not just consist of some few static files, it is made up of front-end libraries and frameworks like Bootstrap. The more files a client has to download to render a complete page, the longer it’ll take a page to load. And the longer it takes for a page to load, the lower the ranking falls.
The impact of mobile
The other factor that is key to a website’s search ranking is its mobile-friendliness. Not only because mobile-friendly sites are optimized to load quickly on low throughput and high latency mobile connections, they also provide great user experiences.
A very popular framework to implement easily a responsive web design is Bootstrap, and even though Bootstrap is easy to use, it requires at least two more static files to be able to work. This means that we’re buying usability at the expense of loading performance. But don’t worry, I will explain how you can compensate for this small loss later in this article.
Google PageSpeed Insights helps to increase the performance
With PageSpeed Insights by Google, you can perform checks to identify areas of improvement and make your websites faster and more mobile-friendly within seconds – Both of which are key to get a pole position on Google Search.
You can use PageSpeed Insights for free from the project page, or follow our guide to install Google PageSpeed Insights Plesk Extension on your Plesk control panel.
Understanding PageSpeed Insights Recommendations
1. Avoid landing page redirects
Redirects can cause a perceptible latency if the request is redirected several times to the end point from where data is eventually sent to the client. Every redirect initiates another HTTP request-response action (with possible DNS lookups and TCP handshakes) which can dramatically decrease the site performance, especially on a mobile device with a slow internet connection.
A good example how to avoid redirects for mobile devices, is to use a modern, responsive design. An already mobile-optimized website does not require redirects to a dedicated subdomain for mobile devices.
Also make sure you redirect correctly in one step from http://example.com to https://www.example.com. People tend to just type the shortest form of your domain to the browser address bar – but your website should run with https only (for more security and better ranking) and most probably use www as subdomain.
SEO tip: 301 redirects from HTTP to HTTPS
HTTPS has become an important factor for the ranking in Google. Search engine prefers website that use the HTTPS protocol to ensure secure communications between the two endpoints, here the client and the server. Consider activating a 301 redirect option in on your domains once you’ve installed your SSL certificates.
For Plesk users, the Plesk extension Security Advisor will help you to activate free certificates for all you websites, and you can activate your 301 redirects through “Hosting Settings” on your dashboard.
Talking about redirects, Plesk supports the SEO-friendly 301 redirects from HTTP to HTTPS out of the box. This means, if you activate a free SSL certificate powered by Let’s Encrypt, Plesk will help you to switch to the secure protocol without losing the ranking power.
2. Enable compression
Always send content compressed with GZIP or Deflate to the client. This rule checks whether the source served compressible resources (such as HTML, images or JS / CSS files) with compression. Compression reduces the number of bytes transferred over the network up to 90%. This reduces the overall time to download all resources which leads to a faster loading time and better user experience.
Important for the compression usage is that both sides (both client and server) understand the applied compression algorithm. The so-called HTTP Header fields exchange the supported algorithms. If you want the know more about the network protocol HTTP, then please read my article about HTTP/2. Most modern browsers do already support compression out of the box. On the server-side you can use special modules, e.g. mod_deflate (Apache) or ngx_http_gzip_module (Nginx).
Plesk supports compression out of the box
Don’t worry, a Plesk server already pre-installs the required compression modules, you just have to activate this feature manually for all domains that should use compression. You can add the needed code into an .htaccess (Apache) or web.config (NGINX) in the root directory of your website or even easier directly in Plesk:
Go to “Websites & Domains” and select “Apache & nginx Settings”. If you use the Apache web server, then you will have to add the following code into the textarea under “Additional Apache directives”. Select the textarea “Additional directives for HTTPS” if you are using HTTPS else the first textarea.
Apache
AddOutputFilterByType DEFLATE text/plain text/html text/xml;
AddOutputFilterByType DEFLATE text/css text/javascript;
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml;
AddOutputFilterByType DEFLATE application/rss+xml;
AddOutputFilterByType DEFLATE application/javascript application/x-javascript
If you use NGINX, then you have to add the following code into the text area “Additional nginx directives”.
NGINX
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_disable "msie6";
gzip_types text/plain text/css text/javascript text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss;
Warning: The dynamic compression can affect the CPU in the way that you could lose the performance advantage of the compression due to long CPU processing. It does not make sense to set the compression level to the highest level because the gain in the file size is minimal compared to an average level but the CPU load and processing time is dramatically higher. Another improvement would be to cache already compressed files and deliver them directly without any compression processes involved.
3. Leverage browser caching
The loading of static files is time-consuming and expensive. The browser stores already downloaded resources in the cache storage of the browser. The server can define a specific caching policy with special headers. The local cache should provide the resources from the local cache instead of requesting them again from the server.
You can use two header fields in the response header: Cache-Control and ETag. With Cache-Control you can define how long the browser can cache individual responses. ETag creates a revalidation token with which the browser can recognize file changes easily.
The browser should cache static files for at least one week. If you have files that don’t change regularly or at all, then you can increase the cache time up to one year.
4. Reduce server response time
PageSpeed Insights triggers this rule if the server does not respond within a certain time span (>200ms). The response time means the time that the browser needs to load the HTML code for the output. Many factors can have a negative effect on the response time.
The reason of a slow response time is not easy to solve without insight analysis. Possible factors for the delay could be caused by the server, such as slow CPU or memory starvation, or in the application layer, e.g. slow script logic, heavy database queries or too many libraries included.
The question is, how to find those bottlenecks? You could use the New Relic Extension to solve such issues or alternatively check your website with WebPageTest to see how browsers render the pages and which files slow your site down!
5. Minify HTML, CSS & JavaScript
The server can minify resources like the HTML code or JavaScript and CSS files before sending them to the browser. This saves many bytes of data which speeds up the download of the resources. Minification is the process of compacting the code without losing any information that the client requires to render the website properly.
Such optimizations contain for instance the removing of comments, unused code or unneeded whitespaces. Don’t worry, you don’t have to do it manually, there are a lot of free tools or plugins that will do the job for you automatically. Just google it!
Note: If you look in such a minified file, you might think that this is not readable at all but for the computer it doesn’t make a difference. In fact, it is even better if the code is as compact as possible!
6. Eliminate render-blocking JavaScript and CSS in above-the-fold content
PageSpeed Insights triggers this rule if the browser loads JavaScript and CSS files even though the so-called above-the-fold content doesn’t need their code to create the proper output. This means that the browser can not render the HTML output as long as all external resources are not available completely.
An external resource is not necessarily a file from another server but an additional file in general that the client has to load on top the the HTML response to render the page properly. Rendering relevant JavaScript and CSS code can be added inlined. But this should be limited only to the absolutely necessary code parts. You should load not rendering critical JavaScript code asynchronously or deferred at the bottom of the page.
It also makes sense to concatenate all files into one single file (one file each for CSS and JavaScript) to reduce the amount of HTTP requests. In general, you should definitely activate HTTP/2 support on your server. The new version of the network protocol will have a very positive impact on the site performance. Read all about HTTP/2 and how to activate it in our blog post HTTP/2 – Increase your site performance!
7. Optimize images
If you have a lot of images on your website, then this could one of the biggest improvement potential. Optimizing images without an impact of the visual quality can reduce the file size significantly which in turn improves the download time and bandwidth usage drastically.
Many different possibilities exist to optimize images, e.g. resolution, image format or the quality settings. On many websites webmasters upload images in too high resolutions and thus with too large file sizes. PageSpeed Insights lists these files after the check with a percentage number of possible size saving for optimized variations of the same images.
Content-Delivery-Networks like CloudFlare (link to our extension) can optimize images automatically for you and bring them close to your customers. Be aware, this optimization feature requires a paid subscription. Of course, you can also optimize your images manually. Read this guide provided by Google: Optimize Images.
8. Prioritize visible content
This rule is similar to the render-blocking rule. PageSpeed Insights triggers it when additional network round trips are necessary to render the above-the-fold content of the loaded page. If visitors load this page over a slow connection (with high latencies), the additional network requests will create significant delays and degrade the user experience.
It is important to structure the HTML code that the critical content is loaded first. So, if you have a sidebar next to you article, then position the sidebar after the article in the HTML code so that the browser renders the article before the sidebar.
I’ve already mentioned the asynchronous JavaScript delivery, it is also possible to improve the CSS delivery strategy. Required CSS instructions in the visible content part can be loaded inlined directly in the HTML code and the rest deferred in one file after the rendering process.
Google PageSpeed Insights Plesk Extension
If you haven’t already done so, install the Google PageSpeed Insights Plesk Extension today and start improving your website performance and rankings.
Do you have tips of your own? Share them in the comments below.
