Speed matters both for users and SEO: Nobody wants to wait several seconds for a website to load. Users would rather leave your site and go to a competitor than spend time waiting. The quote “time is money,” is as true now as it was when Benjamin Franklin said it centuries ago. Time also matters for Google. Speed is one of Google’s ranking factors. All things being equal, the faster the website, the higher the rank. And there is nobody who will argue that having a speedy website isn’t a necessity nowadays. The question is: how to make your website faster? Our guest author in this Unwrapping the Secrets of SEO is Tomek Rudzki, Head of the Research and Development team at Onely, winner of “Best Small SEO Agency” at the 2018 European Search Awards. Rudzi offers advice on speeding your website and winning.
This comprehensive Guide to Website Speed features three articles. Read the following posts here: The Ultimate Guide to Website Speed – Part 2 and The Ultimate Guide to Website Speed – Part 3.
1. Time is Money
There is plenty of research pointing to the fact that a faster website equals more revenue.
- Pinterest realized that reducing perceived wait times resulted in increasing the number of sign-ups by 15%.
- BBC noticed for every additional second their website loads, 10% of users leave.
- DoubleClick by Google investigated that reducing page load from 19 (extreme!) to 5 seconds resulted in 35% lower bounce rates, and 70% longer sessions.
- Amazon’s study reveals that just one second of website load slowdown can result in 1.6 billion in sales drop each year.
You may say, “ok, but I don’t care about Pinterest, the BBC or Amazon; talk to me about MY business.’” Google created a nice tool that calculates the speed impact on potential revenue. I filled the tool with the example data: Average monthly visitors 1,000,000, 3.26% conversion rate, with average order value $82.
You may ask, “Tomek, why did you pick this data: 3.26 conversion rate, but not 1% or 4%, or even 10%?” Ok, I got the data from Statista. According to their reports, the average value of online shopping orders in the United States in the 4th quarter of 2017 (in U.S. dollars) was 82. What’s more, the average conversion rate was 3.26.
It seems reducing the page load speed from 5s to 2.8s may result in $1.97 million more revenue per year. Sounds good!
Of course, it’s just a calculator. But the calculator is based on real data. I don’t think Google adds a few zeros at the end of the calculated value to make it look serious.
2. Always Think about Mobile Users
According to Statcounter, in February 2018 over 55% of users were connecting to the internet via mobile or tablet – impressive stats!
Nowadays, if you want to satisfy your mobile users, you should:
- make sure your website works fine on mobile (i.e. if it’s responsive)
- make the website really fast.
You must keep in mind that mobile users often have poor connections and use low-end devices, so every kilobyte sent on the “wire” really matters. Your website may work fast on a personal computer, with all the extras , but it may be really slow on mobile devices. And the odds that you are getting the former are no longer in your favor.
3. Use GTMetrix
There is a great tool that tells you what can you improve in order to make your website faster. You can audit any website for free. You don’t have to be a website owner to start an audit (i.e. I audited Giphy.com). The tool combines both data and hints from Google PageSpeed Insights and Yahoo Slow.
It’s worth your time to go to https://gtmetrix.com/ and type the URL of your website.
You can see the list of recommendations on how to improve your website speed by clicking either on the “PageSpeed” or “YSlow” tabs.
For now, a lot of the information on these tabs may not be understandable because it is too technical. That’s fine. Rome was not built in a day. I will do my best to get you started. There is an interesting section called “Waterfall” that shows you exactly when the resources (JS & CSS files, image files) were downloaded and loaded.
I strongly recommend you get a GTMetrix account (it’s free!). Registered users can customize the test and change the browser and server location. What’s more, once you’ve logged in, you can enable the “create video” option. The video option is great. It shows you how long users will have to wait until they can see the visual changes on your website.
But Don’t Go Crazy with GTMetrix
Although GTMetrix is a great tool, sometimes its recommendations can lead you on a wild goose chase. There is nothing wrong with GTMetrix. It’s just that there is no “one-size-fits-all” rule when optimizing speed – something GTMetrix is well-aware of:
For instance, GTMetrix recommends that you set the browser caching for resources stored on the Google Analytics or Facebook server. Truth be told, these resources are out of your control – you can’t do anything. Google and Facebook’s developers decided that, for whatever reason, these resources shouldn’t be cached for a long period of time.
Of course, there are many tools similar to GTMetrix, such as WebPageTest, (which is much more powerful than GTMetrix). However, I decided to introduce you to GTMetrix for two reasons:
- GTMetrix is more user-friendly
- WebPageTest doesn’t give you clear recommendations on what to do.
I would like to mention another interesting tool – Google Lighthouse (If you use Chrome, you already have it installed). Kamila Spodymek from Onely wrote a great article on How SEOs can benefit from Google Lighthouse’s performance metrics. Definitely a good read!
4. Use GZIP Compression
There is one rule you should know: if a resource weighs less, the browser can download it much faster, which will cause faster page loading. Your mobile users will really benefit from it.
You can decrease the size of your text files (like HTML, SVG, CSS, and JS) by implementing the GZIP compression. It’s pretty common that GZIP compression saves 70-80% of a resource size, without losing any information. It’s really a big deal!
Visit https://checkgzipcompression.com/ to check how many kilobytes you can save (or already saved!) by implementing GZIP. In the case of Searchmetrics.com, GZIP is enabled (it allowed to save 83% of the page size). Sounds good!
Be careful, though! Sometimes, webmasters will make a mistake and compress all the static files, including JPEG, PNG images, and PDFs. Let me quote the Yahoo Developer Network Documentation: “Image and PDF files should not be gzipped because they are already compressed. Trying to gzip them not only wastes CPU but can potentially increase file sizes”.
If you want to save additional kilobytes, it’s also a good idea to minify your HTML, JS, and CSS files.
5. Serve Scaled Images
It’s a fact that a website will load really slowly (especially on mobile phones!) because of a large number of images.
Therefore, sometimes it might be a good idea to reduce the number of images. But rather than limiting them, I would recommend optimizing the existing ones. Saying that, images served to your users should be scaled and compressed (either lossless or lossy).
First, let’s talk about scaling the images. Let’s say there are ten 220×220 thumbnails per page, but you uploaded 800×800 images to the server. Should you serve the already scaled images to the users, or force the browser to scale it “on the fly”?
The answer is easy. If you don’t scale the images on the server side, then the browser has to download a lot more kilobytes than needed. For nothing, because images are going to be scaled anyways. Also, it’s an additional job for the GPU on the client side. Not to mention the page loading speed will suffer.
6. Compress your images
Now, let’s talk about compressing images. This is another technique that is a must-have for the modern web.
Generally, there are two types of image compression:
- Lossless (does a really good job, you can be sure the quality will not suffer).
- Lossy (usually makes an image more lightweight, but, as the name says: you lose some of the quality).
The question arises: what type of compression is better: lossless or lossy?
- It really depends on the situation. If your website provides images of outer space, every detail matters. But if you do a personal blog, you would probably be fine with lossy compression, even with a high compression rate. I recommend that you experiment in order to see which settings fits your website best.
7. Don’t Force your Mobile Visitors to Download Full HD Photos!
Mobile users have much smaller screens and they will simply not benefit from your HD photos. Instead, they will get angry if you force them to download large images.
Let’s examine the example of Elephate.com. We have a pretty large photo (2600×1463 pixels) of our company members at the top of our homepage (522kb)
It’s totally fine for desktops – they can download it really fast. But, for mobile users, we use the “srcset” parameters of HTML. Thanks to implementing this, mobile users will simply download a much smaller picture (they don’t need a bigger one) which has a positive impact on page loading time.
Desktop users will not suffer because they will see the full HD photo. But mobile users will really benefit from it.