When this happens with your page, you need to take a closer look at what’s slowing the page down. Here are steps to get you started:
Analyze the site and set realistic goalsBefore you start optimizing it’s best to know where you are today and where you want to go.
Choose 7-10 different pages from your site that will be your test subjects. Try to choose pages that are different from each other (it’s not useful to pick seven different blog posts, because the results will be the same).
If you have a small site with a few pages, it’s best to measure all of them.
We suggest scanning the pages with these free tools and note down the results to a spreadsheet:
- Google PageSpeed Insights – Measure page performance on mobile and desktop devices. From the report, page rank gives you a general idea of how the site is doing, but the more important metrics are “Speed Index (SI)” and “Time to Interactive (TTI)”.
- GTMetrix - Useful for testing page speed over a wide range of devices and networks. When PageSpeed insight gives you a general overview then GTMetrix is useful for testing specific devices with network restrictions (test as you’re in a different country and limited internet speed).
The most useful metric is “Fully loaded time”.
For example, we measured two devices:
- Desktop, Google Chrome with London LTE Networking (mobile network based in London)
- A mobile device, Android from Canada (no network throttling)
- Moz – Use Moz to track keyword ranks. Alternatives like Ahrefs and SEMrush are also very capable. Pick out 7-10 keywords with pages and track their current rank.
It’s difficult to recommend what the goals should be. It’s different for every case, but here are a few tips to get you going:
- Optimizing performance for mobile devices is a lot more complicated than for desktops. Usually, performance scores on mobile are 2-3 times lower.
- Pick a competitor’s site and test out their performance. Use their speed as a comparison to yours. Remember, you don’t always have to be perfect. Often it’s enough to be better than your competitors.
Start by fixing the critical pain pointsThe actual optimization work is usually something your site developers must do. It involves technical improvements that are not always as straightforward.
When you look at the summary of a page speed insights report, it will also show you what could be done better with the page. If you haven’t optimized the site, it’s likely you’re seeing multiple errors and looks like a lot of things are broken.
Unfortunately, the report shows the same weight for every issue. When in fact by fixing some problems you won’t see any improvements in your page score, Time to Interactive (TTI) or Speed Index (SI) at all.
The most impactful issues to fix are:
Minify JS/CSS and reduce image size – Reducing the size of all your assets should significantly improve your mobile site usability. On desktops, it’s not so much of an issue, but on mobile devices, you should see noticeable improvements.
Eliminate render blocking resources – Loading your JS properly and adding above the fold CSS means that site visitors can see the page before all the site assets are downloaded. This, as a result, gives a much better user experience.
Usually, tools like Webpack or gulp take care of most of these problems, but unfortunately, Voog has certain limitations of what tools you can use to create templates. To get around these issues, we built a plugin that connects Voog projects with Webpack. With it, developers can use more automation in their projects and remove a lot of these issues.
Use Webpack with Voog pluginLet’s take a minute and go into more details of how Webpack can help you boost the speed of your site. Webpack is a tool for developers that scans and automatically optimizes the website code for better performance. The optimizations webpack offers usually address the main performance issues that websites have. With the free plugin we created, you can apply these improvements to your Voog sites as well.
Some of the main problems that Webpack helps to fix are the following.
Webpack will minify all site assets, and you can even use it to automatically reduce the resolution and quality of the images, resulting in smaller page size.
With Webpack, you can implement Critical CSS loading. This means that the browser loads only minimal amount of styles during initial page load (for the above the fold content) and the rest of the styles are loaded in the background after the user already sees part of the page.
This becomes a problem when you have a lot of assets. Due to performance browsers only allow ~8 requests at the same time, and if the page is doing 150 requests, the website has to wait a long time before all the content is downloaded.
SummaryWhile you’re optimizing the site keep an eye on the goals you set before. If you reach your objectives and you’re still happy with them, it might be better to move on to optimizing another page or task. There are always things you can do to improve your website speed, so don’t get bogged down by trying to make everything perfect.
Hopefully, this has been helpful to you. Feel free to leave any questions in the comments section below.
Voog comes with a user-friendly SEO tool