Improve Conversion by 7% with these Optimizations
Step by step guide to enhance your website load speed
In my last article on website performance, I talked about importance of reducing your website load time by using Gzip Compression and Minifying your style sheets and javascript while reducing the number of HTTP requests. In this article I will explain the importance of image compression, css sprite and browser caching.
3 — Image Compression
If there’s one way to slow down your site, it’s by uploading all images to your website without compressing them. You see, most images tend to be very sizeable prior to compression. As a result, whenever you insert a image into a page, the size of the page will increase significantly, which in turn will cause load times to balloon. But before compression we need to address dimension of the images
Always Crop Your Image to Correct Dimensions
For instance, If you are showing thumbnails which might be 100px wide and using actual image as source which is probably much bigger then 100px, this slows your page load time and creates a bad user experience. Always crop the image to correct dimension before adding it on the page.
How to compress images
This is perhaps the most simple step, there are a number of free tools available that will do lossless compression of the images and shave off up to 80% of image weight for some images. If you are a mac user, ImageOptim will let you drag and drop you image folder and update all the images in the same place, this make it so simple and easy that it is a crime not to do it before uploading your website. If you are a window user, Tiny PNG is a great we to do bulk image compression.
4 — CSS Sprites
An image on a webpage is an independent HTTP request, in my last article we have talked about importance of reducing the number request in term of javascript and css files, for images a great way to reduce the number of HTTP request is to use image sprites. An image sprite is a collection of images put into a single image. Mahbub Hasan has wrote a great article on this topic Responsive image sprite. This will not only reduce the number of requests, a sprite image has smaller size as compared to the total size of independent images it is made of.
5 — Browser Caching
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.
The first time someone comes to your website, they have to download the HTML document, stylesheets, javascript files and images before being able to use your page. That may be as many as 30 components and 2.5 seconds.
Once the page has been loaded and the different components stored in the user’s cache, only a few components needs to be downloaded for subsequent visits.
Approximately 40–60% of daily visitors to your site come in with an empty cache, so it’s critical that you make your page fast for these first-time visitors. But you also need to enable caching to shave time off subsequent visits.
For all cacheable resources (JS and CSS files, image files, media files, PDFs, etc.), set Expires to a minimum of one week, and preferably up to one year in the future.
Here is how to enable caching for apache server using .htaccess file
For doing the same on IIS here is step by step guide.
6 — KeepAlive
As you may have noticed, there is KeepAlive setting as well in the above apache setting. This is also an important setting to enhance your server speed while downloading all the content from your web server.
So What is KeepAlive?
HTTP is a session less protocol. A connection is made to transfer a single file and closed once the transfer is complete. This keeps things simple but it’s not very efficient.
To improve efficiency something called KeepAlive was introduced. With KeepAlive the web browser and the web server agree to reuse the same connection to transfer multiple files.
It reduces latency associated with HTTP transfers and delivers a better user experience. On the server side enabling KeepAlive reduces CPU usage. Consider that a typical web page has dozens of different files such as images, stylesheets, javascript files etc. If KeepAlive is disabled a separate connection must be made for each of those files. Creating and closing connections has an overhead and doing it for every single file wastes CPU time.
However, enabling KeepAlive increases memory usage on the server. Apache processes have to keep connections open waiting for new requests from established connections. While they are waiting they are occupying RAM that could be used to service other clients. If you turn off KeepAlive fewer apache processes will remain active. This will lower memory usage and allow Apache to serve more users. So using the KeepAlive setting depends on your website traffic and your server RAM.
Measure Your Website Performance
It is time to measure your performance using tools like GTmetrix, Google’s PageSpeed Tools and PingDom.
Check out my next article on this topic Let’s Stop Losing Conversions where I am talking about critical render path and deferred images.
