Website Speed Optimisation Guide for Google PageSpeed Rules
Website speed is how your site or its pages get opened. It can be described as “page load time” (the time it takes to fully display the content) or “time to first byte” (how long it takes for your browser to receive the first by of information from the web server).
It doesn’t usually matter how we define page speed. The only important thing to consider here is how we can get pages to work better and faster.
The Current IT world is getting faster and faster with each passing day, and now it’s all about speed and performance. Users on the internet need more time to sit back and wait for some websites to load.
According to a Caltech Survey, more than 90% of users close a website if it doesn’t load properly in under 7 seconds. Thus, your website’s speed optimisation is crucial if you want to keep your website the fastest in the market!
There are so many factors upon which site page speed depends. Consider all elements for a perfect site to work lightning fast.
Negligence on even any one factor’s part will result in your site’s slow speed. In this article, we have researched and tried to collect all aspects according to Google PageSpeed Rules. We’ll discuss the problems, solutions and tips regarding making your website work faster.
You may also like the following;
Let’s have a look at all factors and discuss them in detail:
Get Your CSS Perform Better
CSS is critical when we discuss page speed and ways to improve it. This is how you can make your CSS better:
Eliminate Render Blocking CSS
Render means to display, and “render blocking” means something which delays the page from being displayed. Render blocking CSS is responsible for page delay most of the time.
In fact, every one of your CSS files results in page delay. Also, as your CSS gets more significant or the number of CSS files increases, the longer it takes the page to load. Render blocking CSS results in a slow speed of your website, fewer visitors and less AdSense earning.
- Properly call CSS
- While calling CSS from your files, you should take care of certain things. For example, you should not use @import to call your CSS files. Instead, add your external CSS in the main file, or you may use the <link> tag to call your CSS.
- Use fewer CSS files overall.
- Another way to eliminate render-blocking CSS is to use less overall CSS. There are two ways to deal with this thing. First, you can combine your CSS files to make one big file; second, you can use inline CSS files in HTML. This will reduce the size of your main CSS file as well.
These tips for removing render-blocking CSS are only helpful when you have written your own CSS. If you have purchased a theme or used a template, you should confirm that the theme/template is not using any render-blocking CSS.
Optimise Your CSS
While using CSS, you should make sure that your CSS is optimised. The Optimised CSS of a website should have the following properties:
- The total size of all CSS files should be less than 75KB.
- There should be no @import CSS calls.
- Inline CSS should be used in <style> tags.
- CSS should not be used inside HTML <div> tags.
- All CSS files should be combined to make one big file.
Minify CSS
In addition to following all the above instructions, you should also minify your CSS. Minify CSS means making the file size of CSS smaller so it will load faster. To minimise it, you should write as much CSS code in one line as possible. For example:
Here is an example of non-minified CSS:
body
{
background-color:#d0e4fe;
}
h1
{
colour: orange;
text-align-center;
}
And here are some CCS, minified:
body {background-color:#d0e4fe;} h1{color:orange;text-align-center;}
You can minify your CSS via some automatic tool or manually.
Always Call CSS First
In your HTML page, you should always call CSS before JavaScript, images, or anything else. This will load your pages faster. This happens because browsers always download and parse complete CSS files before loading the view.
If your images or JavaScript files come before, the browser will first download them and then come to your CSS file, which will result in a delay of up to 2 seconds in worst cases.
Here are simple and straightforward rules to remember about delay times in this case:
- CSS will be called in the first place, and then the browser will get it in a maximum of one second.
- If we call CSS in the second place before JavaScript, the page load time will become two seconds because the browser will take one second to retrieve JavaScript and one second to retrieve CSS.
- The browser will get it in three seconds, and in case of heavier and more images, it may take even more time if the CSS file is called after images and JavaScript.
This point is essential to remember as, in worst cases, this delay may go up to seven seconds, decreasing your traffic drastically.
Call CSS From One Domain Only
In the modern world, as browsers and CSS improve, the trend of using online CSS resources is getting handy. Although it is straightforward, it also reduces your page load because when your browser loads the page, it gets CSS from different domains.
This increases response time, and files from different domains and subdomains take time. You should call all CSS files from one domain only. You may download online CSS resources. This will reduce the page load time of your website, and it will open lightning-fast.
By following this straightforward advice regarding CSS, you can increase your page speed even up to 300%. If you are a developer yourself, you can easily follow them.
However, if you are using a theme/template, although you may change most things, you should still speak to the designer to implement these CSS things properly.
Fix Your JavaScript
The JavaScript factor is significant for page speed as JavaScript/JQuery files are usually the largest files on any website. There are many things which can be done on the JavaScript end to make the rendering of your page faster. Let’s have a look at all of them.
Eliminate Render Blocking JavaScript
Render means loading, so if something is render-blocking, it keeps the page from loading as quickly as possible.
Google officials recommend removing JavaScript that interferes with loading the above-the-fold content of your web pages. “Above the fold” means what a user sees initially on the screen before they scroll or go down.
Eliminating render-blocking JavaScript is very important because developers usually use a JavaScript library, JQuery. And JQuery files can be as big as the original HTML file as ten times. That means deciding to load JavaScript at the right time is very important.
Otherwise, your site will get slow and let your users wait. It should be noted that it will also create problems with SEO as Google doesn’t give those links in search results, allowing users to stay longer.
To resolve this, you should always load your JavaScript after the whole page is loaded. So, your JavaScript file links or script should be placed just before the end tag of the body.
It will download and parse after the whole page is loaded, and thus it will result in more speed of your page.
Combine External JavaScript to Make One File
JavaScript is usually written in several external files, which results in page delays because, for calling and reading all files, the browser makes separate requests for each file, resulting in a delay.
The problem can be resolved quickly by combining all JavaScript into one file. This can be done promptly by simply copy-pasting JavaScript from all files into one file and then calling that file. Since JavaScript is written in a specific way, it will still work perfectly fine.
After that, you should check your webpage speed, which will load faster. Combining JavaScript has a very significant impact on page speed, as we have observed in recent tests.
Use Inline JavaScript
When you place your JavaScript inside an HTML file using <script> tags, it is called inline JavaScript. Inline JavaScript should be used when your JavaScript code is small, and you don’t need to place it in a separate JavaScript file.
There are many benefits of using Inline JavaScript. It saves you from the hassle of handling extra files and results in excellent page speed as the browser doesn’t need to make additional calls for fetching JavaScript files in this case.
Defer Loading JavaScript
Following all the above tips can help you load your pages faster, but you can even improve it by following this technique. In this technique, we separate our JavaScript code into two files.
The first file contains the code required to display the page correctly. The second file contains the code required after the page is displayed, for example, code to run on some click on the page etc.
Now we’ll call the first file as usual so the browser will call it while displaying the page. The second file will be called after the page is displayed correctly.
So, the question arises of how to call the second file after the page load. Placing the call at the end of the page is not enough. You should follow the following method to do this properly.
- Copy the below code
<script type=” text/javascript”>
function downloadJSAtOnload() {
var element = document.createElement(“script”);
element.src = “defer.js”;
document. Body.appendChild(element);
}
If (window.addEventListener)
window.addEventListener(“load”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
#2 Paste code in your HTML just before the </body> tag (near the bottom of your HTML file).
#3 Change the “defer.js” to the name of your external JS file.
#4 Ensure the path to your file is correct. For example: if you just put “defer.js”, then the file “defer.js” must be in the same folder as your HTML file.
In this way, you can properly implement this change. Doing this will result in excellent results, and your page speed will increase many times.
As we saw, JavaScript can be a significant factor behind page speed. You should implement everything above and use as little JavaScript as possible.
Long and irrelevant scripts with redundant code lines should be avoided. If your code is small, always use it inline and avoid using external JavaScript files.
Improve Server Response Time
You must make all efforts mentioned above, but there is the only benefit of them if your server response time is good. Server response time is the time it takes for a web server to respond to a request from a browser.
According to Google, the server response time should be less than 200ms.
Server response time depends on several factors website traffic, website resource usage, web hosting and web server software.
All these factors can affect server response time. For example, as traffic on the website increases, the server’s response time may get worse as the server has to load resources for everyone. This problem can be dealt with by following these valuable techniques.
Deal with CSS/JavaScript
You should follow all the above directions to improve your CSS and JavaScript.
Use Fewer Resources Per Page
Try to use fewer CSS, JavaScript and image resources on each page. The lesser, the better. It will help your server serve pages faster and to more people at a time.
Get a Perfect Web Hosting
Get perfect web hosting from a suitable service provider. This thing is most important; if your web hosting needs to improve, you’ll run into trouble. Web hosting choice depends on the type of application you are using. Let’s have a look at recommended options for all kinds of applications.
If you are on WordPress, you should get WordPress-specific hosting to avoid any problems later. Recommended hosts for WordPress are WPEngine and GoDaddy.
If you are going with shared hosting, that can be better and more economical, but you should always get it from a trusted host. BlueHost is recommended for shared hosting.
For VPS Hosting/Dedicated servers, you may go for KnownHost or WiredTree.
Web Server Software and Configuration
Make sure that your webserver software and all configurations are up to date. Always select the right web server software. Here are a few choices:
Apache: Apache is an open-source and free software maintained by Apache Foundation. It is the most used web server with detailed documentation and resources.
Apache has pretty good tutorials available on the internet as well. Although the default install of Apache is not the best performer, it has so many users, modules, and add-ons that it can be made to do just about anything.
Nginx: Nginx is an accessible web server and is best for websites with high traffic. This server performs amazingly, even at its default install. It uses very few resources and handles more traffic than other available web servers.
It has a minimal response time, and PHP runs very fast with Nginx.
Litespeed: This web server is available in free and premium versions. It is faster than Apache, with the added benefit of being completely compatible with Apache.
It uses the same. htaccess File as Apache, so that means moving to LiteSpeed from Apache is very easy and painless. PHP runs six times faster than Litespeed.
All these factors can really create a difference regarding page speed. Also, all server aspects are critical, and you shouldn’t ignore them. If you have money, you should invest it in hosting and servers to get things done faster.
Use G-Zip compressed Server Files.
G-Zip is a file format and a method of compressing files for faster network transfers. After G-Zip compression, your server has to serve smaller files, resulting in better response time.
G-Zip compression can be enabled easily in web server configuration. Different webservers have different instructions, which I will explain below. You can allow G-Zip compression for .htaccess, Apache, NginX, and Litespeed Servers.
G-Zip Compression via .htaccess
For most people, compression can be easily enabled via a .htaccess file. The .htaccess is a file which does many important things for your site.
All you need to do is to add this code to your .htaccess file. After adding code, save the file, restart the server and feel the difference!
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file.(HTML?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
G-Zip Compression for Apache Servers
The above instructions for adding code to the .htaccess file will work properly. If it doesn’t seem to work, you should remove that code and add this one instead:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/HTML
AddOutputFilterByType DEFLATE text/XML
AddOutputFilterByType DEFLATE text/CSS
AddOutputFilterByType DEFLATE application/XML
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
G-Zip Compression on Nginx Servers
To enable G-Zip compression on Nginx servers, add the following code in your config file:
gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/HTML text/CSS application/x-javascript text/XML application/XML application/xml+rss text/javascript;
# Disable for IE < 6 because there are some known problems
gzip_disable “MSIE [1-6].(?!.*SV1)”;
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;
G-Zip compression on LiteSpeed Servers
Enabling G-Zip compression on LiteSpeed is very easy. All you need to do is to go to the configuration under “tuning”. Just go down to “enable compression” and check if it is On. If it is Off, click “edit” and turn it On. That’s it.
After compression, HTML, CSS, and JavaScript files may become fifty to seventy per cent smaller. That means it can result in a significant change in website speed.
All developers and system administrators should definitely implement this in their systems.
Leverage Browser Caching
A browser cache is a space where browsers stores thing temporarily for later use. Leveraging browser caching is a process in which webmasters instruct browsers to cache web pages so that when a user opens a site a second time, the browser will show her webpage from the cache and will not have to go to the server.
This is why the site’s first-time loading takes more time than the latter. Browser caching can result in huge differences.
Now you must be wondering how to leverage browser caching. To do this, you need to change the request headers of your resource files to use caching. Doing this is a straightforward and simple process.
All you need to do is to add some code to a file called .htaccess on your web host/server.
The code below tells browsers what to cache and how long to “remember” it. It should be added to the top of your .htaccess file.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year.”
ExpiresByType image/jpeg “access 1 year.”
ExpiresByType image/gif “access 1 year.”
ExpiresByType image/png “access 1 year.”
ExpiresByType text/CSS “access 1 month.”
ExpiresByType text/HTML “access 1 month.”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month.”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year.”
ExpiresDefault “access 1 month”
</IfModule>
## EXPIRES CACHING ##
After the time specified in the code, the browser will automatically remove these resources from the browser cache. The above values are optimised for most blogs and web pages, but if you want to change them, you can do so. For example, if you’re going to store jpg images for one month only, you should replace “access 1 year” with “access 1 month”.
Another caching method is known as Cache-control, which is more effective and easy for most people than the above method. It also gives you more control over caching. Example use of cache control in .htaccess file may be:
# 1 Month for most static assets
<filesMatch “.(css|jpg|jpeg|png|gif|js|ico)$”>
Header set Cache-Control “max-age=2592000, public.”
</filesMatch>
This code is setting headers for the caching. Let’s understand this code line by line.
The first line is just a comment for our ease and doing nothing.
The second line specifies the types of files for which we will enable caching. You can also add and delete file types in this line. For example, if you want to cache HTML files, just add HTML in the second line.
The third line is doing the main job. It sets headers for cache control and specifies that the caching will be public and its age will be 2592000 seconds.
You can also change this duration. Also, you can write this code twice and set different caching intervals for other types of files. This duration is an optimised one, though.
Although caching has benefits, it has a minor drawbacks as well. And that the user will only be able to view changes in the file later if you change anything. I.e., they’ll keep viewing the same old file for some time.
Enable Keep-Alive
Keep-alive is a method to allow the same TCP connection for HTTP conversation instead of opening a new relationship with each new request.
Simply put, it is a communication system between the web server and the web browser that says, “you can grab more than just one file at a time.” Keeping alive is also known as a persistent connection.
Keep-alive is enabled in HTTP connections by default but shared hostings may turn it off as they have to serve millions of pages from one hosting.
Generally, a keepalive is enabled using the “Connection: Keep-Alive” HTTP header. Keep Alive disabled means your HTTP headers are stating “Connection: close”. You should change that to “connection: keepalive” to enable keep alive for your web page.
In addition, keep alive enabling also depends on the server you are using and what you have access to. Here are the most common methods for enabling keep alive in different servers.
Enabling Keep-Alive via .htaccess file
If you have access to the .htaccess file, you can add the following code to your file, and that’s it. It’ll enable keep it alive for you in most cases.
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Enabling Keep-Alive in Apache
You can turn on keepalive if you can access your Apache config file. The applicable sections are shown below:
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to “Off” to deactivate.
#
KeepAlive On
#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high for maximum performance.
#
MaxKeepAliveRequests 100
#
# KeepAliveTimeout: Number of seconds to wait for the subsequent request from the
# same client on the same connection.
#
KeepAliveTimeout 100
Enabling Keep-Alive in NGINX
Keep alive issues can be tackled using the HttpCoreModule. There is a specific directive you should look out for… “keepalive_disable”. If you see this, make sure you know why it is disabling keepalive before removing it.
Enabling Keep-Alive in LiteSpeed
Keep-alive is usually set on in LiteSpeed servers by default, but your server may use “smart keepalive”. This setting in LiteSpeed servers is used for high-volume websites. Keep this setting on will show page speed tools that keepalive is disabled.
“Smart keepalive” will request the initial file (the HTML file) with a connection close in the HTTP header. It will then request all the other files (CSS, js, images, etc.) with keepalive enabled. This allows more users to connect simultaneously when there are many concurrent requests.
LiteSpeed server users should disable keep smart keep alive. As a result, they will be able to experience their entire keep alive. However, If you are a high-volume website, you should refrain from doing so.
Keep-alive is very useful if your website is resource-intensive, i.e., it uses a lot of CSS, JavaScript and image files. Enabling keepalive will drastically change website speed, and your users can enjoy high-speed web pages.
Minimise Redirects
A redirect is an instruction or method that automatically takes visitors from one location to another location or place. Redirects are not suitable for page speed as they take visitors from one place to another.
Redirectors for people using mobile phones make their experience worse. Therefore, you should take care of all redirects on your site.
There are two types of redirects:
Server Side Redirects
These are fast, cachable redirects. Common server-side redirects are 301 and 302 redirects which use HTTP to inform that a page or resource has moved. 301 redirects are temporary, while 302 are permanent ones.
These are server-side redirects in which the web server uses HTTP to direct the browser to the new location. The web browser can handle these types of redirects much quicker than client-side redirects and can cache the file’s correct location.
Client-Side Redirects
These are slow, not cachable redirects. Redirects that use the http-equiv=” refresh” attribute or javascript can introduce even longer waiting times and performance issues and should not be used if possible.
Here is some advice from Google regarding these redirects:
“Never link to a page that you know has a redirect. This happens when you have manually created a redirect but never changed the text link in your HTML to point to the new resource location.”
“Never require more than one redirect to get to your resources.”
And this is how you remove redirects:
- Find all redirects using some online tool.
- Understand why this redirect is there.
- Check to see how it is affected/or affects other redirects.
- Remove if required/possible.
- Update your system if it affects/is affected by other redirects.
Although redirects are problematic and result in page delays, you should be careful while removing them. If you are confident you’ll remove all redirects without creating broken links, go ahead and do this; otherwise, ask some expert to do this for you.
Optimise Critical Rendering Path
The rendering path is a sequence of events which happen when a page is displayed on a web browser. For example, Get HTML > Get resources > Parse > Display webpage is a rendering path. Optimising this event sequence can result in a significant increase in page speed.
Whenever the browser calls a page to display, it first downloads an HTML file, parses it, understands it and locates other resources like images, CSS and JavaScript. After reading the HTML file, it starts downloading other resources and never shows anything to the user unless it downloads all CSS code. Therefore, it is imperative to call resources in this sequence.
HTML > CSS > JavaScript (for above the fold only, remaining can be called later) > Images > Audio > Video
This is the optimised way to call your resources, and doing so will result in a fast speed of your web pages. Also, you should follow all advice related to the JavaScript and CSS given above.
Conclusion
PageSpeed is very important for ranking yourself high in Google and giving your users an excellent and fast experience. It depends on many factors; even one element can significantly reduce your page speed. Here are the key points which should be considered for enhanced page speed.
- Eliminate render-blocking CSS, minify it and always call CSS first.
- Eliminate render-blocking JavaScript, combine all JavaScript to make one file and try to use inline JavaScript. Remember to call JavaScript in the right place.
- Get a suitable web hosting plan and reduce server response time by considering the above tips.
- Enable G-Zip compression on all your files. This will reduce the size of your resource files and increase speed.
- Enable keepalive. This has a significant impact on page speed.
- Minimise redirects and ask the developer beforehand to keep as fewer redirects as possible.
- Optimise your rendering path so your page will load many times faster.
Following these, all tips will result in many times faster pages, and you’ll be able to get more traffic on your website. Your feedback is always welcome.
Let me know what you think about this guide in the comments section. I’ll be glad to hear from you in this regard.