Nov. 29, 2019, 5:51 a.m.
We all hate to see those slow loading webpages that would take eternity to load. Who to Blame? The front end developer who messed all the script tags and placed large images that consumed all the page load time. Its frustrating, but not anymore. Here is a list of basic steps you can take to fix the issues and get better page load time.
1. Restrict use of "!important" in Stylesheet: It is bad practise to use this tag as it mess with one of CSS's core mechanisms: specificity. And parsing of these CSS selectors if in bulk has a direct hit on Page load time.
2. Avoid Use of Etag Header: E-Tags are generally considered as "Last-Modified-Time" and with its use server hits an extra request to check the hash sum of file and then process the further requests.
3. Avoid Type="Text/Css" Attribute: With the inclusion of HTML5, this attribute is completely optional and taken by default by the browsers.
4. Restrict Use Of Document.Write: The document.write() method writes a bunch of string to the DOM stream which is then further picked by document.open(). So we should prefer manupulating the DOM rather than than using document.write.
<script src="test.js" defer></sc ript>
6. Avoid "Post" for Ajax Calls: One should always prefer GET requests because performance of these are far better than POST. The cases where we can use GET are far more better optimized in case of content rendering and request response time.
7. Limit Page Size: The complete size of any WebPage is calculated by various number of factors. The DOM elements, the images, the graphical content etc. For a better page load time, one should not exceed more than 3MB in total.
8. Use Gzip Compression: GZIP is generally used for compression and decompression of files. It can be enabled server-side, and allows the HTML reduction in size. To verify the existance lookout for response headers with "content-encoding: gzip".
9. Image Resizing At Browser End: Image resizing by the browser means browser at the start is loading the general image and then reprocessing it to display a defined size image to the end user. And say we have bulk of images in our webpage, it will ultimately add up in Website Latency. So one should not use Image Resizing at Browser Side.
10. Image DPI: Dots Per Inch. it is termed as the number of unique dots which are placed in a row within 1 inch of span. There is a standard that web images should not increase the 72 dpi.Anything over 72dpi will create larger files, which means slow downloads.
We hope you would follow the steps and it would help in Better Page Load Time. Although, if you want to analyze the complete WebPage, you can test at here.