Common methods for front-end performance optimization

The Web front end is the part before the application server processes it. The front end mainly includes various resources, such as HTML, CSS, javascript and image, and has different optimization methods for different resources.

Content optimization

Reduce the number of HTTP requests.

This strategy is the most important and effective, because a complete request has to go through DNS addressing, establishing a connection with the server, sending data, waiting for the server to respond, receiving data, which is a complex process that consumes time cost and resource cost.

Common methods:

  • Merge multiple CSS and JS files
  • Integrate images using CSS Sprites
  • Inline Images (embed image data on the actual page using the Data: URL scheme)
  • Set up HTTP caching properly
  • Reduce DNS lookups
  • Avoid redirection
  • Using Ajax caching
  • Lazy loading components, preloading components
  • Reduce the DOM element count. The presence of a large number of DOM elements in a page slows down the efficiency of javascript traversing the DOM.
  • Minimize the number of IFrames. Iframes provides an easy way to embed content from one site into another. But it’s 1-2 orders of magnitude slower than other DOM elements, including JavaScript and CSS.
  • Avoid 404. HTTP requests are time consuming, so using HTTP requests to get a useless response (such as a 404 page not found) is completely unnecessary and degrades the user experience without doing any good.

Server optimization

  • Use a content delivery Network (CDN). Spreading web content across multiple servers in different geographical locations speeds up downloads.
  • GZIP compression
  • Setting ETags: ETags is a mechanism used by Web servers and browsers to determine whether the content in the browser cache matches the original content in the server.
  • Flush buffer ahead of time
  • Use the GET method for Ajax requests
  • Avoid empty image SRC
  • Cookie optimization
  • Reduce Cookie size
  • Use domain name independent cookies for Web components

CSS optimization

  • Place the CSS code at the top of the HTML page
  • Avoid USING CSS expressions
  • Use < link> instead of @import
  • Avoid using Filters

Javascript to optimize

  • Place the JavaScript script at the bottom of the page.
  • Reference JavaScript and CSS as external files. In practice, using external files can speed up pages because both JavaScript and CSS files are cached in the browser.
  • Zoom out JavaScript and CSS
  • Delete duplicate scripts
  • Minimize DOM access. Accessing DOM elements with JavaScript is slow.
  • Develop intelligent event handlers
  • Note in javascript code: Use with with caution, avoid eval Function, and reduce scope-chain lookups.
  • Image optimization
  • Optimize image size
  • Optimize images with CSS Sprites
  • Do not use zoomed images in HTML
  • Favicon.ico should be small and cacheable

SEO optimization

Reasonable title, description, keywords:

  • Search on the weight of the three decreased one by one, the title value to emphasize the key, important keywords do not appear more than 2 times, and to the front, different page title to be different; Description summarizes the content of the page, the length is appropriate, not excessive stacking keywords, different page description is different; Keywords list the key keywords
  • Semantic HTML code that conforms to W3C specifications: semantic code makes it easy for search engines to understand web pages
  • Important content HTML code in the front: search engines grab HTML order from top to bottom, some search engines have restrictions on the length of the grab, to ensure that important content will be captured
  • Do not output important content in JS: crawlers do not execute JS to retrieve content
  • Use iframes sparingly: Search engines do not crawl iframes
  • Alt must be used for non-decorative images
  • Improve site speed: Site speed is an important indicator of search engine ranking

Webpack optimization point

  • Code compression plugin UglifyJsPlugin
  • Gzip compression is enabled on the server
  • Load the resource file require.ensure on demand
  • Optimize source-map in DevTool
  • Strip the CSS file and package it separately
  • The removal of unnecessary plug-ins is usually the result of the same set of configuration files for the development and production environments
  • The development environment does not do meaningless work such as extracting CSS to compute file hash etc
  • Configuration devtool
  • Optimizing the search path at build time indicates whether a directory needs to be built or not

Other optimization points

Why is it more efficient to use multiple domain names to store website resources?Copy the code
  • CDN cache is more convenient
  • Break the browser concurrency limit
  • Save Cookie bandwidth
  • Save the connection number of the main domain name and optimize the page response speed
  • Prevent unnecessary security problems

If useful to you, I hope to get your thumbs up recognition ~ thank you