閃電頁面速度的12個步驟
在 華爾街綠洲，我們注意到每當我們專注於提高網頁速度時，Google都會向我們傳送更多有機流量。在2018年，我們公司的網站覆蓋了有機搜尋的80％以上的流量。這是2450萬次訪問。毋庸置疑，我們非常關注如何繼續改善使用者體驗並讓Google滿意。
我們認為這篇文章是一個很好的方式來突出我們採取的具體步驟，以保持我們的頁面速度閃電快速和有機流量健康。雖然本文有些技術性（頁面速度是一個重要且複雜的主題），但我們希望它為網站所有者和開發人員提供瞭如何嘗試和提高頁面速度的框架。
快速技術背景：我們的網站建立在Drupal CMS 之上，我們執行在具有LAMP堆疊的伺服器上（加上Varnish和memcache）。但是，如果您不使用MySQL，則本文中的步驟和原則仍與其他資料庫或反向代理相關。
準備？讓我們深入研究。
加速後端的5個步驟
在我們進入可以幫助您加快後端的特定步驟之前，檢視“後端”的含義可能會有所幫助。您可以考慮儲存資料的所有內容的後端，包括資料庫本身和伺服器 – 基本上任何有助於使您無法在視覺上與之互動的網站功能的東西。有關後端與前端之間差異的更多資訊，請閱讀本文
第1步：確保已配置反向代理
這是重要的第一步。對於華爾街綠洲（WSO），我們使用名為Varnish的反向代理。它是迄今為止最關鍵，最快速的快取層，可為大多數匿名流量（訪問者登出）提供服務。Varnish將整個頁面快取在記憶體中，因此將其返回給訪問者的速度非常快。
https://en.wikipedia.org/wiki/Reverse_proxy
第2步：擴充套件該快取的TTL
如果你有一個龐大的內容資料庫（特別是在10000以上的URL範圍內）不會經常變化，為了在Varnish快取層上提高命中率，你可以延長生存時間（TTL基本上意味著如何在將物件從快取中重新整理之前很久）。
對於新加坡辦事處，我們一直走到兩週（因為我們討論了超過300,000次）。在任何給定時間，這些論壇URL中只有幾千個是活動的，因此大量快取其他頁面是有意義的。這樣做的缺點是，當您進行任何網站範圍，模板或設計更改時，您必須等待兩週才能到達所有網址。
第3步：預熱快取
為了保持我們的快取“溫暖”，我們有一個特定的流程可以訪問我們站點地圖中的所有網址。這會增加使用者或谷歌機器人訪問相同頁面時頁面進入快取的可能性（即我們的點選率）它還使Varnish充滿了更多的物體，隨時可以快速訪問。
從下面的圖表中可以看出，“快取命中率”（綠色）與總命中率（藍色+綠色）的比率超過93％。
第4步：調整資料庫並關注最慢的查詢
在WSO上，我們使用MySQL資料庫。確保啟用慢速查詢報告並至少每季度檢查一次。使用EXPLAIN檢查最慢的查詢。在需要的地方新增索引並重寫可以優化的查詢。
在WSO上，我們使用MySQL資料庫。要調優MySQL，您可以使用以下指令碼：https：//github.com/major/MySQLTuner-perl和https://github.com/mattiabasone/tuning-primer
第5步：HTTP標頭
使用HTTP2伺服器push在請求之前將資源傳送到頁面。首先，確保測試應該推送哪些。JavaScript對我們來說是個不錯的選擇。你可以在這裡閱讀更多相關資訊。
以下是我們的投資銀行面試問題 URL中的伺服器推送示例：
</files/advagg_js/js__rh8tGyQUC6fPazMoP4YI4X0Fze99Pspus1iL4Am3Nr4__k2v047sfief4SoufV5rlyaT9V0CevRW-VsgHZa2KUGc__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; 相對=預載荷; 如=指令碼，</檔案/ advagg_js / js__TLh0q7OGWS6tv88FccFskwgFrZI9p53uJYwc6wv-a3o__kueGth7dEBcGqUVEib_yvaCzx99rTtEVqb1UaLaylA4__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; 相對=預載荷; 如=指令碼，</檔案/ advagg_js / js__sMVR1us69-sSXhuhQWNXRyjueOEy4FQRK7nr6zzAswY__O9Dxl50YCBWD3WksvdK42k5GXABvKifJooNDTlCQgDw__TDoTqiqOgPXBrBhVJKZ4CapJRLlJ1LTahU_1ivB9XtQ.js>; 相對=預載荷; 如=指令碼，
確保您使用的格式正確。如果是指令碼：<url>; 相對=預載荷; 如=指令碼，
如果是CSS檔案：<url>; 相對=預載荷; 如=的風格，
加快前端的7個步驟
以下步驟有助於加快您的前端應用程式。前端是使用者直接與之互動的網站或應用程式的一部分。例如，這包括字型，下拉選單，按鈕，過渡，滑塊，表單等。
第1步：修改JavaScript的位置
修改JavaScript的位置可能是最困難的變化之一，因為您需要不斷進行測試以確保它不會破壞您網站的功能。
我注意到每次刪除JavaScript時，都會看到頁面速度有所提升。我建議儘可能多地刪除Javascript。您可以縮小所需的JavaScript。您還可以組合JavaScript檔案，但使用多個包。
始終嘗試將JavaScript移動到頁面底部或內聯。您也可以在可能的情況下推遲或使用async屬性，以保證您不會呈現阻止。你可以閱讀更多有關移動的JavaScript 這裡。
第2步：優化您的影象
儘可能使用WebP獲取影象（Cloudflare，CDN，自動為您執行此操作 – 我將在下面詳細介紹Cloudflare）。這是一種使用有失真壓縮 和無失真壓縮的影象格式 。
始終使用正確尺寸的影象。例如，如果您的網站上有一個2“x 2”方形的影象，請不要使用大的10“x 10”影象。如果您的影象大於所需的影象，則通過網路傳輸更多資料，瀏覽器必須為您調整影象大小
使用延遲載入來避免/延遲下載頁面下方而不是螢幕可見部分的影象。
第3步：優化您的CSS
你想確保你的CSS是內聯的。像這樣的線上工具可以幫助您找到要內聯的關鍵CSS，並解決渲染阻塞問題。額外獎勵：您將保留具有單獨檔案的快取優勢。
確保縮小CSS檔案（我們使用AdVagg，因為我們使用的是Drupal CMS，但根據您的網站，有很多選項）。
嘗試使用較少的CSS。例如，如果您有某些僅在您的主頁上使用的CSS類，請不要將它們包含在其他頁面上。
始終組合CSS檔案但使用多個包。您可以在此處詳細瞭解此步驟。
將媒體查詢移動到特定檔案，以便瀏覽器在呈現頁面之前不必載入它們。例如：<link href =“frontpage-sm.css”rel =“stylesheet”media =“（min-width：767px）”>
如果您想了解有關如何優化CSS的更多資訊，請檢視Patrick Sexton的有趣帖子。
第4步：減輕您的網路字型（它們可能很重）
如果您不小心，這是您的開發人員可能與您的設計師爭論的地方。每個人都想看一個設計精美的網站，但如果你不小心如何實現這個設計，它可能會導致意想不到的速度問題。以下是有關如何使字型節食的一些提示：
使用內聯svg圖示字型（如字型真棒）。這樣，您將減少關鍵鏈路徑，並在首次載入頁面時避免出現空內容。
使用fontello生成字型檔案。這樣，您只能包含實際使用的字形，這會導致較小的檔案和更快的頁面速度。
如果要使用Web字型，請檢查是否需要字型檔案中定義的所有字形。例如，如果您不需要日語或阿拉伯語字元，請檢視是否存在僅包含所需字元的版本。
使用Unicode範圍選擇所需的字形。
儘可能使用woff2，因為它已經被壓縮了。
本文是Web字型優化的絕佳資源。
以下是我們使用優化字型時測量的差異：
將我們的字型檔案從131kb減少到41kb並刪除一個外部資源（useproof）後，我們測試頁面上的滿載時間從5.1秒一直下降到2.8秒。這是44％的改進，肯定會讓谷歌微笑（見下文）。
這是44％的改進。
第5步：移動外部資源
如果可能，將外部資源移動到您的伺服器，以便您可以控制過期標頭（這將指示瀏覽器將資源快取更長時間）。例如，我們將Facebook Pixel移動到我們的伺服器並將其快取了14天。這意味著您將負責不時檢查更新，但它可以提高您的網頁速度得分。
例如，在我們的Private Equity Interview Questions頁面上，可以看到如何從我們的伺服器載入fbevents.js檔案，並且快取控制http標頭設定為14天（1209600秒）
cache-control：public，max-age = 1209600
第6步：使用內容分發網路（CDN）
什麼是CDN？點選此處瞭解更多資訊。
我建議使用Cloudflare，因為它使得許多工比在您自己的伺服器上嘗試執行它們更容易，更快。以下是我們對Cloudflare配置的具體做法：
速度
自動縮小，檢查所有
在波蘭語下
啟用Brotoli
啟用Mirage
選擇有損
檢查WebP
網路
啟用HTTP / 2 – 您可以在此處閱讀有關此主題的更多資訊
目前沒有瀏覽器通過未加密的連線支援HTTP / 2。出於實際目的，這意味著您的網站必須通過HTTPS提供才能利用HTTP / 2。Cloudflare有一種免費且簡單的方式來啟用HTTPS。在這裡檢視。
加密
在SSL下
選擇靈活
根據TLS 1.3
選擇啟用+ 0RTT – 此處有關此主題的更多資訊。
第7步：使用服務人員
服務工作者為網站所有者和開發人員提供了一些有趣的選項（如推送通知），但就效能而言，我們對這些工作人員如何幫助我們構建更智慧的快取系統感到非常興奮。
要了解如何在您的網站上啟動和執行服務工作者，請訪問此頁面。
隨著服務工作者快取資源（影象，CSS，javascript，字型等），返回的訪問者通常會比沒有工作者時更快地提供服務。
測試，工具和外賣
對於您嘗試提高速度的每項更改，您可以使用以下工具來監控更改的影響，並確保您處於正確的路徑：
https://www.webpagetest.org
https://developers.google.com/speed/pagespeed/insights
Google Page Speed Insights於2018年11月更新（詳情請點選此處）。它為您提供了大量有關如何提高基於Light House的移動和桌面頁面效能的建議。
我們知道有很多要消化的內容和上面連結的大量資源，但是如果你的時間緊迫，你可以從後端和前端部分的第1步開始。僅這兩個步驟就可以自己產生重大影響。
本文來自投稿，不代表窮思筆記立場，如若轉載，請註明出處：http://www.chons.cn/11623.html