快速的頁面載入對提升搜尋引擎排名、網站轉換率和整體的使用者體驗是非常重要的。網站頁面的載入速度也是衡量網站效能的重要因素。
如果網站不是以最好的性能在運行,遲緩的加載會讓你在低的排名和搜尋流量上花費更大的代價。頁面的載入速度會對使用者的行為和轉換率產生很大的影響。
那麼?有哪些簡單的方式可以優化載入速度呢?
1、圖片優化
首先,你需要優化你網站上的圖片,來獲得絲毫加速網站的機會。從原圖上移除額外的註解、不必要的空間和無用的顏色,將圖片儲存為JPEG格式,因為它即使佔用空間小,也能保證圖片的高品質。
對於WordPress網站,建議使用smush.it外掛程式來自動最佳化網站的圖片。如果圖片是PNG格式,可以使用tinypng 優化圖片,提升圖片品質。
2、開啟GZip壓縮
GZip壓縮聽起來很複雜,但實際上很簡單,被用來減少HTTP請求的大小來縮短回應時間。因為這允許你發送GZip壓縮檔案而不是HTML檔案給瀏覽器,它將縮短頁面等待時間和載入時間。對於Apache伺服器,可以將下面的程式碼加入.htaccess檔案中來開啟GZip壓縮。
mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
如果上面的程式碼沒有開啟GZip壓縮,則刪除,使用下面的程式碼:
# compress text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript # Or, compress certain file types by extension:SetOutputFilter DEFLATE
或在HTML/PHP檔案的頂端新增下列的PHP程式碼:
3、伺服器時間格外優化,但是除非伺服器回應時間非常快,否則就不會有什麼大的效果。當涉及到提高網站的速度,伺服器回應時間起著重要的作用。以下是一些提高伺服器回應時間的建議。
有獨立的伺服器,而不是選擇共享/託管伺服器。
提高Web伺服器的品質。
移除不必要的插件,只有那些必要的插件,才需要一直保持啟用狀態。
4、瀏覽器快取
瀏覽器具有快取的功能,可以儲存指定的文件,減少HTTP請求,從而提高網站的載入速度。你可以透過在.htaccess檔案中設定expires頭來開啟瀏覽器快取,利用下面的程式碼可以實現:
## EXPIRES CACHING ##ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" ## EXPIRES CACHING ##
注意:如果過期時間與檔案掛鉤,而此時檔案中的內容需要更改的話,那必須先重新命名文件,以便瀏覽器可以取得新新增的程式碼。
5、開啟長連接(Keep-Alive)
Keep-Alive頭對縮短瀏覽器和伺服器之間的分散式請求的潛伏期是非常重要的。當使用者透過瀏覽器請求網頁時,瀏覽器會讀取伺服器發送的特定的HTML文件,如果請求的頁面中包含了外部的CSS和JavaScript文件,瀏覽器會再次發送獨立的請求來取得這些文件。正如你所想的,這會延長頁面的載入時間。
使用Keep-Alive頭可以一直保持連接,直到瀏覽器從伺服器取得到所有與這個頁面相關的資源。在.htaccess檔案中加入下面的程式碼可以開啟這個功能:
Header set Connection keep-alive
6、使用CDN
内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时,就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时,就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
7、压缩CSS、JavaScript和HTML文件
通过删除所有不必要的空格和注释,从而减小文件大小,提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具,非常有用。
CSS Minifier
Avivo
HTML Compressor
8、避免重定向
重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家,却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间,降低加载速度。
9、指定字符集
指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现:
10、避免错误请求
当用户在网站上搜索时,收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此,建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接,清除它们,改善用户体验。
11、丢弃跟踪代码、嵌入视频的元素和分享按钮
很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验,实际上这只会给网站增加更多的服务请求。例如,一个iframe会请求一个新页面,这会自动降低网站的加载速度。所以,丢弃这些跟踪代码,可以提高网站加载速度,提升用户体验。
12、异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中,脚本是在后台下载的,不会影响浏览器对页面的渲染和加载。
13、样式表置顶,脚本置底
将样式表放在顶部有利于页面迅速加载,因为这样可以使得页面慢慢呈现。一般来说,在同一时间,大部分浏览器支持并行下载两个组件(图像、样式和脚本)。但是通常而言,脚本会在并行下载时会阻止其他的下载,直到脚本下载完毕。
14、JavaScript的延迟解析
为了加载网页,浏览器必须解析所有的标记内容,从而增加了网站的加载时间。通过延迟解析脚本,那么就可以减少初始网站的加载时间了。
15、避免阻塞型的JavaScript和CSS
在瀏覽器呈現網頁之前,它首先需要透過解析HTML標記語言來建構一個DOM樹。在此過程中,如果遇到了腳本,此過程就會中止,轉而先執行腳本,然後才會繼續原先的活動。因此建議避免阻塞型的JavaScript,尤其是外部腳本。
阻塞型JavaScript也會導致網站的延遲。所以不妨推遲載入那些不重要的JavaScript,或是採用非同步載入的方式。另一個選擇是將這些HTML程式碼內嵌到網站上,同時需要確保CSS的最佳化。
16、最佳化程式碼:不使用內聯的CSS
內聯了樣式就不能清清楚楚地將內容從設計中剝離開來。同時也可能需要大量的維護工作,為網站管理員帶來各種不便,也會進一步增加網頁的大小。
17、檔案分離
網站的檔案可以分為CSS、JavaScripts和映像。文件分離雖然並不能直接改善網站的載入時間。但是,這麼做可以提高伺服器的穩定性,特別是當網站流量突然出現了尖峰的時候。子網域也可以用於託管文件,這樣可以增加並行下載的數量。
18、盡量減少HTTP請求
還有一種簡單的優化網頁速度的方法是,減少HTTP請求。當一個網站一下子收到太多的HTTP請求,它的訪客就會有回應時間延遲的體驗,這不僅增加了CPU使用率也增加了頁面的載入時間。那麼,又該如何減少HTTP請求呢?請參閱以下步驟:
減少網站上的物件數量。
最小化網站上的重定向數量。
使用CSS Sprites 技術(只要你需要的那部分圖片內容)。
合併JavaScripts和CSS檔案。
參考文章
12 Actionable Ways To Improve Page Speed
13+ Ways to Optimize Your Website’s Page Speed