We’re creating more and more demanding websites, with more and more assets.
Now more than ever we need to make our sites blazing fast on desktop and on mobile.
Fortunately there are some simple steps that we can take to achieve this…
1) Optimize images
This may seem obvious, but it’s surprising how many people fail to optimize their images.
What’s more, there’s a huge difference between using a medium sized image, and a fully optimized image.
Image optimization doesn’t just reduce the image size, it remove certain extraneous meta-data, such as when the image was created, what camera took it, and so on.
2) Activate Gzip compression
Just activating Gzip compression can save up to 50% on load time. We all know that when we compress files on our local machine these become smaller and that is exactly what Gzip does it compresses your files before sending them to the browser this means the browser has less to load and will render the webpage much faster than when you are not using Gzip compression.
Most websites nowadays have this activated because of their large files and activating it is not really that hard.
First you need to find your website’s .htaccess and assuming your server is running on Apache just paste this on the file:
This small amount of code will greatly improve the performance of your site.
3) Minify your files
5) Use sprites
One thing that uses a huge number of wasteful HTTP requests is images, you have sometimes dozens of images for one page which results in dozens of HTTP requests. You could simply turn them into a simple sprite sheet and only load that once, then just change the CSS background position on every element to show the correct image.
6) Use a Content Delivery Network (CDN)
Major websites always have their static files, like images or text, on CDNs because it makes their websites load files faster.
7) Use caching
If a file has been downloaded, why download it again?
Setting up caching is somewhat similar to setting up Gzip compression, it all happens in the .htaccess file and all you need is:
<ifModule mod_headers.c> ExpiresActive On # Expires after 2 Weeks <filesMatch ".(gif|png|jpg|jpeg|txt)$"> Header set Cache-Control "max-age=1209600" </filesMatch> # Expires after 1 day <filesMatch ".(css|js)$"> Header set Cache-Control "max-age=86400" </filesMatch> </ifModule>
Using mod_headers you can set the type of files and how long you want them to be usable for in seconds.
Website optimization is very important and following these steps will ensure that your website is delivered as fast as possible, whether over wifi or 3G.