|
Web front-end optimization best practices: content
Web front-end optimization best practices: Server
Web front-end optimization best practices: Cookies
Web front-end optimization best practices: CSS
Web front-end optimization best practices: JavaScript
Web front-end optimization best practices: images
Best Practices for Web Front-end Optimization: Mobile (iPhone) Yahoo!'s Exceptional Performance team has made outstanding contributions to the Web front end. The number of well-known optimization rules has also increased from 13 to 14, then to 20, and now to 34 - it really keeps up with the times. The latest 34 items are also categorized from different perspectives. There are currently 10 content-oriented optimization rules. 1. Make Fewer HTTP Requests
The first one is probably the most important one. According to data analysis by the Yahoo! research team, a large portion of user visits will benefit the most from this item. There are several common ways to actually reduce HTTP requests: •1) Merge files, such as combining multiple CSS files into one;
•2) CSS Sprites use CSS background related elements to absolutely position the background image; see: CSS Sprites: Image Slicing's Kiss of Death
•3) Image Map
•4) Inline images use the data: URL scheme to embed the image data in the actual page.
2. Reduce DNS Lookups
It must be understood that DNS lookups are very expensive. In addition, I think this is a common problem for all Yahoo! sites. Yahoo! The main site may not be obvious enough, but some sub-sites have similar obvious problems. For domestic sites, if too many external widgets are used, it is easy to cause too many DNS lookup problems. 3. Avoid Redirects
It's not about avoiding it absolutely, but trying to reduce it. Additionally, some unnecessary redirects should be noted. For example, adding a / (Slash) after the subdirectory of a Web site can effectively avoid a redirect. There is a difference between http://www.dbanotes.net/arch and http://www.dbanotes.net/arch/ . If it is an Apache server, this problem can be eliminated by configuring Alias or mod_rewrite or DirectorySlash. 4. Make Ajax Cacheable
Response time is critical to Ajax, otherwise the user experience will definitely not be good. An effective way to improve response time is Cache. Some other optimization rules are also valid for this one. 5. Post-load Components
6. Preload Components
Strictly speaking, the above two points are both about flexible application of the idea of asynchrony. 7. Reduce the Number of DOM Elements
8. Split Components Across Domains
The main purpose is to improve the parallel downloading capability of page components. But don't cross too many domain names, otherwise it will conflict with the second point. 9. Minimize the Number of iframes
Friends who are familiar with SEO know that iframe is a taboo in SEO. For front-end optimization, iframe has its advantages and disadvantages. Let's look at the problem from two perspectives. 10. Eliminate http 404 errors (No 404s)
Thorough testing of page links and continuous tracking of web server error logs can effectively reduce 404 errors and improve user experience. It is worth mentioning that 404 errors caused by CSS and Java Script are often easily overlooked because they are a little more "difficult" to locate. These are the 10 items in the content section. It should be said that the specific guiding content is not detailed enough. I will gradually add more based on my own understanding.
Web page production poluoluo Article introduction: Web front-end performance optimization is a big topic, a topic worthy of continuous tracking by operation and maintenance personnel, and a technology that is ruthlessly ignored by many websites.
The second part of Web front-end optimization best practices is server-oriented. There are currently 6 practice rules in total. [Note: This is at most a technical note. To view the original content, please visit: Exceptional Performance: Best Practices for Speeding Up Your Web Site] 1. Use a Content Delivery Network
Domestic CDN is not yet widely used. However, we have unique problems between China Telecom and China Netcom. If we optimize this, we can basically achieve CDN or similar effects (pretend to be so). [Tin said that CDN is widely used in China. Just look at the market of CDN vendors and you will know that it has not yet entered the homes of ordinary people.] 2. Add an Expires or a Cache-Control Header
Each browser has a specific solution, Apache example [Note: The following example is not detailed enough, and some adjustments need to be made to the specific environment]: ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks" After Lighttpd enables the mod_expire module: $HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; {
expire.url = ( "" => "access 1 years" )
Nginx example reference: location ~* \.(jpg|gif|png)$ {
if (-f $request_filename) {
expires max;
break;
}
} 3. Gzip Components
For most sites, this is a necessary step that can effectively reduce network traffic pressure. Maybe some people are worried about the impact of CPU compression on the CPU. Don't worry, just do it. It's okay. Nginx example: gzip on;
gzip_types text/plain text/html text/css ext/javascript; See also: How to enable Gzip compression in IIS?
4. Configure ETags
Etag may be something that most website maintainers tend to overlook. Before this series of optimization rules appeared, most sites on the Internet probably ignored this issue. Of course, Etag does not have a significant impact on the performance of most sites. Unless it's an RSS oriented site. [I saw some friends criticizing that it was written briefly and said that IE does not support ETag. To be clear: IE supports ETag, but when using IIS, you need to pay attention to the related Etag Bug. 】 Supplement: What I mean is "many websites turn on Etag without paying attention, and no website cares about how to use it, consuming resources without knowing it. It doesn't mean that Etag is bad. Reasonable use of Etag can definitely bring good benefits. 5. Flush the Buffer Early
After thinking about this for a long time, it seems that the idea is still asynchronous. Can it improve user experience? 6. Use GET for AJAX Requests
XMLHttpRequest POST requires two steps, while GET only requires one. But please note that the maximum URL length that GET can handle on IE is 2K.
Web page production poluoluo Article introduction: Web front-end performance optimization is a big topic, a topic worthy of continuous tracking by operation and maintenance personnel, and a technology that is ruthlessly ignored by many websites.
The third part of Web front-end optimization best practices is oriented towards cookies. There are currently only 2 rules of practice.
1. Reduce Cookie Size
Cookies are an interesting topic. According to RFC 2109, each client can keep up to 300 cookies, with a maximum of 20 cookies for each domain name (in fact, most browsers now have more than this, such as Firefox has 50). Each cookie is up to 4K. Note that the 4K here may not be strictly 4096 depending on different browsers. Let's not go off topic. The most important thing about cookies is to try to control the size of the cookies and not stuff them with useless information. 2. Use Cookie-free Domains for Components
This topic has been mentioned before in the discussion of Web Image Servers. The Web components mentioned here mostly refer to static files, such as images and CSS. Yahoo!'s static files are all on yimg.com. When the client requests static files, the impact of repeated cookie transmission on the primary domain name (yahoo.com) is reduced. From the article When the Cookie Crumbles, we can see that the cookies of MySpace and eBay are not small, which must be because they are more concerned about user behavior. eBay recently built the Personalization Platform, which is designed to break away from the limitations of cookies.
Web page production poluoluo Article introduction: Web front-end performance optimization is a big topic, a topic worthy of continuous tracking by operation and maintenance personnel, and a technology that is ruthlessly ignored by many websites.
The fourth part of Web front-end optimization best practices is oriented towards CSS.
There are currently 6 practice rules in total. See also the Mozilla Developer Center article: Writing Efficient CSS 1. Put Stylesheets at the Top
I think the official explanation is a bit vague. This one is actually related to user access expectations. By putting CSS at the top, the browser can parse and render the HTML page from top to bottom in a targeted manner. No one likes to wait, and browsers have taken this into account. 2. Avoid CSS Expressions
Personally, I think that what can be done through CSS expressions can also be done through other means with less risk. 3. Make JavaScript and CSS External
After stripping, a separate processing strategy can be applied to it in a targeted manner, such as compression or caching strategy. 4. Minify JavaScript and CSS
It would probably be better without JavaScript and CSS. But, this is impossible, SO, try to make it smaller. The grammar can be abbreviated. 5. Choose <link> over @import
In IE the @import directive is equivalent to putting a link tag at the bottom of the HTML. This goes against the first point. 6. Avoid Filters Web page production poluoluo Article introduction: Web front-end performance optimization is a big topic, a topic worthy of continuous tracking by operation and maintenance personnel, and a technology that is ruthlessly ignored by many websites.
Web front-end optimization best practices: JavaScript
This section has 6 rules, some of which are repeated in the CSS section. The most important thing about the best practices of front-end optimization is "practice". It is easy to understand, but the key is to "practice", "execute", "give feedback" and gain benefits. 1. Put Scripts at the Bottom
While a script is downloading, the browser cannot do anything else (serialization). So, throw it to the end and deal with it. For some functional scripts, it may be difficult to implement. However, for domestic websites, many use Google Analytics services to analyze website data. In this regard, the absolutely feasible suggestions are placed at the bottom of the page. 2. Make JavaScript and CSS External
See the description in the CSS article 3. Minify JavaScript and CSS
See the description in the CSS article 4. Remove Duplicate Scripts
This is quite common for some historical sites or forum-type websites. There have been too many changes in the maintenance personnel before and after taking over, and everyone has his or her own set of rules. This could lead to some potential trouble. 5. Minimize DOM Access
There are three guiding suggestions: •Cache references to accessed elements
•Update nodes "offline" and then add them to the tree
•Avoid fixing layout with JavaScript – this should be done with CSS
6. Develop Smart Event Handlers
In addition to the English explanation, here is also a reminder to pay attention to the problem of Java Script memory leaks. I also recommend an article called "How to Optimize the Performance of JavaScript Scripts". For guidelines on Ajax optimization, see Improving Ajax Application Performance and Avoiding Web Service Vulnerabilities. Postscript 1): After I had almost finished organizing it, I found that there was already an article on the Internet called "34 Golden Rules for the Best Yahoo! Website Performance Experience", which was a translated version. It seems I have duplicated some work. Postscript 2): CSS/JavaScript have optimization rules. But there seems to be a lack of optimization practices for Flash.
Web page production poluoluo Article introduction: Web front-end performance optimization is a big topic, a topic worthy of continuous tracking by operation and maintenance personnel, and a technology that is ruthlessly ignored by many websites.
Web front-end optimization best practices Part 6: Image
There are currently 4 rules in this section. At the recent Velocity 2008 technology conference, Image Optimization: How Many of These 7 Mistakes Are You Making by Stoyan Stefanov of Yahoo! is also very valuable as a reference. Let’s talk about them together. 1. Optimize Images
Should I use GIF, JPG or PNG format images? Whenever possible, use PNG format images, which have more features and are smaller in size (compared to GIF). For PNG images, consider optimizing them with Pngcrush or a similar tool. Common tools are listed below: •pngcrush http://pmt.sourceforge.net/pngcrush/
•pngrewrite http://www.pobox.com/~jason1/pngrewrite/
•OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (ref: Tutorial)
•PNGOut http://advsys.net/ken/utils.htm
See also: Five Tips For the Effective Use of PNG Images Optimization tools for JPEG images: •jpegtran ( http://jpegclub.org/ )
It must be emphasized that students of image design should consider designing images for the Web and not designing images that exceed the acceptable size. This should be a habit, not a superb skill. You just need to remember it. 2. Optimize CSS Sprites
As mentioned before, to put it simply, it is "using CSS background related elements to absolutely position the background image", turning multiple HTTP calls into one call. For more information, refer to: CSS Sprites: Image Slicing's Kiss of Death To add: I have seen people abuse this technique. It is a good idea to combine multiple background images into one to reduce HTTP calls. But remember that this large image cannot be too "heavy". I have seen background images that are over 100K. One image can slow down the entire site. A good example can be found in this graph of Yahoo relationships. Update: One potential side effect of using CSS Sprites is that the client will consume more memory (reference). 3. Don't Scale Images in HTML
More often than not, it may be because of laziness that the pictures are not made of the appropriate size. If you are batch processing pictures, maybe an ImageMagic command (convert) can do it. It must be mentioned that I have seen too many pages with ugly stretched images. Save these pages! 4. Make favicon.ico Small and Cacheable
Smaller and cacheable, both of which may not be a problem. The problem is, too many sites don't have a favicon.ico at all. Sometimes, to judge whether a blog with an independent domain name is professional, it is enough to basically see whether it has a favicon.ico. --EOF-- Supplement: Visual designers should try to control the image size, and it is recommended to be below 200K. This is not nonsense, refer to the page.
Web page production poluoluo Article introduction: Web front-end performance optimization is a big topic, a topic worthy of continuous tracking by operation and maintenance personnel, and a technology that is ruthlessly ignored by many websites.
The last part of the best practices for web front-end optimization is for mobile applications. In fact, it is only for iPhones, and there are only two rules at present.
1. Keep Components under 25K
This seems to be researched only for iPhone. It is recommended to keep individual Web data objects under 25K. Why 25K? Apple's official information indicates that the maximum size of a Web object that can be cached in memory is 10M, but after testing, it is found to be around 25K. The excellent performance of iPhone in the market has forced Web developers to consider how to optimize it. I believe this part of the content is also constantly changing. 2. Pack Components into a Multipart Document
Packages Web page components into a multi-part document. Its purpose is to reduce HTTP requests. This part is not very detailed, please wait for the subsequent update.
| 
