Speed is one of the most important reason to make a customer visit and stay on your website. In this post, we will see how we can improve our website speed.

Following are the minimum basics that should be followed for a website:

Optimized Images

Images are the heavy stuff on the websites. The more the images, the more slow your website will be. For our visual display using images, we can do following:

  1. Don’t just put images on the website. Optimize them first using Photoshop or similar tool and then upload to your website.
  2. Create Progressive Images so that div’s on page get their heights.
  3. Use tools like Font-Awesome for small icons instead of images.
  4. Use SVG instead of images for big icons.
  5. Use Sprites to combine multiple small images into one.

Optimize CSS

CSS decides how the page looks. Multiple developers create different CSS files and connect to page. Hence, there are multiple CSS files for one page which means multiple back and forth requests to server.

  1. Create multiple CSS but combine them into one for production.
  2. Remove comments from production CSS.
  3. Always minify your CSS.

Optimize Javascript

Javascript causes blocking of page rendering. For example, if you are using Flexslider on the page, then page rendering would be blocked until Flexslider Javascript is loaded.

  1. Always use minified version of Javascript.
  2. Remove comments from production Javascript file.
  3. Try to combine multiple Javascript files into one to reduce number of requests to server.
  4. Put your script tags in footer instead of head section.
  5. Try to load non-dependent Javascripts asynchronously. Use it like this:
    <script async src="somejs.js"></script>

Using htaccess

We can also improve a website’s performance using htaccess.

  1. Use browser caching by specifying expiry of static resources like images, css, javascript etc. Add following to your htaccess file:
    # BEGIN Expire headers
    <IfModule mod_expires.c>
       # Enable expirations
       ExpiresActive On 
       # Default directive
       ExpiresDefault "access plus 1 month"
       # My favicon
       ExpiresByType image/x-icon "access plus 1 year"
       # Images
       ExpiresByType image/gif "access plus 1 month"
       ExpiresByType image/png "access plus 1 month"
       ExpiresByType image/jpg "access plus 1 month"
       ExpiresByType image/jpeg "access plus 1 month"
       # CSS
       ExpiresByType text/css "access plus 1 month"
       # Javascript
       ExpiresByType text/javascript "access plus 1 month"
       ExpiresByType application/javascript "access plus 1 month"
       ExpiresByType application/x-javascript "access plus 1 month"
       #html/xhtml+xml
       ExpiresByType text/html "access plus 1 month"
       ExpiresByType application/xhtml+xml "access plus 1 month"
       #Shockwave-flash
       ExpiresByType application/x-shockwave-flash "access plus 1 month"
    </IfModule>
    # END Expire headers
  2. Use gzip compression to send compressed data to browser. Add following to your htaccess file:
    <ifModule mod_gzip.c>
      mod_gzip_on Yes
      mod_gzip_dechunk Yes
      mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
      mod_gzip_item_include handler ^cgi-script$
      mod_gzip_item_include mime ^text/.*
      mod_gzip_item_include mime ^application/x-javascript.*
      mod_gzip_item_exclude mime ^image/.*
      mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>