1. 程式人生 > >網站載入速度優化的14個技巧

網站載入速度優化的14個技巧

下面我將介紹幾個優化網站載入網頁速度的簡單方法,一起來看一下。

1.伺服器響應時間

即使網站已經格外優化,但是除非伺服器響應時間非常快,否則就不會有什麼大的效果。當涉及到提高網站的速度,伺服器響應時間起著重要的作用。下面是一些提高伺服器響應時間的小貼士。

  • 有獨立的伺服器,而不是選擇共享/託管伺服器。
  • 提高Web伺服器的質量。
  • 移除不必要的外掛,只有那些必要的外掛,才需要一直保持啟用狀態。

2.瀏覽器快取

瀏覽器快取可以減少HTTP請求,從而反過來提高網站的載入速度。下面就是如何利用瀏覽器快取的程式碼示例:

<IfModule mod_expires.c>
ExpiresActive
On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule>

注意:如果過期時間與檔案掛鉤,而此時檔案中的內容需要更改的話,那必須先重新命名檔案,以便瀏覽器可以獲取新新增的程式碼。

3.gzip壓縮

gzip壓縮是一個壓縮實用程式,我們可以用它來快速載入網站。它的工作原理是在傳送HTML和CSS檔案到網際網路瀏覽器之前,先壓縮檔案大小。允許mod_defalte模組啟用Gzip壓縮,下面是如何使用它的程式碼示例:

<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

4.非同步指令碼

還有一個可以提高網站頁面速度的超棒選擇就是非同步載入指令碼。如此一來網頁負載就並不必依賴於這些非同步指令碼,網站訪問者也不再需要不得不按捺下性子,等待所有的指令碼載入完之後才能呈現頁面。在非同步模式中,指令碼是在後臺下載的。通常,我們會將第三方指令碼作為非同步指令碼,因為下載這些指令碼時常會讓網站速度變得非常慢。

<script async src="http://www.yoursite.com/script.js"></script>

5.內容分發網路(CDN)

內容分發網路(CDN)是位於不同地理位置的伺服器組成的網路。每個伺服器都擁有所有網站的檔案副本。要是有網站訪問者請求檔案和網頁時,就可以直接從就近的網站伺服器傳送過來(也可以是從負載最小的伺服器)。

6.優化JavaScript、HTML和CSS

優化JavaScript和CSS也可以提高一個網站的網頁速度,而且這個方法非常簡單。優化JavaScript、HTML和CSS就是刪除所有不必要的空格和註釋,從而減小檔案大小。下面是一些最小化JavaScript和CSS的流行工具,非常有用。

7.置於頂部的樣式表和底部的指令碼

將樣式表放在頂部有助網站的迅速載入,因為這樣可以使得網頁漸進式呈現。一般地,所有的網際網路瀏覽器都支援在給定時間內並行下載兩個元件(影象、樣式和指令碼)。但是通常而言,霸道的指令碼會在並行下載時會阻止其他的下載,直到指令碼下載完畢。

8.避免阻塞型的JavaScript和CSS

在瀏覽器呈現網頁之前,它首先需要通過解析HTML標記語言來構建一個DOM樹。在此過程中,如果遇到了指令碼,此過程就會中止,轉而先執行指令碼,完了才會繼續原先的活動。因此建議避免阻塞型的JavaScript,尤其是外部指令碼。

阻塞型JavaScript還會導致網站的延遲。所以不妨推遲載入那些不重要的JavaScript,或者採用非同步載入的方式。另一種選擇是將這些HTML程式碼內嵌到網站上,同時需要確保CSS的優化。

9.JavaScript的延遲解析

為了載入網頁,瀏覽器必須解析所有的<script>標記內容,從而增加了網站的載入時間。通過延遲解析指令碼,那麼就可以減少初始網站的載入時間了。

10.啟用Keep Alive

當用戶通過瀏覽器請求網頁時,瀏覽器首先需要訪問HTML檔案。然後它才能讀取這些檔案,並請求與其他資料相關聯(此處的資料可以是CSS,JavaScript,也可以是任何相關的影象)。

如果“Keep Alive”選項被禁止,那麼下載網站的程序通常就會增加,從而拖累了網站速度。啟用KeepAlive的另一個好處是,它可以減少CPU的使用。

語法: KeepAlive On

11.影象和檔案格式

影象對於任何網站都非常有價值,因為它能傳達一些強有力的資訊給網站的訪問者。最常見的影象格式是GIF、JPEG、PNG等。每種格式都有其長處和侷限。建議使用JPEG格式,而不是GIF和PNG影象,除非影象包含Alpha因子或者是透明的。

12.優化程式碼:不使用內聯CSS

內聯了樣式就不能清清楚楚地將內容從設計中剝離開來。同時可能還會需要大量的維護工作,給網站管理員帶來各種不便,還會進一步增加網頁的大小。

13.檔案分離

網站的檔案可以分為CSS、JavaScripts和影象。檔案分離雖然並不能直接改善網站的載入時間。但是,這麼做可以提高伺服器的穩定性,特別是當網站流量突然出現了尖峰的時候。子域也可以用於託管檔案,這樣可以增加並行下載的數量。

14.儘量減少HTTP請求

還有一種簡單的優化網頁速度的方法是,減少HTTP請求。當一個網站一下子收到太多的HTTP請求,它的訪客就會有響應時間延遲的體驗,這不僅增加了CPU使用率也增加了頁面的載入時間。那麼,又該如何減少HTTP請求?請見以下步驟。

  • 減少網站上的物件數量。
  • 最小化網站上的重定向數量。
  • 使用CSS Sprites技術(只要你需要的那部分圖片內容)。
  • 結合JavaScripts和CSS。

上述建議已被證明在優化網站的頁面載入速度上非常有效。總之,炫彩奪目的圖形,有趣的內容和更好的導航可以幫助你獲得更多的網站訪問者,但更快的網頁載入速度則能幫助你留住他們。

轉自:http://www.codeceo.com/article/14-ways-website-page-speed.html

相關推薦

網站載入速度優化14技巧

下面我將介紹幾個優化網站載入網頁速度的簡單方法,一起來看一下。 1.伺服器響應時間 即使網站已經格外優化,但是除非伺服器響應時間非常快,否則就不會有什麼大的效果。當涉及到提高網站的速度,伺服器響應時間起著重要的作用。下面是一些提高伺服器響應時間的小貼士。 有獨立的伺服器,而不是選擇共享/託管伺服器。提

對html+css+js網站載入速度優化(虛擬主機)

再正文之前先貼上優化後的個人部落格:http://散.top/ (本人學是的javaEE,因此虛擬主機不能在上面跑,只能寫靜態的掛上面玩。。) 為什麼要優化網頁載入速度? 引用下別人的話: 好奇心日報無論是設計還是內容都追求高品質,於是

高性能 Java 持久化的 14 技巧

數據庫查詢 manytoone 匹配 int event overflow 主從復制 stat 響應時間 一個高性能的數據訪問層需要大量關於數據庫內部、JDBC、JPA、Hibernate的知識,本文總結了一些可用來優化企業應用程序的重要的技術。 1. SQL語句日誌

Java數據庫設計14技巧

綜合 標識 現象 數字 行程 -- 安全 其他 相對 Java數據庫設計14個技巧 1. 原始單據與實體之間的關系   可以是一對一、一對多、多對多的關系。在一般情況下,它們是一對一的關系:即一張原始單據對應且只對應一個實體。在特殊情況下,它們可能是一對多或多對一的關

降低網站跳出率的五技巧

SEO優化 網站跳出率 網站優化 網站推廣 網站運營 衡量一個網站用戶體驗好不好的重要標準就是網站跳出率,跳出率高的原因有很多,如用戶找不到有價值的參考內容,服務器不穩定,網頁加載速度過慢,網頁文件太大等等,如果這些問題不能及時解決,對用戶體驗甚至對整個網站優化非常不利,所以針對網站跳出率

[轉] 靜態資源的分佈對網站載入速度的影響/瀏覽器對同一域名下併發載入資源數量

靜態資源的分佈對網站載入速度的影響 / 瀏覽器對同一域名下併發載入資源數量 / browsers network-http-persistent-max-connections-per-server 引文:瀏覽器在同一個域名下併發載入的資源數量是有限的,訪問淘寶首頁需要載入126個資源,那麼如此小的併發連線

網頁載入速度優化方案

一、網頁載入流程 解析 HTML 結構 載入樣式表和外部指令碼 解析並執行指令碼程式碼(部分指令碼會阻塞頁面載入) DOM 樹構建完成(DOMContentLoaded 事件) 載入圖片等外部檔案 頁面載入完畢(load 事件) 二、方式 減少請求數量 使用雪碧圖(

mysql資料庫設計中的14技巧

mysql資料庫設計中的14個技巧     1. 原始單據與實體之間的關係  可以是一對一、一對多、多對多的關係。在一般情況下,它們是一對一的關係:即一張原始單據對應且只對應一個實體。在特殊情況下,它們可能是一對多或多對一的關係,即一張原始單證對應多個實

#技術型乾貨:高效能 Java 持久化的 14 技巧

一個高效能的資料訪問層需要大量關於資料庫內部、JDBC、JPA、Hibernate的知識,本文總結了一些可用來優化企業應用程式的重要的技術。 如果有想學習java的程式設計師,可來我們的java學習扣qun:94311,1692免費送java的視訊教程噢!我整理了一份適合18年學習的java乾貨

wordpress | 網站訪問速度優化方案(Avada)

一、谷歌字型   原因:     Wordpress系統預設使用谷歌字型,在國內谷歌域名被遮蔽,所以導致操作反應慢。     解決方法:     對於後臺:找到Wordpress這個檔案 /wp-includes/script-loader.php,找到:fonts.googleapi

提高Web端頁面載入速度的6方法

阿伯丁集團曾對使用者進行調查,結果顯示,網站頁面載入時間每延長1秒,就會減少11%的頁面瀏覽量,降低16%的客戶滿意度,降低7%的轉化率。亞馬遜也通過調查證實,網頁開啟的速度每提高100毫秒,能為網站增多1%的收益。類似的證實還有很多,網頁開啟的速度直接關係到網站的收益,已毋庸置疑。 這就是為什麼

資料庫查詢速度優化之解決技巧

1、對查詢進行優化,應儘可能避免全表掃描 首先應考慮在 where 及 order by 涉及的列上建立索引。  下面我們來以一個表中177條資料比較一下,全表掃描與建立索引之後效能的一個比較.

初級前端小程式專案載入速度優化

這份文字是根據近期團隊做來問丁香醫生 SPA 和 丁香醫生小程式 載入速度優化的經歷整理而成。 效果 古人有一句話叫做:治感冒看療效。既然是關於速度優化的,我們就先來看一下優化的效果。 Chrome Network 選取了訪問量較大的首頁和我的頁面進行隨機取樣,

提升你Python程式設計速度的15技巧

眾所周知,Python目前已經成為進入人工智慧領域的首選語言,2018 IEEE頂級程式語言互動排行榜上,Python再次屠榜。雖然Python已經給了我們很好的程式設計體驗,但有的小夥伴還想讓寫程式碼的速度更快些。為此,本文作者George Seif為我們提供了15項提升程

測試網站訪問速度的5方法

網頁載入速度對於一個網站來講很關鍵,Google已經將一個網站的載入速度列入了網站關鍵字排名的考慮因素當中,也就是說如果你的網站有足夠的內容,而且載入速度比別人的網站更快一步的話,那麼你就是獲得更好的排名。那麼下面就趕快測試你的網站,提高網站訪問速度吧。 1:用Ping

Asp.net mvc 網站速度優化 -- 頁面快取

網站速度優化的一般方法 由於網站最重要的使用者體驗就是速度,特別是對於電子商務網站而言。 一般網站速度優化會涉及到幾個方面: 1. 資料庫優化 — 查詢欄位簡歷索引,使用資料庫連線池和持久化,現在還有種趨勢,就是選擇使用No SQL作為補充; 2. 資料快取 — 使用Memc

轉 資料庫設計中的14技巧

下述十四個技巧,是許多人在大量的資料庫分析與設計實踐中,逐步總結出來的。對於這些經驗的運用,讀者不能生幫硬套,死記硬背,而要消化理解,實事求是,靈活掌握。並逐步做到:在應用中發展,在發展中應用。       1. 原始單據與實體之間的關係          可以是一對一、一對

【前端開發】25種提高網頁載入速度的方法和技巧

尊重原創:http://blog.csdn.net/wxzking/article/details/4089384 您希望加快網頁的載入速度嗎?瞭解如何通過縮短載入時間來改善撥號上網使用者的瀏覽體驗,在某些情形下,載入時間最多可縮短 80%。下面介紹二十五中網速方法和

靜態資源的分佈對網站載入速度的影響/瀏覽器對同一域名下併發載入資源數量

靜態資源的分佈對網站載入速度的影響 / 瀏覽器對同一域名下併發載入資源數量 / browsers network-http-persistent-max-connections-per-server 引文:瀏覽器在同一個域名下併發載入的資源數量是有限的,訪問淘寶首頁需要載入

優化網站效能 提高網站速度訪問速度14條實踐

    相信網際網路已經越來越成為人們生活中不可或缺的一部分。ajax,flex等等富客戶端的應用使得人們越加“幸福”地體驗著許多原先只能在C/S實現的功能。比如Google機會已經把最基本的office應用都搬到了網際網路上。當然便利的同時毫無疑問的也使頁面的速度越來越慢。