谷歌網頁速度測試工具

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

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

動機

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

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

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

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

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

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

步驟3：利用瀏覽器緩存#
對于許多網站運營商利用瀏覽器緩存是最具挑戰性的部分。

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

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

結論
這是我們來監測反向評分100 / 100與谷歌的速度工具中最重要的步驟。我們沒有優化網頁。我們還優化內頁，免費的反向鏈接檢查器。

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

牧羊人設計文章推薦：

深圳積分入戶頁面制作

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

響應式網頁設計面臨的挑戰