HUB Elementor - Performance Testing Using GTMetrix
We all want our websites to load quickly, and there are a number of services out there to help us test, evaluate, and fix various issues affecting the loading speed of our pages. In this series of docs, we will be looking at the major players in this area, Google PageSpeed Insights, GTMetrix, Pingdom and WebPageTest, and how they can help you improve the loading speed of your Hub website. Read on!
GTmetrix
GTMetrix is a popular online tool to analyse the load speed and performance of a web page. You can use the service without being logged in, but to take advantage of the full range of free features, you need to sign up for a free account. There is also a PRO plan, but the free plan is more than enough for the majority of users.
When you visit the site, you are immediately welcomed and invited to get straight to work, with an address bar to input the URL to test. As their website notes "GTmetrix gives you insight on how well your site loads and provides actionable recommendations on how to optimize it."
Overview
Analysis Options
If you choose to sign up for a free account and log in, you have many more options to customise your tests, including the browser used, the type of connection, and the location of the tests, which can be very useful if you have a local customer base.
Directly under the URL field, you will find a number of clickable options for that particular test. You can click directly on them to make fast changes to your analysis options.
If you click the Analyse Options on the far right, this will expand to the full options set, where you can choose the following options.
- Location: By default, the Test Server Region is set to Vancouver in Canada. When you are logged in however, you can choose from Dallas, Hong Kong, London, Mumbai, Sydney or São Paulo.
- Browser: By default, GTmetrix uses the Chrome browser on Desktop. If you wish, you can change this to Chrome (Android, Galaxy Nexus) or Firefox (Desktop).
- Connection Speed: By default, GTmetrix use an unthrottled connection, but you can choose from a range of options here, including Broadband Fast, Broadband, Broadband Slow, LTE Mobile, 3G Mobile, 2G Mobile, and 56K Dial-up...
- Create Video: You can turn this feature on for any test, to help debug page load issues by seeing exactly how the page loads. View the page up to 4x slower to help pinpoint rendering or other page load problems.
- Adblock Plus: By turning this on, you can prevent ads from loading using the Adblock Plus plugin. This can help you assess how ads affect the loading of your site.
- Stop Test onload: This final option, if turned on, ends the test when all resources have been loaded. GTmetrix now use as the default, Fully Loaded Time, which is the point after the Onload event fires and there has been no network activity for 2 seconds. To read more about this option, view the GTmetrix FAQ.
- Advanced Options: There are also some advanced options a bit further down, around HTTP authentication, cookies, and whitelisting and blacklisting urls.
It must be noted that these home page options are for individual tests. If you'd like to set your default options for page analysis, head to the User Settings area, linked at the top right of the site, and make your choices in the following dialog.
Performance Report
Once you have set your options and entered a URL, you click the Analyse button, and GTmetrix goes to work. When the job is completed, you are presented with a Performance Report. This summarizes your page performance, based on key indicators of page load speed.
- PageSpeed Score: GTmetrix analyzes your page with both Google PageSpeed and Yahoo! YSlow rule sets, and in the Performance Scores section, it starts with the PageSpeed Score. Note: the average scores are highlighted when you hover over the arrow to the right of the score.
- YSlow Score: The next Score listed is the YSlow score, an initiative of Yahoo. This is a set of 23 measurable rules that affect web page performance. PageSpeed and YSlow scores relate to the front end of the website but measure slightly different things in different ways, hence the possibility of different scores. To read more about these two rule sets, read this FAQ post or this GTmetrix blog post.
- Fully Loaded Time: The Fully Loaded Time is the point after the onload event fires (when the processing of the page is complete and all the resources on the page have finished downloading) and there has been no network activity for 2 seconds. As mentioned previously, there is an option to change this result to reflect the Onload time. See this FAQ item for more details.
- Total Page Size: This is simply your total page size in Megabytes, which includes all of the files that are used to create the page: the HTML document, and included images, style sheets, scripts, and other media. This is often an indicator of unoptimized content.
- Requests: On the most basic level, an HTTP/S request happens whenever a browser asks for something from your server. That can be a file like a style sheet, an image, embedded video or a script. Basically, everything your site is made up of. Each of these is a separate request. This measures the total number of requests for the page.
- Average Scores: The averages for all five scores are highlighted by hovering over the arrows next to the scores, and your page's performance, relative to the average of all sites analyzed on GTmetrix, is noted by the arrow pointing up and being green, or pointing down and being red. See the GTmetrix FAQ for more details.
Result Tabs
PageSpeed
The individual tabs under the Performance summary area, are where you can see what specific areas your website is performing well, or poorly, in. The PageSpeed Tab provides results and recommendations on 27 PageSpeed tests. They are ranked with a grade, using a lettering system, where A is the best and F is poor. Under the Type columns, it shows what sort of content or area the recommendations refer to, and in the last column, Priority, it gives an indication of the individual issue's importance in the overall result.
Using the small arrow on the left-hand side of each recommendation, you can expand the section. If you have scored under 100 on any test, there will be more specific detail on the files or areas that may need improvement, as well as links to further information.
YSlow
The YSlow tab works in the same way as the PageSpeed tab does, showing the 18 YSlow tests that GTmetrix perform, and the Grade achieved, Type and Priority of each one.
Again, each recommendation can be expanded where specific files and further information will be provided.
Waterfall
The Waterfall tab shows a visualization of content loading behaviour. It displays the request-by-request loading behaviour of your website. Every script, media file, and/or third-party resource your page requests are displayed here.
If you don't have experience with these charts, they can be overwhelming. Start by reading this How to Read a Waterfall Chart for Beginners document from GTmetrix.
Timings
The Timings tab provides a unique visualization of your page load events. These events include:
- Redirect duration
- Connect duration
- Backend duration
- Time to First Byte (TTFB)
- First paint time
- DOM interactive time
- DOM content loaded time (and JavaScript event duration)
- Onload time (and JavaScript event duration)
- RUM Speed Index
These timings are connected to the waterfall chart, by way of a colour-coded system to interpret what is happening when in the waterfall chart. Mouse over each of the Events loaded along the top to get a description and corresponding colour and marker to show where this event is taking place on the waterfall chart.
These timings are for technical users – they’re meant for providing even more insight on your page load activity. Much like the Resource Usage Graphs, they are not scores to chase unless you have a strong development background. For more information on the Timings Tab, visit the GTmetrix Blog.
Video
It's also possible in GTmetrix to record and playback a video of the page load, showing yet another visualization of the page load. You can change the speed down to a 1/4 speed to get a good idea of what's loading when.
History
Finally, the history tab, shows you your history of tests with that specific url. Depending on how long you have been using it, there will be more or less data in here for you to analyze.
Issue Type
In GTmetrix, the recommendations are all listed, broken down by type. These range across Images, Server, Content, CSS, JS, Cookies, and Content. See the following for a brief breakdown of the types of these content types.
- Images - Images will be a typical issue for many sites. If you scan the Type column and look for Images, you will be able to see 5 tests across both PageSpeed and YSlow that will identify if your images need optimization. These issues must be addressed independently, but to get started on understanding the issues.
- Server Response Time - There are 10 tests, across both PageSpeed and YSlow, related to server response times. This can be a very technical area, but the GTmetrix Blog has a lot of great articles and How To guides to help you understand how your server response affects your load times.
CSS / JS - There are 15 tests, across both PageSpeed and YSlow, that deal with either CSS and JS, and these are common areas that don't achieve perfect scores. It is impossible to give specific advice, as each site will be different, but Ave does provide options in the Theme Options to assist with this. Navigate to Theme Options > Dynamic CSS to access a number of options that can help in this area.
Caching plugins as well, are also recommended to help with some of these issues. We have a range of documents that cover CSS, JS, caching, plugins and other performance-based topics. Please see the links section below.
- Cookies - There are 2 tests on YSlow that deal with cookies, to do with cookie size and the use of cookie free domains.
- Content - Finally, the remaining 13 tests, across both PageSpeed and YSlow, deal with content issues. This is a broad category that deals with minification, query strings, bad requests, redirects, and a few other areas. Again, caching plugins are also recommended to help with some of these issues.
Conclusion
GTmetrix is easy to use, and a very valuable tool to help detect and remedy issues that may be affecting your website's load time. Much of it is very technical, however, and it does, however, require time, patience and expertise to learn.
Remember, due to hosting and content variables, website optimization is a very complex, technical area, and falls well outside of the support we can provide for Ave.
Useful Links & Resources