提高網頁效能的方式

以下為幾個足以提高網頁效能的方式,大家可以參考參考~

Yahoo!’s Latest Performance Breakthroughs

1. Flush the buffer early [server]
2. Use GET for AJAX requests [server]
3. Post-load components [content]
4. Preload components [content]
5. Reduce the number of DOM elements [content]
6. Split components across domains [content]
7. Minimize the number of iframes [content]
8. No 404s [content]
9. Reduce cookie size [cookie]
10. Use cookie-free domains for components [cookie]
11. Minimize DOM access [javascript]
12. Develop smart event handlers [javascript]
13. Choose <link> over @import [css]
14. Avoid filters [css]
15. Optimize images [images]
16. Optimize CSS sprites [images]
17. Don’t scale images in HTML [images]
18. Make favicon.ico small and cacheable [images]
19. Keep components under 25K [mobile]
20. Pack components into a multipart document [mobile]

High Performance Web Sites

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable

大家可以看到,CSS在網頁效能影響當中,其實並沒有佔很大的比例,因此這裡要強調一個觀念,使用CSS或是網頁標準化的最主要目的並不是為了提高網頁效能,網頁效能的提高,其實這只能說是使用CSS和網頁標準化的附帶好處。但是減少Request和檔案大小則是提高網頁效能的重要技巧,因此規劃與設計網站的時候,就必須特別注意這個部份。

YDN提到PNG的部份,在IE6其實是有顯示上的問題的,當然,使用PNG Fix是可以解決這樣的問題,但是這畢竟不是一個很完善的方法。有沒有解決的方法呢?其實現在還沒有,好一點的方式就是請大家告訴大家,少用IE吧~:D

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s