• Thiết kế website bán hàng miễn phí 2018

Thủ thuật tăng tốc load website hữu ích trong lập trình

Web performance is an essential element of the user experience. In the first part of this series, I talked about a method for automating some tasks related to web performance optimization.

Here, in the second part of the series, we will go over some slightly more advanced techniques for improving front-end web performance.

This is what we will talk about:

Optimizing the HTML structure

  • Referencing JavaScript and CSS files at the bottom
  • Dealing with flash of unstyled content (FOUC)
  • Inlining CSS and JavaScript

Server configuration

  • Browser caching
  • How long should files be cached?
  • How to override caching
  • Data compression

After applying all of these optimizations on my site, I was able to get a perfect (100/100) PageSpeed Insights score for both mobile and desktop web performance analyses.

Optimizing the HTML Structure

For a long time, I thought that my external CSS and JavaScript references should be inside the  tags. Referencing JS and CSS resources at the start of HTML documents made sense to me because I need this stuff for my web pages to look and function properly.

But having script and link elements at the start of the HTML document  can block the render of the page, meaning the browser won’t process and display any subsequent HTML element until the resources have been downloaded and processed.

Many JavaScript files, especially those written with asynchronous programming in mind, often don’t need to be referenced inside the  tag and can be loaded further down the HTML document so that they don’t block the browser from rendering the page content.

Referencing CSS files towards the end of the HTML document is a little bit trickier. That’s because when you load CSS files at the end of the document, the user might start seeing the page content without any styles because the style rules from the external stylesheet haven’t been loaded and processed yet. This situation is called flash of unstyled content (FOUC).

Referencing JavaScript and CSS Files at the Bottom

Whenever possible, we should reference external resources at the bottom of the document. Just before the closing body tag.

  ...   ...   

Dealing with Flash of Unstyled Content

To address the FOUC, what I’ve done is give the body element an inline style attribute of 0% opacity.

style=opacity:0>

Then, in my external stylesheet, I reset the body element back to 100% opacity.

body {  opacity: 1 !important; }

When the external stylesheet has been loaded and processed, the content will be displayed.

The issue with this technique is if there was a server failure that prevents the CSS file from being downloaded, the user would just see a blank page because of the inline style attribute given to the body element.

Inlining CSS and JavaScript

You can also include CSS style rules within