1. Image Optimization:
Images are an integral part of majority of websites, which if not optimized properly, can consume significant amount of bandwidth delaying the response of the webpages. So images must be optimized rather than being scaled down. Some best practices are the use of web-friendly image formats like GIF, PNG or use of some tools, which can compress the images without compromising with their quality. Use of responsive images can also be very helpful.
2. Minimization of Redirects:
Websites often take longer time to load because of intrinsic redirects that result in additional HTTP requests. To keep these additional requests to minimum, developers must tend to restrict the use of intermediate redirects.
For responsive websites, the webpages are auto-redirected to responsive mobile versions without additional HTTP requests.
3. Reduction of DNS lookups:
DNS lookup plays a vital role in downloading the webpages. It typically takes a significant amount of time for the DNS (Domain Name System) to resolve the host IP address. It further delays the browser response time as the browser waits for this background resolve process to complete entirely.
It is a great practice to slice the Hostname components to at least four Hostnames and that can drastically reduce DNS lookup time.
4. Reduction of HTTP requests:
Browsers spend majority of time sending HTTP requests to download various components of a web page like images, flash, style scripts, etc. So a greater number of page components result in larger loading time for the web page.
It warrants for simplification of the design, which can be done by reducing the number of page elements, using combined style sheets, compressed contents and by putting the style scripts at the end.
5. Separate Asset Hosting:
7. Enabling Browser Caching:
8. Optimized web font:
The use of custom web fonts such as Google fonts is in trend now and more than half of the websites are using web fonts globally now. Although these have certain advantages, they reduce the response time of web pages extensively as the browsers send extra HTTP requests to fetch them. Thus, it is advisable to keep the use of custom fonts to the minimum possible and to host them locally with Base64 encoding.
9. Prefetching and Pre-Connect:
Prefetching a domain name in the head section of the HTML code is an intelligent way to resolve domain names before the browser follows the link at the time of loading.
Similarly, pre-connect is a great way to initiate HTTP requests for DNS lookup, TLS negotiation and TCP Handshake in advance before the browser actually sends the request to the servers. It reduces the total turnaround time to a great extent.
10. Hotlink Protection:
Sometimes hot-linking of web contents form multiple foreign sites reduce the performance of the site that actually owns the contents. So, Hotlink protection is the process of restricting other websites from using a site’s content. It saves a lot of bandwidth by keeping outside HTTP referrers at bay.
11. Optimized database:
This may have been put last on the page, but it is equally important as the other methods to help in optimizing the website. The database can be tuned with regular maintenance where unused or redundant tables can be dropped. For faster access of information, the data can be properly indexed.
These are some of the most useful tips to tweak your code or content, which promises an optimized web page. Still there are many small and useful tricks to implement for great results. As it is always said for websites ‘The leaner, the better’.