Here I am, I who I consider myself tech-savvy and I know how to make nice websites etc etc… being sloppy and making rookie mistakes, even to one of the websites I’m currently building.
Let’s get right to it.
If you have a slideshow or use many images on your website (first page or more pages) it’s is imperative to optimize these images for the web. Even if you make a mock-up, make sure that the images are well optimized.
A general rule is to not have images more than 500kb in size, but I believe if you range between 600-800kb, then you are fine.
So here are a couple of things you need to do:
- If you download stock images, make sure you reduce their dimensions (pixels) to fit your website properly.
- for a full-width image it’s good to go to 2560px width.
- for smaller images on your page, use the dimensions of the actual window. I read here that a good practice is to use double the amount of pixels so that it looks good in retina screens as well.
- In case you edit your pictures in Photoshop, the absolutely best would be to save them in webp format. That means, no .jpg or .png but instead webp. It’s an image format that is developed by Google and it helps a lot in reducing its file size. Alternatively, you can you use this free plugin LiteSpeed Cache that can convert your images to this format. Yay!
- If you are using WordPress the following one is a must-do thing, IMO. This is a bit techy, I know, but if you follow these steps, you can’t go wrong. Make sure you have FPT access or just access to some sort of File manager. Then go to your root folder, the one that is called Public_html if you go via FPT, and inside there you will find it. Download it (download a backup copy as well, just in case) and just copy-paste what I show you here.
#Customize expires cache start - adjust the period according to your needs <IfModule mod_expires.c> FileETag MTime Size AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript ExpiresActive On ExpiresByType text/html "access 600 seconds" ExpiresByType application/xhtml+xml "access 600 seconds" ExpiresByType text/css "access 1 month" ExpiresByType text/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresDefault "access 1 month" </IfModule> #Expires cache end
What it does is that it sets some expiration dates for the resources of your website. You can read more here and this article also explains how to do the above by using a plugin, so you won’t have to worry if you have no FTP or File manager access.
- I mentioned above a Lightspeed Cache plugin that helps you convert your images to Webp. Well, this plugin does much more than that. It’s completely free and I do recommend it as it will speed up your website. What it does is it shows a cached version of it, meaning, it stores a lot of the information on the server and present them to the visitors, without reloading everything every time. (Pro tip: if you do design edits, deactivate the plugin to be able to see the changes instantly)
- Alternatively, if you have the budget, I definitely suggest you go for WP Rocket, which is a premium plugin and it does wonders. You don’t have to be too techy, you can just check it out and browse its settings. Or do nothing. This plugin will take care of things for you.
There are way more things that you can do that can help your website to load faster, but the above steps are a good start.
I also use the following “website speed check services”:
and
which are great free tools that can help you check if your site is fast enough or help you identify any problematic areas.
I hope my mini-guide will help you and if you have any questions, please let me know in the comments.
If I know I’ll be happy to help 😀
