- From: Xiaoqian Cindy Wu <xiaoqian@w3.org>
- Date: Thu, 01 May 2014 02:00:01 +0800
- To: "public-web-perf@w3.org" <public-web-perf@w3.org>
- CC: Philippe Le Hegaret <plh@w3.org>, Renoir Boulanger <renoir@w3.org>
- Message-ID: <53613A21.3010202@w3.org>
Hi All, I'm writing a note about Web Performance Tips, which aims to refine and increase the current guidelines and help the developers to improve their web performance by testing and some other pratical means. Here's a table of contents based on tricks I found from the current rules provided by Google[1], Yahoo[2] and some other blogers[3][4]. Many thanks to these articles. I'm sure there are a lot of other methods that make the web faster and better, e.g. Resource Priorities in the WG, so, it would be nice to have your comments or suggestion here. ------------------------------------------------------- * **1 Start from Server* 1.1 Reduce TCP Connection by Keep-alive 1.2 Fix Latency Problems with a CDN 1.3 Configure Entity Tags 1.4 Set an Expires or Cache Control Headers 1.5 Compress Files in Gzip 1.6 Process Parallely (BigPipe) *2 Try the Tricks in Content* 2.1 Reduce HTTP Request by Combining Files or Image Sprites 2.2 Avoiding Redirects 2.3 Structure the HTML to Prioritize Critical Content 2.4 Post-load the Not Absolutely Required Content 2.5 Take Advantage of Pre-loading 2.6 Keep Your DOM Simple 2.7 Minify Resources by Compressing 2.8 Use LocalStorage 2.9 Choose the Right Format for Images *3 Optimize Scripts and CSS* 3.1 Inline Small CSS and Javascript Resources 3.2 Put Stylesheets at the Top and Scripts at the Bottom 3.3 Avoid CSS Expressions and Filters 3.4 Try Defer Loading of Javascript 3.5 Be Cautious to DOM Access *4 Paint faster* 4.1 Take Advantage of HTML5 New Elements and CSS3 New Features 4.2 Avoid Plugins 4.3 Avoid Scaling Images in HTML 4.4 Make Sure Font Size is Valid * **5 Think about Mobile* 5.1 What's Different? -- Slower Network, Smaller Cache, Unsatisfactory Browser Processing 5.2 Cache as Much as Possible 5.3 Use HTML5 Web Workers to Enable Multi-threading 5.4 Use Server-sent Events 5.4 Include a Meta Viewport 5.5 Size Content to Different Vierports 5.6 Size Tap Targets Properly 5.7 Try Responsively-sized Images 5.8 Consider Using Acceleration Hardware 5.9 Support new Protocals (HTTP2) *6 Test Often* 6.1 Measure all the Optimization by Testing 6.2 Analyze the Waterfall Chart 6.3 Discover Where are the Bottlenecks ------------------------------------------------------------------ [1] https://developers.google.com/speed/docs/insights/rules [2] http://developer.yahoo.com/performance/rules.html [3] http://cubiq.org/performance-tricks-for-mobile-web-development [4] http://www.speedawarenessmonth.com/15-things-for-making-your-site-faster-for-mobile-users/ -- Best Regards, Xiaoqian (Cindy) Wu
Received on Wednesday, 30 April 2014 18:00:10 UTC