Development Tools 4 min read

Simple Factors on How to Optimize Your Website

Written on 30 Dec 2015
Overview

Websites that are not optimized properly have huge issues getting conversions. Moreover, there are countless competitors for products similar to the ones that you’re selling. Good optimization will improve your SEO and also your users’ experience, which will boost sales and clickthroughs, and enable you to better meet your KPIs.

Website optimization is one of the most important parts of web development and maintenance. Unfortunately, it’s often overlooked by webmasters. It’s very important that a website performs well; if your site isn’t properly optimized, you’re letting your competition get the upper hand.

Why Site Optimization is Important

  1. A non-optimized site will load slowly, which hurts your conversion rates. Google data shows that users expect a site to load in three seconds or less, and 90% of them will be gone if there’s nothing onscreen in five seconds. That same study puts the average mobile load time at 23 seconds.
  2. Google likes well-optimized sites, and making sure everything is in order will give you a major search engine bump.

How Can You Measure Your Speed?

Several online tools will help you to measure the speed and loading time of your pages. Our favorite two are:
  1. Pingdom Tools
  2. GTMetrix

Okay, So How Do I Optimize My Site?

There are three pillars we’ll cover today: design, code, and tricks for hosting.

Layout and design

One major culprit of poor optimization is poorly thought-out or overdesigned layouts. Follow these important steps to improve optimization:
  1. Use less images—focus instead of using colours and other simpler design elements. A little bit of clever CSS goes a long way. Speaking of:
  2. Use CSS font icons rather than images for increased speed and reduced stress on your server.
  3. Use up-to-date languages such as HTML5 and CSS3.

HTML optimization

  1. Do not have any unnecessary data in your HTML and CSS files.
  2. Merge your CSS styles into a single file. This will reduce requests and improve your load times.
  3. Combine smaller images into one using CSS sprites.
  4. Use images in JPG format than PNG format.
  5. You should optimize all your images by using photoshop. There are also a couple of sites on the web that you can help you like https://tinypng.com/, https://kraken.io/.
  6. Make sure you always include external CSS before external JavaScript. And try to avoid CSS @import.
  7. All your external resources should be present at their path. Make sure there are no missing files.
  8. Instead of resizing images with CSS, reduce the original image’s dimensions with Photoshop.

Things to be Done After Web Hosting

You also can do a few things after hosting.
  1. You can purchase a CDN (Content Delivery Network) service from MaxCDN, Amazon CloudFront etc. and upload your static components on their CDN.
  2. Write the following rules into your .htaccess file:

To enable keep-alive:

<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>

For Enable gzip compression:

<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 rsp header ^Content-Encoding:.*gzip.*
</ifModule>

For Force no caching for dynamic files:

<filesMatch ".(php|cgi|pl|htm)$">
ExpiresDefault A0
Header set Cache-Control "no-store, no-cache, must-revalidate, max-age=0"
Header set Pragma "no-cache"
</filesMatch>
</ifModule>
If you follow these instructions, you’re well on your way to a faster-running site. Poor optimization is cutting into your bottom line, and you can’t let it. If you’re interested in learning more about optimization, check out our mobile optimization guide. If you want to bring in some professionals to help you get your site moving as fast as possible, get in touch with our experienced web developers. CodeClouds has staff in four major international locations: Kolkata, Fort Wayne, Sydney and Wellington. If you’re interested in hiring our teams, don’t be afraid to get in touch!

Share this article

91 reads
Contents

Similar Reads