1.

Explain the best practices to improve the page load time

Answer»

Below are the few best practices to improve the performance of the page load time.

  • Make Fewer HTTP Requests
    • Implementing parallel HTTP requests will improve performance.
    • Combining smaller resource files and creating a single file will reduce the number of HTTP requests.
    • Use Image sprites to combined image files and delivering content more quickly over the browser’s RELATIVELY low number of parallel connections.
  • Use a Content Delivery Network (CDN)
    • PUTTING all that static content CLOSE to the user can really speed up performance.
  • Avoid Empty src or href Attributes
    • Avoid creating an img element with an empty src attribute and then dynamically assign the value of the src attribute during page load with JavaScript. With this approach, the elements always get evaluated before scripts get run. The browser tries to evaluate that empty attribute and creates an HTTP request to do so.
    • A similar pattern and problem appear for href attributes, usually in anchor elements. If the href attribute is blank, the browser sends an HTTP request to the server when the user triggers the interaction. That doesn’t affect page load time, but it does create needless traffic on the servers,
    • wasting bandwidth and potentially slowing delivery for all visitors. The simple fix for this problem is to set the value of the href attribute to a JavaScript COMMAND like <a href="javascript:;" class="triggerName">Trigger</a>
  • Add Expires Headers
    • Adding an Expires header with a date far in future to all your static components (images, stylesheets, scripts, flash, PDF, and so on) lets the static content be cached by browsers. The browsers won’t have to FETCH the static content for subsequent visits and they’ll have a much faster loading time.

E.g: Expires: Wed, 1 Jan 2020 00:00:00 GMT

  • Compress Components with GZIP
    • Using the “Accept-Encoding” header, the content in the HTTP request can be compressed. Such a header appears as below
    • Accept-Encoding: gzip, deflate.

The header specifies two kinds of compression. GZIP is more common because it is the most effective compression scheme available. GZIP reduces the size of a response by about 70%.

  • Put CSS at the Top

If the page contains style information, put that information at the top (in the head element). To avoid redrawing many web browsers won’t start rendering a page until the browser has all the style information.

  • Put JavaScript at the Bottom
  • Avoid CSS Expressions
  • Remove Unused CSS
  • Minify JavaScript and CSS
  • Minimize Redrawing


Discussion

No Comment Found