How to optimize your website's speed?

Users don't really read websites. They scan through until something catches their eyes. So it is a good reason to ensure that your website loads fast.

Moreover, Google values fast-loading websites and will reward them with a good ranking. Here are some tips on how to improve website speed:

-----

Before starting on the tips, why not we do a speed check on your website. You can go to any of the websites listed below simply by googling them.

1. https://pagespeed.web.dev/
2. https://gtmetrix.com/

Now, you might be surprised on the results. Generally, your mobile loading score might be lower than your desktop score but it is pretty much normal. So, don't be alarmed.

So let's start on how to optimize your website's speed.

Minify your website's CSS and Javascript codes

Most designers forget to do this. I mean hey, when I started out, I know nothing about this at all. So it's a mistake that I grew to learn from.

With Webflow, you can optimize your Javascript which can then improve the performance of your website. What this does is that, this reduces the size of your Javascript files.

Use modern formats for your images

I hope that designers out there are no longer using bitmap as their image type.

Using this modern formats not only improve the performance but also the loading speed of your website. By knowing what type of format you choose for your image has an impact greatly on your website. Here are some of the more common formats that every designer should know.

• JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)
• GIF (Graphics Interchange Format)
• WebP

Did you know that you can compress the images that you have uploaded to Webflow?

Do take note that if your images are a bit too big to be uploaded into Webflow, you can always go to https://tinypng.com/ and reduce the file size first.

Avoid too many javascript animations

We get it. You want to make your website pop.

We all know that animations are attractive and it's actually super easy to implement with Webflow, but they increase the loading time of your website which will result in lower PageSpeed Score. I guess the keyword here is balance.

Finding the right balance between an animated website versus a super static boring website is what you and your designers have to evaluate. Do you want to sacrifice the fast loading for a complex animated website?

In general, if you decide that you need some complex animations to supplement your website, make sure to remove any unnecessary Javascript code and then go back to point number 1 - Minify your JS codes.

Remove any unused CSS styles

How is this even possible? By defining the same style to every particular div, heading, paragraph etc.

The best way to cut this out is to prepare and plan on how to use them.

1. Reuse your styles as much as possible. For example, you can set a global H1 style for all your H1 headings.
2. Design them systematically. You can group the same styles together.

Try to avoid using background videos

But, it's so nice! (yeah, we get that a lot. Like a lot.)

As designers, I do make it a point to establish the pros and cons of putting background videos on websites to my clients. While nowadays with the technology at hand, you can actually produce high quality videos without the super huge file size. Well the point I'm trying to make here is that to use them sparingly.

Conclusion

Having an optimized website for speed is something that as a designer or developer should always look into. It is one of the most important thing that you need to do to allow Google to start ranking your website in your favour.