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

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

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

動(dòng)機(jī)

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

也許他們應(yīng)該使用他們的工具來(lái)改進(jìn)他們的網(wǎng)站，對(duì)嗎？
這是推動(dòng)我們使我們的網(wǎng)站加載速度更快，證明你可以得到100 / 100。這不是一個(gè)癡迷，它的目標(biāo)是完美的。
我們開(kāi)始在87 / 100。
這是我們?cè)趯?shí)施一些技術(shù)后，得到的結(jié)果，與大家分享。

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

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

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

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

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

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

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

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

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

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

深圳積分入戶頁(yè)面制作

深圳育捷教育自學(xué)考試競(jìng)價(jià)頁(yè)面制作案例

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