_huge.jpg)
This started to become a serious issue. So, we recently took on a project to increase the speed of our site, and as a result, the average page speed increased two times, and keyword rankings in Google increased 300-400%.
We have increased our organic traffic by about 50% and are continuing to see the positive effects of the optimization.
Generally, sites in Voog are relatively fast, and you don’t have to worry about it that much. The problem starts to show itself when you start using custom templates with JavaScript widgets and animations that aren’t developed by Voog’s team.
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 goals
Before 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:
1. Desktop, Google Chrome with London LTE Networking (mobile network based in London)
2. 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.
After you’ve picked your test subjects and have the baseline measurements, it’s best to set goals of what would you'd like to achieve for every page and measurement.
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 points
The 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:
- Reduce JavaScript execution time and minimize main thread work — the number one reason why pages are slow is inefficient JavaScript scripts. Animations, sliders, fancy forms and effects are all slowing your site down. The first step when optimizing is improving your scripts.
- 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 plugin
Let’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.
Website total page size is too large and takes a lot of time to load (total page size metric in GTMetrix). This is often caused by unoptimized images, javascript and style files.
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.
Try to get your page size under 1.50 MB
Page CSS is blocking the rendering. When the page is loading, the browser first downloads the HTML that describes what kind of CSS (styles) files it needs. After that, it starts downloading the files and only then it can start showing the page to the user. The problem is that doing this in synchronous order is slow. Moreover, CSS files contain code that you don’t need for every page. So, the user is waiting while the browser is downloading things it doesn’t need.
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.
Site is doing too many requests to the backend. This partially overlaps with the previous problem. Websites usually load a lot of assets: images, fonts, styles, javascript files. To get every asset browser makes a new request to the server.
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.
A lot of requests block browser rendering. It’s best to not have more than 100 requests during page load.
Webpack helps optimize this as well by merging assets into unified files (resulting in larger file size, but fewer requests).
Summary
While 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.
