Speeding up your web site front-end performance optimization

 

An article titled best practices for speeding up your web site has to be mentioned about the front-end performance of websites. He is from the Yahoo performance research team. This article lists the best practices for accelerating 7 categories of 35 websites.

Yahoo Best Practices

1. Content

Reduce HTTP requests, Reduce DNS lookup, avoid redirection, cache Ajax, load components on demand, pre-load components, reduce the number of DOM elements, detach components to different domain names, and try not to use IFRAME avoid 404

2. Server

Use CDN, enable browser cache (add expires or cache-control, configure etags), enable gzip compression, refresh the buffer as soon as possible, Ajax uses the GET request method, and prevents the image label src attribute from being empty

3. Cookie

Reduce the cookie size and use a non-Cookie domain name for some components

4. CSS

CSS file reference is placed on the top, avoiding CSS expressions, avoiding @ import, and avoiding filters.

5. Javascript

Place JS file references at the bottom, place JavaScript CSS code in a separate file instead of a page, minimize JS and CSS files, remove duplicate scripts, reduce Dom operations, and flexibly process events.

6. Images

Optimize images, optimize image merging, do not scale images in HTML, require A favicon. ICO, and reduce the size and Cache

7. Mobile phone (mobile Internet)

Keep components below 25 kb, package Components

Google Best Practices

Google has a similar project called make the web faster, which features a loud and high style, they provide best practices for similar website performance from another perspective.

1. Cache Optimization

Browser cache and Proxy Server Cache

2. Reduce the round-trip time

Reduce DNS lookup, rewrite, avoid bad requests, merge external JS, merge external CSS, use CSS background location to merge images, optimize the loading sequence of style scripts, and avoid using document. write, avoid CSS @ import, prioritize asynchronous requests to resources, use multiple domain names for parallel download

3. Reduce the request burden

Minimize the data carried by requests and use a non-Cookie domain name for static files

4. Reduce the output size.

Enable compression, Remove useless styles, minimize JS, minimize CSS, minimize HTML, postpone Script Loading, optimize images, measure image scaling, and request resources from a unified URL

4. Optimize browser Rendering

Use a valid CSS selector to avoid CSS expressions, placing CSS files in the head of the page, specifying the image size, and specifying a character set.

5. Optimization for mobile devices

Delay JS parsing and rewrite login pages to cache

Test

Before discussing these rules in depth, it is best to use instances to verify these rules. 14 Rules for faster-loading Web sites, which verifies these rules from experiments. For example, if the put scripts at the bottom script is placed at the bottom of the page, the script is placed at different locations on the page for testing, and try other methods to solve the performance problems caused by incorrect positions, and finally draw a conclusion.

Auxiliary Tools

Fortunately, both Yahoo and Google have released their own performance analysis tools, yslow and pagespeed, which provide Firefox extensions and are displayed with the firebug tag, they give you the rating and optimization suggestions for the current webpage based on their best practices, so that we can directly know what room for optimization is available for our site.

 

We will discuss these rules in depth.

-----------------------------------------------

Recommended previous article: Build a high-performance site overview at http://www.cnblogs.com/forcertain/archive/2012/08/07/2626847.html.