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:
- Remove unused assets: If you are no longer using a widget, consider removing all the associated JavaScript/CSS. This can be an easy process depending on where the widgets are kept. The following tools may help with this process: JSLint, Dust-Me Selectors, CSS Usage, unused-css.com and so on.
- 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.
- Minimize JavaScript: Similarly to CSS files, you can also minimize your JavaScript files. Certain JavaScript libraries such as jQuery need to be in their own files, but try to fit all of your custom JavaScript into one file. Also, remember that it’s a good practice to load your JavaScript at the end of a page, right before the closing </html> tag. This will ensure that your script downloads don’t block content for the page.
- 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.
- Replace JavaScript animations/transitions with with CSS3: JavaScript has been used to animate and move certain HTML properties. With CSS3 we don’t need JavaScript to do this. CSS3 animations, transitions and transformation properties execute natively in the browser and require less code than JavaScript.
2. Reduce domain lookups: The page loading time will increase as the number of separate domains increase. Separate domains mainly appear in CSS links, JavaScript links and Image links. Therefore, always take care to use only the minimum necessary number of domains in your webpages.
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.
4. The components of the page should optimally be in order: The Page component should be in order so the page can load faster. The page content should load with CSS and JavaScript because this ensures that the page will initially display. The content should be text on your webpage rather than in image format. Always remember that first your page should be loaded, then load the dynamic features after the page.
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).
<TABLE>
<TABLE>
<TABLE>
<TABLE>
…
</TABLE>
</TABLE>
</TABLE>
</TABLE>
Display a non-nested table or div (such as in the following):
<TABLE>…</TABLE>
<TABLE>…</TABLE>
<TABLE>…</TABLE>
<TABLE>…</TABLE>
<TABLE>…</TABLE>
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.
8. Use async and defer, if possible: When you have multiple <script> tags in your webpage, make the JavaScript scripts compatible with both the async and defer. Furthermore, use mostly use async whenever possible. With async, the page stops rendering while JavaScript is loading, otherwise the browser will not render anything after the script tags which does not have these attributes. Finally, for the async you can use an AJAX call in your webpage so the page will stop rendering. This way, JavaScript will be loaded automatically or asynchronously.
Conclusion
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.