Site Speed Basics: Client-Side | Lesson 27/34 | SEMrush Academy

You will get advice on how to optimize your website performance and implement HTTPS and HTTP/2.
Watch the full course for free: https://bit.ly/3gNNZdu

0:12 Common issues
1:21 Unification of files
1:44 script async src=”…”
2:31 Images
3:40 Cloudinary

✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹
You might find it useful:
Tune up your website’s internal linking with the Site Audit tool:
https://bit.ly/2XVxCmL

Learn how to use SEMrush Site Audit in our free course:
https://bit.ly/2Xsb3XT
✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹ ✹

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, CSS 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 CSS 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 CSS 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 CSS 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.

#TechnicalSEO #TechnicalSEOcourse #SiteSpeed #SEMrushAcademy

You May Also Like