Simple tips to make your website load faster (not too techy)

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 that affect the speed of a website I have been building.

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:

1. 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.
2. If you are using WordPress the following one is a must-do thing, IMO. This is kind of technical but just copy-paste what I show you here. You need to have access to your files via FTP or some sort of file manager. Then locate the .htacess file and copy-paste the following:

   #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 about FTP or accessing files 🙂

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”:

https://gtmetrix.com/

and

https://tools.pingdom.com/

 

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 😀