谷歌網(wǎng)頁速度測試工具

用戶體驗（UX）
網(wǎng)站加載速度是必要的整體用戶體驗，這也是一個搜索引擎優(yōu)化排名的因素之一。事實是，現(xiàn)在，人們沒有耐心等待超過五秒的頁面加載。如果你的網(wǎng)站不夠快，你會失去潛在客戶。與更多的…

網(wǎng)站加載速度是整體用戶體驗的一個優(yōu)先事項，也是搜索引擎優(yōu)化排名的一個因素。事實是，現(xiàn)在人們沒有耐心等待超過五秒的時間來加載頁面。如果你的網(wǎng)站不夠快，你會失去潛在客戶。
隨著超過50%的在線流量來自移動設(shè)備，每個人都希望網(wǎng)站加載幾乎瞬間。記住，在這篇文章中，我將向您展示我們?nèi)绾卧O(shè)法得分100 / 100谷歌pagespeed工具反向鏈接的見解為桌面和移動監(jiān)控。

動機

我們的網(wǎng)站已經(jīng)非常快地被載入了，但是我們知道，總有一個辦法讓它更好。
有一天，在和pagespeed工具，我注意到谷歌的網(wǎng)站有移動設(shè)備的一個可怕的得分，59 / 100。在100 / 95的桌面版本做得更好。

也許他們應(yīng)該使用他們的工具來改進他們的網(wǎng)站，對嗎？
這是推動我們使我們的網(wǎng)站加載速度更快，證明你可以得到100 / 100。這不是一個癡迷，它的目標是完美的。
我們開始在87 / 100。
這是我們在實施一些技術(shù)后，得到的結(jié)果，與大家分享。

如何使網(wǎng)頁加載速度更快
在我開始顯示出我們遵循的具體步驟，讓我告訴你，pagespeed工具是最好的網(wǎng)絡(luò)性能的做法只有一個準則。它提供了建議，為優(yōu)化您的網(wǎng)站頁面加載速度，并實現(xiàn)良好的效果取決于如何建立您的服務(wù)器環(huán)境。
雖然這些步驟中的一些步驟需要專業(yè)技術(shù)，其他人不。請注意，他們可以使用幾乎任何內(nèi)容管理系統(tǒng)。

pagespeed工具提出見解，我們優(yōu)化我們的圖片載入速度減少文件大小。為了解決這個問題，我們做了2個重要的事情：
壓縮所有圖片使用像compressor.io和tinypng工具。這些工具是免費的，可以減少圖像文件大小超過80%，在某些情況下，不降低圖像的質(zhì)量。
減少圖像的大小而不降低圖像質(zhì)量。例如，如果我們想要在我們的網(wǎng)站上150x150px有圖片，這是圖片應(yīng)該是在我們的服務(wù)器上的大小。你永遠不應(yīng)該比你想讓他們呈現(xiàn)在較大的圖像，也不能減少它們的大小使用CSS或者HTML標簽。
我們下載我們的每一個圖像，然后手動壓縮和調(diào)整他們的。優(yōu)化后的圖像，最好是一個習慣，優(yōu)化所有的新圖像上傳到您的服務(wù)器。每一個新的形象應(yīng)該是壓縮和調(diào)整大小。
谷歌還提供了選擇下載您已經(jīng)優(yōu)化的圖像，并且您可以將它們上傳到您的服務(wù)器。你可以用JavaScript和CSS一樣。
rpectd4.png
步驟2：#縮小CSS和JavaScript

谷歌已經(jīng)告訴我們，我們必須減少我們的JavaScript和CSS文件。
修正的過程，通過消除不必要的空格字符減少文件的大小，和評論你的CSS和JavaScript文件。程序員通常會留下許多空間和意見，而編碼。這些甚至可以增加一倍的大小，你的CSS和JavaScript文件。

為了解決這個問題，我們安裝在我們的服務(wù)器gulpjs。該工具會自動創(chuàng)建一個新的CSS文件，刪除所有的空間。它還創(chuàng)建了一個新的CSS文件，自動為你做出的新變化。在我們的例子中，它幫助我們的主CSS文件的大小從約150kb 300KB的減少。不同的是所有不必要的字符。關(guān)于如何刪除白空格的更多指令，檢查谷歌指南。
如果您使用的是WordPress的，我建議你安裝插件autoptimize。
你也可以從pagespeed工具優(yōu)化文件下載。下面是一個例子：
下面是我們經(jīng)過修正CSS和JavaScript的結(jié)果。

步驟3：利用瀏覽器緩存#
對于許多網(wǎng)站運營商利用瀏覽器緩存是最具挑戰(zhàn)性的部分。

為了解決這個問題，我們感動每個靜態(tài)文件從我們的網(wǎng)站CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）。
CDN是一個位于世界各地的網(wǎng)站服務(wù)器的網(wǎng)絡(luò)。他們能夠緩存網(wǎng)站的靜態(tài)版本，如圖像、CSS和JavaScript文件。在其服務(wù)器上你的網(wǎng)站的內(nèi)容的CDN存儲副本，當有人用你的網(wǎng)站，靜態(tài)內(nèi)容是從最接近他們的服務(wù)器負載。
例如，如果你的網(wǎng)站的服務(wù)器主要是來自德克薩斯，沒有一個CDN，一個來自阿姆斯特丹的游客必須等待服務(wù)器負載的網(wǎng)站所有的方式從美國用CDN，網(wǎng)站從一個位置，靠近用戶加載。在這種情況下，這是一個靠近阿姆斯特丹的地方。因此，網(wǎng)站加載速度更快。
這里是如何從CDN作品GTmetrix視覺表現(xiàn)

我們把所有的圖片，JavaScript，和CSS文件到CDN和只保存HTML文件在我們的服務(wù)器。托管你的圖像在CDN將如何快速你的頁面加載的網(wǎng)站訪問者有很大的不同。
當我們這樣做，pagespeed工具還煩人的建議，我們利用我們的瀏覽器對于一些第三方資源緩存。這里的截圖：

結(jié)論
這是我們來監(jiān)測反向評分100 / 100與谷歌的速度工具中最重要的步驟。我們沒有優(yōu)化網(wǎng)頁。我們還優(yōu)化內(nèi)頁，免費的反向鏈接檢查器。

你可以采取的三個最重要的行動，以提高您的網(wǎng)站是：
使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）。
修復渲染阻塞問題。（避免對身體有JavaScript編碼。你的代碼應(yīng)該放在文件的底部。）
優(yōu)化圖像的大小和壓縮。
您的團隊為您的網(wǎng)站做了這樣一個項目嗎？如果是這樣，你的結(jié)果是什么？

牧羊人設(shè)計文章推薦：

深圳積分入戶頁面制作

深圳育捷教育自學考試競價頁面制作案例

響應(yīng)式網(wǎng)頁設(shè)計面臨的挑戰(zhàn)