A study in 2006 revolutionized the concept of website loading speed and its effect on revenue generation. Amazon reported that an increase in loading speed by 100 milliseconds reflected as an increased revenue by 1%. Then came the announcement from Google which affirmed that search results were rated based on the loading speed. Ever since, there has been constant researches to identify the link between loading speed and efficiency. An important question is now raised- “How fast is fast?” Website optimization is hedonic with a constant room for improvement. You can either agree on the speed of your website through comparison with others using tools like WhichLoadsFaster or use the guideline below
- Less than 1 second- as close as you can get to perfect speed
- 1-3 seconds- not bad, but not good enough
- 3-7 seconds- should be good enough
- 7+ seconds- you definitely need help
For those who wish to increase the speed of loading, here are significant tips:
- Minimal redirections: Redirection becomes necessary to land in a new URL, connect different parts of a site, track clicks or reserve multiple domains. Latency is added when an extra HTTP is requested. Limit the number of directs to necessity.
- Limit HTTP requests: Time is wasted on downloading bits of the website like Flash, images, and stylesheets because a single request is made for each element. More the number of elements, higher the loading time. Increase the speed of the site by reducing the number of components, switch to CSS instead of images, use integrated stylesheets and minimize scripts by adding it to the bottom of the page. Begin with trimming down the number of components in a page.
- Removal of query links: Links can’t be cached with “?” in URL even when in the presence of Cache-control: public header. Use Cntrl+F5 instead to get the same operation. Query strings must be restricted to dynamic resources.
- Compress: High-quality content demand pages are large and are often 100kb or more in size. Because they are bulky, they load slowly. Condense these files by zipping them, this will increase the loading speed. The technique of zipping is called compression. All web files are compressed in the format of Gzip either before deployment or download through third party or built-in module. Download time is slashed by 70% just by reducing the size of the file.
- Activate browser cache: All elements of the site visited are stored in the hard drive in a cache or in temporary folders. The next time you revisit the site, the stored content is assessed making the page load faster. The step of sending a request is skipped. On the first visit, the time taken to download all elements may take 2.4 seconds for 30 components. On loading the page, the individual components are stored in cache memory. On the subsequent visit, only 3 or more components are loaded in less than 0.9 seconds. Expiry time for all cache resources must be set to a maximum of 7 days. Setting it for a protracted time like 1 year is a direct violation of RFC guidelines.
- Don’t encourage bad requests: Wasteful requests direct to 404/410 errors. All broken links must be fixed. There are available tools online like online broken link checker which scrutinizes diligently for broken links.
- Cut down on DNS lookups: A considerable time is taken for DNS lookup to spot an IP address for a host name. A browser is incapable of taking any actions till the time DNS lookup is completed. Response time can be increased by limiting the number of unique host names. Group images load every page to reduce DNS lookups. Look into the practice of image sprite..
- JS, CSS and Images:
- Specify the dimension of images: A page on the browser is rendered even before the images are downloaded. Defining the size of the image helps in wrapping the image around elements which are non-replaceable. In the absence of image dimension specification, browser reflows only when the download is complete. Incorporate height and width tag specification in <img> elements.
- JS at the bottom, CS on top: Progressive rendering is prohibited by adding stylesheets at the top of the page. A user is faced with a white screen when the elements are loading. By doing so, you can make sites which are compliant to W3 standards. Adding Java script code at the bottom is done for the same reason.
- Image optimization: Most images use unnecessary colors and comments. Restrict image size to improve the loading speed. Save all images in JPEG format. An optimized image can be saved in Adobe Photoshop by Cntrl+Shift+Alt+S shortcut.
- Cut down on the plug-ins: It’s a no brainer- make the site load faster by making it lighter. Deactivate or delete plug-ins which is not necessary. Then look for rogue plugins which are slowing the site down. Disable plugins, and check the loading speed to identify individual effect.
By incorporating all the above-mentioned actions in your website design, you would be able to increase the loading speed of your website.