In today’s fast growing world of business, it is mandatory to have a fast accessible, attractive and user friendly website. Having a fast and smart website is a good sign for business leaders to boost their business. To improve your website speed you first need to ascertain the problems and its consequences. This can be done by using GTMetrix.
This post provides all the essential information one needs to measure, identify major issues slowing down the site and eventually improve website speed by eliminating those issues and using other improvement techniques.
GTMetrix:
There are various companies who developed (and many are still developing) a fast and secure speed test tool with all the user friendly functionalities which could provide in-depth understanding and the reasons for slow loading websites each with different capabilities and costing.
GTMetrix is one of the website performance analysis tool created by GT.net, a company based out of Canada. Besides Pingdom, it is one of the most well-known and used web speed testing tools on the internet today! GTMetrix will not only analyse the performance of your website, but will provide you with the list of actionable recommendations in order to improve it.
Site Speed Test using GTMetrix:
With its ability of quickly and easily accessing the key performance indicators, GTMetrix became the most attractive tool for users. Let us see how by looking at an example.
Following is the result captured while checking the performance of the WGC website on GTMetrix.
For a quick glance, the tool ends up by providing us the focused keywords for GTmetrix Grade like Performance score, Structure score and Web Vitals keywords like LCP, TBT, CLS.
The performance score tells you how well your page performs from a user perspective. The performance score is based on 3 main inputs – Loading performance, Interactivity and Visual stability. All these inputs/metrics are taken in part of the final performance score prediction by gtmetrix.
The structure score tells you how well your page is built from optimal performance. This is all about GTmetrix Grade. Google has introduced Web Vitals as core metrics that you should focus on to improve your website speed.
Metrics used is Web Vitals are following:
- LCP – Largest Contentful Paint – How long it took for your largest content element to display
- TBT – Total Blocking Time – How much time was blocked by scripts while loading the page
- CLS – Cumulative Layout Shift – How much layout shift user experienced during the page load
Leveraging GTMetrix Report:
When the performance report ran on our site for the first time, it showed different metrics to be treated. Some of them may become a little hard to understand for the non-technical person.
The summary tab
Following image gives the idea about the summary of the web page.
Causes and solutions to improve your website speed and performance
GTMetrix will show the top issues which the site admin needs to resolve in order to improve the web page speed. In this case, following are the issues which need to be resolved to improve the site performance.
Reduce Server Response Time
Time to First Byte (TTFB), also known as server response time, is the time it takes for the browser to receive the first byte in response to the browser request. A slow response time may negatively affect the number of users on the website.
According to GTMetrix document on this, this audit may handled by,
- Optimizing your application code including database queries
- Implementing server side caching
- Upgrading server hardware
This audit is recommended to handle only by an experienced developer.
Enable Keep-Alive
Enabling keep alive will help to improve your website speed and performance. Usage of multiple TCP connections from the browser will indirectly impact on loading of your web page.
GTmetrix evaluates the response headers of your page resources and flags the requests that don’t have Connection: Keep-Alive enabled.
This audit triggers if there is at least one such resource. The way to handle this audit is to add a snippet of code suggested below to your .htaccess file
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
This method should work on most Linux shared hosting providers.
Avoid Large Layout Shift
Large layout shifts can be frustrating for your users. This means if the users will be quickly looking to interact with buttons, contact forms, images, videos etc. Sometimes, just as they are about to click on something, the screen has shifted down and users will end up clicking on something else entirely.
This can be decided on CLS score. In this case, the CLS score is 0.73 which is at the higher end. For good experience, this score should be 0.1 or less.
Eliminate Render Blocking Elements
Render-blocking resources are scripts, stylesheets, and HTML imports that block or delay the browser from rendering page content to the screen. Eliminating render-blocking resources can help your page load significantly faster and improve the website experience for your visitors.
This article will tell you all the different ways to handle this problem.
Use a Content Delivery Network (CDN)
There are many posts which speak about the Content Delivery Network and how it is useful in website speed improvement. According to GTMetrix, When a user visits your page, the resources are served from the cache of the closest CDN node, instead of your origin server, reducing latency and providing a fast page experience to your visitors wherever they are located. In this post, GTMetrix tells how CDNs impact your page performance.
Plugins can be used for WordPress websites:
Based on the gtmetrix recommendations, a technical guy can attack on backend code to resolve the issues. On the other end, if the website is created on wordpress, one can use “plugins” to address the issues.
In our case, we used the following plugins to conquer the issues.
Key steps towards improvements:
- Using the proper resolutions of the images will save a lot of space on the webpage. The recommended resolution for all the required images will be given by GTMetrix, and the admin can scale the images accordingly
- To handle the issue of image optimization, one can use the “Smush” plugin. Smush is the plugin which optimizes the size of the image while uploading to the website, or will smush the images already present on the website. If someone already has the images on their website homepage, just look at which images need smushing recommended by GTMetrix. Then go to the admin dashboard and smush the recommended images one by one.
- In order to defer parsing the java scripts which are unused while leading the homepage, clear the server cache, minify js and css files and more, we used “Swift Performance” plugin. Admin needs to install this plugin via the “Add New” section of the wordpress dashboard and do some settings as mentioned below. After installing the plugin, the following window will appear, simply click on Autoconfig. Once Autoconfig is done, the admin can proceed to the settings where he needs to choose the Advanced Setting option.
- WP Optimize is the great plugin which is used to handle many audits which gtmetrix advises to look into. This is the free and simple to use plugin which can be used for image compression, minifying CSS and JavaScript files, clearing the cache etc.
Summary of Improvements:
We have accomplished the following improvement –
- It was a great improvement in order to the scores. There will be now more than 40% reduction in the bounce-rate.
- Reduction of the load time for home-page also observed.
- Multiple CSS and Javascript files combined and reduced the page size to help the site to load faster.
- Faster site experience for the new as well as returning users.
More on website speed improvement..
- If the developer wants page size to be reduced even more, one can use the a3 Lazy Load plugin which helps in lazy loading of the images on the website. This means, if a user opens the website, the images on the webpage loads only when the user comes in contact with them or scrolls down to the images. This preserves pre loading of all the images on the website and reduces the page size to load faster.
- If still some java scripts need to defer the parsing or some unwanted plugins needs to be deferred while loading the page, one can use the plugin Asset CleanUp Page Speed Booster. With this plugin, one can defer parsing of the unwanted plugins for homepage (example cart plugin or contact form plugin) since those are not required while homepage loads. This is another very effective plugin for boosting the speed of page loading.
