Frontend optimization Summary

Frontend optimization homepage Optimization

The homepage is the page with the most traffic, so its resources should be independent. This page should have the highest priority and the greatest degree of optimization should be:

• Image independent service. CSS Sprites is an image only used on the home page. It does not contain any additional images/icons on any other pages.
• CSS-index.css for the first page. To achieve this, we need to use the preprocessing tool to modularize CSS and then merge it.
• Import other than reset.css in the same format and set the cache
• Embedding index.css and index. js in line to reduce HTTP requests
• Compress index.html during project release

Reduce HTTP requests

• Merge JS/CSS/IMG: Merge gruntjs, merge SCSs, and merge sprites
• Inline files in an HTML file or set cache for external resources

Set Cache

• Resource adoptionFile Content-based hash version RedundancyFor example:
  This should not be written when a script is introduced.

  But the source code of the Project is

  After the project is released

  However, this requires a complete set of tools. For details, refer:
  Http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1

Reduce resource size

• Delete unused codes, comments, and blank spaces
• Minimize compression code

Delayed Loading

• First, load the images in the visible view. The following images are not loaded at the moment. The images will be loaded when they scroll to or slide.

Pre-Load

• After loading the resources on page N, the backend will start to automatically load the resources on page n + 1.

Make small details

• Use CDN to link resources
• Avoid redirection
• Put CSS link in and JS at the bottom
• Do not use @ import for CSS Import
• Do not use </LI> </ul>