Website Performance Optimization

Ultimate Guide To Website Performance Optimization

     -     Oct 28th, 2018   -     SEO, Technical SEO   -     0 Comments

5 (100%) 1 vote

Ultimate Guide To Website Performance Optimization

Introduction to Page Speed – Website Performance Optimization

Google has been pushing for fast loading sites for a while now. From my perspective though, website performance optimization is mostly a user experience topic, if anything. Granted, it helps with SEO, delivering better and faster crawling, indexation and efficiency. But you should build a fast loading site because you care about your users first and foremost and you don’t want them to wait.

According to a Nielsen report, 47% of people expect a website to load within two seconds, and 40% will leave a website if it does not load fully within three seconds.

There is not much room for errors, really. 100ms can make a great difference. Amazon managed to increase performance, e.g. for every 100ms they grew +1% in revenue. These are really impressive numbers.

There are some numbers available in GSC, specifically time spent downloading which measures the time to complete an HTTP request. It‘s an average on files such as CSS, JS, and others – thus, the number is deeply flawed. It can only really be used to understand trends.

Let’s look at some of the must-have tools you should be familiar with when we talk about page speed. In the last few years, Google has been heavily promoting their Pagespeed Insights Tool. You can plug-in a given URL, and it gives you a very rough overview of where you stand. The tool returns a score from 0 to 100 and makes some recommendations that you might or might not follow – depending on what they find on your site. These recommendations are only partially actionable. Plus, it’s often unclear what the ROI of an improvement from say 87 to 88 would actually be. So yes, it’s a starting point – but that’s about it.

Another solution is Webpagetest.org – and it actually has everything that you need to start performance optimization work. It gives you lots of different metrics, information about compression, caching and special recommendations on how to optimize your images. They also have a super detailed waterfall diagram where you can see how the page is loading and what the dependencies towards each other are. It also visualizes details such as DNS lookups, blocking periods and much, much more. They even have a filmstrip view – a video where you can see how your site is building up and spot issues in rendering straight away. And it’s actually free.

The new kid in town is called Lighthouse. It is a Google tool and has been implemented in the Google Chrome browser. It has a specific focus on auditing for mobile performance. It makes sense as Pagespeed even nowadays is a ranking factor. However, Google just recently announced that by mid-2018 they would be using your mobile site as the one that is basically responsible for website performance optimization measurement and scoring. So, in the past your score was based on or against your desktop site, this will change now. They will look at your mobile performance now and score and rank you accordingly.

Pagespeed is a ranking factor, so keep in mind that it is mostly about how fast everyone is. Am I slower than the rest? If so, there is a problem.

Also, please keep in mind that website performance optimization and measurement it is not a one-off project; you must do it over time. Ideally, you want to compare it against your competitors to understand what’s going on in the industry and to see how you perform against them. On an enterprise level, there are tools like Speedcurve, which can help significantly with that.

If you want to get started with a free tool, there is also the Performance Dashboard from sitespeed.io, which can essentially do the same thing. It is really powerful to just see trendlines over a week or a month and to see how your competitors are doing at the same time.

Website Performance Optimization Basics

So for a start, let me walk you through some of the most common issues that you‘ll encounter when optimizing performance for a given website. It obviously depends on the type of site, on its setup, on all the dependencies, on the system used, on the backend, etc. – but you’ll find lots of commonalities if you do a couple of performance audits.

Let’s start with an HTTP request. What happens when you access the website in your browser? Lots of different components will be downloaded in the background – images, ССS files, JS and others. The sheer amount of them has significantly increased over the years as websites have got more complex. On average we have 300kb of JS code that is used on every single page and up to 6 different ССS files per URL. Which is really a lot. The easiest way to fix it is to think about how to reduce the sheer number of these things by merging, deleting, etc.

You would not need 6 different CCS files; you would surely rather have 1 or maybe 2.

One of the common concepts which should be applied here is minification of files, which means shrinking down CCS files and JS, for example. It shortens variables and removes unnecessary line breaks.

You have to decide, do you really need to request the files when accessing the page or can you do it in the background? Think about asynchronous requests and whether you could use them to benefit your performance. When you request a JS file, for example, it will block the render from happening and the browser from painting something on your screen. You could tell the browser to process JS in the background (what we call asynchronous), but not wait for it to come back. That is a concept used by Google for their Analytics. The idea is to fire the JS but not necessarily wait for them to come back.

Remember:

  • Firstly to reduce the number of requests, try to make the remaining ones as small as possible.
  • Then think about which ones you can do asynchronously to prevent blocking of the render.

Images are roughly 60% of all web traffic. The problem is that often images are not optimized. If you ever have taken an image out of Photoshop and just put it on the web, you know what I am talking about. These pictures have metadata that are usually not properly compressed and sometimes are even the wrong file type. The general rule for images is to put them on a proper diet. There are good tools like tinyPNG & tinyJPG, where you can optimize your images for free and shave off all that unnecessary file size.

However, jpg, gif, png are not the most modern formats. Years ago Google started webP. The idea was to build one format that does everything at once. It is very efficient, smaller than the others while keeping all the features of the previously mentioned formats. It generally works well but is still not supported widely and at the moment only Chrome can output webPs. The workaround would be to use something like an image CDN e.g. cloudinary. With cloudinary, they create modern file types like webP and jpg-xr for you, in the background. They put them on the server, and when someone is accessing your site, they try to understand if the device (in this case Chrome) would support webP and then dynamically serve the new format/file. If it Microsoft’s Edge browser they‘d be serving jpeg-xr instead.

Image optimization and, in particular, the modern formats are great and really helpful if you have an image heavy website, like photo galleries or product listing pages with lots of images. Image optimization can make a massive difference and savings up to 80% become easily achievable.

But make absolutely sure to get the basics right. Investigate what type of images you are using, if they are compressed properly, but also have a look at the new and modern formats.


Your Comment

Your email address will not be published.




Digitalgeetam