18個網站優化技巧

快速的頁面加載對提升搜索引擎排名、網站轉化率和整體的用戶體驗是非常重要的。網站頁面的加載速度也是衡量網站性能的一個重要因素。

如果網站不是以最好的性能在運行,遲緩的加載會讓你在低的排名和搜索流量上花費更大的代價。頁面的加載速度會對用戶的行爲和轉化率產生很大的影響。

那麼?有哪些簡單的方式可以優化加載速度呢?

申請阿里雲服務器等產品時,可以使用1000元阿里雲代金券,領取網址: https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=2a7uv47d

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代碼:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>
1
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加速。

7、壓縮CSS、JavaScript和HTML文件
通過刪除所有不必要的空格和註釋,從而減小文件大小,提高頁面的加載速度。下面是一些優化CSS、JavaScript和HTML文件的流行工具,非常有用。

CSS Minifier
Avivo
HTML Compressor
8、避免重定向
重定向是對網站訪問者的一種極大的刺激。就類似你去一個朋友家,卻發現你朋友早已經搬到三個街區遠的地方了。重定向會消耗額外的時間,降低加載速度。

9、指定字符集
指定字符集是加速瀏覽器渲染頁面的另一個有用的技巧。下面的代碼就能輕鬆實現:

10、避免錯誤請求

當用戶在網站上搜索時,收到404或410錯誤是比較失望的。錯誤請求會對網站的頁面加載速度產生不利影響。因此,建議你無論如何都要避免錯誤請求。Check My Link 能幫你找出404鏈接,清除它們,改善用戶體驗。

11、丟棄跟蹤代碼、嵌入視頻的元素和分享按鈕
很多網站管理員認爲使用多個跟蹤代碼提供嵌入和分享按鈕會帶給用戶更好的體驗,實際上這隻會給網站增加更多的服務請求。例如,一個iframe會請求一個新頁面,這會自動降低網站的加載速度。所以,丟棄這些跟蹤代碼,可以提高網站加載速度,提升用戶體驗。

12、異步腳本
還有一個可以提高網站頁面速度的超棒選擇就是異步加載腳本。如此一來網頁負載就並不必依賴於這些異步腳本。在異步模式中,腳本是在後臺下載的,不會影響瀏覽器對頁面的渲染和加載。


1
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文件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章