在公司做了好多網頁項目，這里合并下一些網頁性能優化的帖子，作為知識目錄
減少網站加載時間的最有效方式如下：
- 減少網站的HTTP請求數。
- 優化圖片
- 合并壓縮腳本
1.減少HTTP請求數：可通過CSS Sprite（又稱CSS雪碧）—將多個圖片整合到一個圖片中，使用CSS來進行定位顯示。頁面加載時，一次性加載整圖，有效減輕服務器壓力。同時，縮短了懸停加載圖片所需的時間延遲，使得用戶瀏覽行為更加流暢，不會停頓。
2.優化圖片：推薦使用PNG8格式，PNG8格式在一般情況下，無論是體積壓縮比還是對各瀏覽器透明度兼容都很不錯。
圖片優化還可以從另外兩方面進行，色盤范圍和壓縮算法，先通過輸出時精準的色數設定，再加上輸出后的二次優化，可以使得圖片質量和大小達到一個極優點，二次優化工具有：
當然最新的一種格式是Google強推的WebP格式，關于WebP更多內容可參看36Kr此篇報道
具備以下條件的圖像更適合用PNG8格式進行存儲：
1、圖像上顏色較少，并且主要以純色或者平滑的漸變色進行填充。
2、具備較大亮度差異以及強烈對比的簡單圖像（如“立刻購買”按鈕中的背景和文字）。
根據經驗具備上述條件的圖像一般是使用photoshop或其他軟件中的矢量工具進行繪制然后再保存成位圖的圖像。
對于寫實的攝影圖像或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達到最佳的壓縮效果。
在存儲圖像時采用JPG還是PNG主要依據圖像上的色彩層次和顏色數量進行選擇。一般層次豐富顏色較多的圖像采用JPG存儲，而顏色簡單對比強烈的則需要采用PNG。但也會有一些特殊情況，例如有些圖像盡管色彩層次豐富，但由于圖片尺寸較小，上面包含的顏色數量有限時，也可以嘗試用PNG進行存儲。而有些矢量工具繪制的圖像由于采用較多的濾鏡特效也會形成豐富的色彩層次，這個時候就需要采用JPG進行存儲了。
另外還有一個原則就是用于頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該盡量用PNG格式進行存儲，這樣才能更好的保證設計品質。而其他一些內容元素，如廣告Banner、商品圖片等對質量要求不是特別苛刻的，則可以用JPG去進行存儲從而降低文件大小。
對于圖片的壓縮，最常見的分有損，無損壓縮。無損壓縮譬如去除exif信息，重新排列像素存儲方式等，有損壓縮譬如合并相似像素，減少可見像素點等。現在這些壓縮算法都可以用現成的成熟的庫實現，以PHP為例子，可以使用pngcrush做PNG 的無損壓縮，pngquant做PNG 的有損壓縮。JPEG可使用imageMagick和jpegtran。這里推薦下imageMagick，相對于其他圖片處理的庫，這個庫可控制的功能更多，并且支持多種編程語言。
可使用類似智圖這類的壓縮應用進行壓縮。
3.合并&壓縮腳本：對CSS和JavaScript進行合并和壓縮。
腳本拆分可以讓維護人員更容易找到對應內容，但同時增加了頁面鏈接數，因此可適當合并腳本。
使用Minify壓縮JS和CSS
Minify把CSS和JS壓縮和削減(Minify：去掉空格回車符等)，以及把多個CSS，JS文件整合到一個文件里。不要以為你的大帶寬沒有必要進 行這類優化。使用它的理由更重要的是文件合并，而不是壓縮，文件整合可以減少瀏覽器端不斷發出新的連接請求，就像FTP服務器一樣，多個小文件 和一個大文件耗時是不一樣的。
Minify使用PHP編寫，項目地址
CSS 在線壓縮：
Cleancss.com
功能最強大，設置項最多Css_compressor
可壓縮代碼片段、URL、文件CSS Drive:CSS Compressor
直觀易用
JS壓縮工具：
UglifyJS
UglifyJS 是用 NodeJS 編寫的 JavaScript 壓縮工具，是目前最流行的JS壓縮工具，JQuery 就是使用此工具壓縮，UglifyJS 壓縮率高，壓縮選項多，并且具有優化代碼，格式化代碼功能，目前國內能提供UglifyJS壓縮的都還處在1.0版本，本站率先升級到 2.0 時代。YUI compressor
YUI compressor 是Java編寫的壓縮工具，由雅虎發布，壓縮是 100％ 的安全，比大多數其他工具有更高的壓縮比， 一般代碼的壓縮率達到 40％ 至 60％，YUI compressor 也能夠壓縮CSS文件，國內互聯網公司，阿里、淘寶、百度等都是采用 YUI compressor 內核壓縮后發布代碼。JSPacker
JSPacker 由PHP編寫的壓縮工具，可以混淆代碼保護知識產權，產生的代碼兼容IE、FireFox等常用瀏覽器，國內大部分在線工具網站都采用這種算法壓縮，只因為此算法采用PHP編寫，正則表達式替換語句，沒有語法分析內核，環境搭建成本低，壓縮率上遠不如以上兩種內核，并且混淆代碼頁不符合開源精神。JsMin
JsMin 是用C語言編寫的一個輕量級JS壓縮器，去除JavaScript文件中的注釋和不必要的空格。它通常減少了一半的文件大小，從而導致更快的下載速度。
另外一些不是屬于提升性能方法，而是通過別的加載手段使得用戶感受度提升的方式：
· 緩存
使用緩存可以減少向服務器的請求數，節省加載時間，所以所有靜態資源都要在服務器端設置緩存，并且盡量使用長Cache（長Cache資源的更新可使用時間戳）
a) 緩存一切可緩存的資源
b) 使用長Cache（使用時間戳更新Cache）
c) 使用外聯式引用CSS、JavaScript
· 按需加載
將不影響首屏的資源和當前屏幕資源不用的資源放到用戶需要時才加載，可以大大提升重要資源的顯示速度和降低總體流量
PS：按需加載會導致大量重繪，影響渲染性能
a) LazyLoad
b) 滾屏加載
c) 通過Media Query加載
· 預加載
大型重資源頁面（如游戲）可使用增加Loading的方法，資源加載完成后再顯示頁面。但Loading時間過長，會造成用戶流失
對用戶行為分析，可以在當前頁加載下一頁資源，提升速度
a) 可感知Loading(如進入空間游戲的Loading)
b) 不可感知的Loading（如提前加載下一頁）
· 減少Cookie
Cookie會影響加載速度，所以靜態資源域名不使用Cookie
· 避免重定向
重定向會影響加載速度，所以在服務器正確設置避免重定向
· 異步加載第三方資源
第三方資源不可控會影響頁面的加載和顯示，因此要異步加載第三方資源
參考：
