Waiting is always irritating, and if your website or web page takes too much time to load, you may start to lose visitors and customers. Therefore, diminishing wait time is a crucial factor in providing a better website experience for users.
1. Reduce Page Weight: One of the most important factors in page loading speed is the weight of the page. To reduce the page weight we use a minimization technique (eliminating unnecessary white space and comments) and by moving inline Scripts and CSS into an external file.
Page weight is nothing but the overall size of the files that the browser must download to display your website. You can reduce the weight of the page by using the following tips:
- Minimize CSS: Though it may not always be possible, you should have only one CSS file. This reduces the page load time because the browser doesn’t need to download additional files. If you are using multiple CSS files, condense them and eliminate unnecessary whitespace prior to launch. There are also many tools for minimizing your CSS files such as Sass, LESS and Stylus.
- Put images in the correct format: Incorrect image format results in unnecessary page weight. In general, use JPEG for photographs and PNG for everything else. It’s also important to resize photos before you put them on your page. Image dimensions should never exceed the dimensions of their containing element.
- Remove unnecessary fonts: Try sticking to only 3-4 webfonts max in your web design.
- Avoid image modification: Do not modify your image and use a CSS3 effect instead. Many web developers modify images and don’t use CSS3 because there are several effective tools, for example Photoshop and Coreldraw. Rather than using modified images to display gradients or drop shadows, use the CSS3 properties. These properties are quicker to build and result in a lighter download. By using this strategy the image size will also be reduced.
3. Cache content can be reused: Always ensure that any content can be cached with appropriate expiration times. Pay attention to the Last-Modified header. The Last-modified header allows for efficient page caching. The Last-Modified entity-header field indicates the date and time which the origin server believes the variant was last modified for the webpage. If the last modified date is different, then the page will again be cached. However, if it is the same, then the page will load quickly into the browser. Most web servers automatically append the Last-Modified header to static pages (for example .html, .css), based on the last-modified date stored in the file system or FTP server.
Note: For the dynamic pages (like aspx and PHP) this doesn’t happen. In other words, the dynamic page’s last-modified header will not be sent.
5. Use valid markup: For valid markup, use modern CSS. It can reduce the need of images, as we can use CSS3 to design them. The advantage of valid markup is that browsers will have no need to do error-correction when parsing the HTML.
6. Chunk your contents: Some web-developers and web-designers use nested tables to design their website layout. To design webpage layout, don’t use tables. This is a legacy method and uses a <DIV> to design your webpage layout. Rather you can also use a CSS3 Multi-column Layout or CSS3 Flexible Box Layout. The table is still considered valid markup, but should be used to display tabular data instead of displaying nested tables (such as in the following).
Display a non-nested table or div (such as in the following):
7. Specify the size and position for images and tables: If you specify the size and position of the images and tables, the browser can immediately determine the height and width of the images and tables. This way it will be able to display a web page without the necessity to reflow the content. This not only speeds the display of the page but prevents annoying changes in a page’s layout when the page finishes loading.
These tips can help speed up your website load time. You can optimize your webpages, reduce the page weight, cache your page and use valid markup. The result should be an increase in productivity and a better user experience, leading to more traffic on your websites.