Doing a performance audit with PageSpeed and using Chrome’s performance tool are two ways to find out why your website is so slow. The Chrome App doesn’t offer suitable tools on mobile, so the speed audit method is your only option on a mobile device. Here are the details on these approaches.
Chrome Performance Tool
With this tool, you’ll get a visual representation of how images and files load on your site. It’s the more technical method of the two suggested here. The speed audit method is for the less tech-savvy.
Open the site you would like to audit in Google Chrome. You need to check each page separately, or at least the most important ones. You can’t check the whole website all at once.
Page Inspector
First, open the Inspector by pressing F12. When it opens, make it bigger by resizing as the default option has little space for reading data.
Click on Network in Page Inspector. To start recording, press the record button. You can now watch how your files are loading. The button will appear red during the recording.
Now, refresh the page and wait for it to load fully. At one point, the loading icon by the tab title will disappear. That means loading is finished. To stop recording, click the red button again.
To see the loading duration, size, and order of each file on your site, expand the Waterfall tab. You will see which files are slowing down your site.
Critical Elements
Waterfall, Type, and Name are the critical elements to look at. Of these, Waterfall is perhaps the most important. It is a timeline showing how long the file took to load and when it loaded. A wide block means long loading time, respectively low loading speed.
Name and type are just the name of the file and the type of the file; .jpg or .js. Typically, files load consecutively, but in exceptional cases, you might have asynchronous loading. This means a file loads in parallel to the regular loading of other components. A problematic file will keep other components from loading. If you don’t see this happening, that specific file isn’t a problem unless it appears really wide.
In every event, a slow website isn’t something one can tolerate. It could be that you need new hosting for your website.
Speed Performance Audit
This is another way to check why a site is slow. You can perform a speed audit or test using GT Metrix or Google’s PageSpeed Insights. The latter is slightly user-friendlier.
Go to the speed tester of your choice and enter your site’s URL, then click on Analyze and wait for the results. They will differ depending on the site, but you’ll always see the areas that need improving.
Common Problems
The most common issues discovered after an audit include server response time, render-blocking resources, issues with offscreen images, unused CSS or JavaScript, etc. A poor hosting provider comes with excessive initial server response time.
If you have a lot of render-blocking resources, that means important files are loading too slowly because there’s too much going on. You might have a lot of plugins, files, or libraries loading in every page load. In this case, deactivate unnecessary libraries and plugins.
It can be challenging to figure out what file should load in what order. Plugins Load Order can help you manage this task.
Image Loading Speed
Ideally, the images at the bottom of the page should load last. Those that are immediately visible should load first. If your site is on WordPress, there are plugins that can help with this. Type “lazy load” in the plugin store. Keep in mind lazy loading can make some sites act weird. Try another plugin if it happens to yours.
Images in .webp format load the fastest of all images. If you have a lot of files ending in .jpg or .png, this could be slowing your website down. You can convert them to .webp manually or use a plugin to do it automatically. WordPress has such tools.
Unused CSS or JavaScript
This can be hard to fix if your website is on WordPress. You have to go to Themes and remove any JavaScript or CSS that isn’t being used. You’d need to go through an excessive amount of code.
Sites that use multipurpose themes tend to have this issue because there is a lot of code that covers a wide variety of components, some of which you might not be using.
Don’t throw yourself into resolving these issues all at once because it’ll be overwhelming. Deal with them one by one, and your speed will improve. Start by checking if the issue isn’t with your hosting provider and get a new one if so.
100% isn’t realistic; aim for more than 50% on mobile and above 70% on desktop.
