2016-08-25 分類: 網(wǎng)站建設(shè)
谷歌網(wǎng)頁速度測試工具
用戶體驗(yàn)(UX)
網(wǎng)站加載速度是必要的整體用戶體驗(yàn),這也是一個搜索引擎優(yōu)化排名的因素之一。事實(shí)是,現(xiàn)在,人們沒有耐心等待超過五秒的頁面加載。如果你的網(wǎng)站不夠快,你會失去潛在客戶。與更多的…
網(wǎng)站加載速度是整體用戶體驗(yàn)的一個優(yōu)先事項(xiàng),也是搜索引擎優(yōu)化排名的一個因素。事實(shí)是,現(xiàn)在人們沒有耐心等待超過五秒的時間來加載頁面。如果你的網(wǎng)站不夠快,你會失去潛在客戶。
隨著超過50%的在線流量來自移動設(shè)備,每個人都希望網(wǎng)站加載幾乎瞬間。記住,在這篇文章中,我將向您展示我們?nèi)绾卧O(shè)法得分100 / 100谷歌pagespeed工具反向鏈接的見解為桌面和移動監(jiān)控。
動機(jī)
我們的網(wǎng)站已經(jīng)非??斓乇惠d入了,但是我們知道,總有一個辦法讓它更好。
有一天,在和pagespeed工具,我注意到谷歌的網(wǎng)站有移動設(shè)備的一個可怕的得分,59 / 100。在100 / 95的桌面版本做得更好。
也許他們應(yīng)該使用他們的工具來改進(jìn)他們的網(wǎng)站,對嗎?
這是推動我們使我們的網(wǎng)站加載速度更快,證明你可以得到100 / 100。這不是一個癡迷,它的目標(biāo)是好的。
我們開始在87 / 100。
這是我們在實(shí)施一些技術(shù)后,得到的結(jié)果,與大家分享。
如何使網(wǎng)頁加載速度更快
在我開始顯示出我們遵循的具體步驟,讓我告訴你,pagespeed工具是網(wǎng)絡(luò)性能的做法只有一個準(zhǔn)則。它提供了建議,為優(yōu)化您的網(wǎng)站頁面加載速度,并實(shí)現(xiàn)良好的效果取決于如何建立您的服務(wù)器環(huán)境。
雖然這些步驟中的一些步驟需要專業(yè)技術(shù),其他人不。請注意,他們可以使用幾乎任何內(nèi)容管理系統(tǒng)。
pagespeed工具提出見解,我們優(yōu)化我們的圖片載入速度減少文件大小。為了解決這個問題,我們做了2個重要的事情:
壓縮所有圖片使用像compressor.io和tinypng工具。這些工具是免費(fèi)的,可以減少圖像文件大小超過80%,在某些情況下,不降低圖像的質(zhì)量。
減少圖像的大小而不降低圖像質(zhì)量。例如,如果我們想要在我們的網(wǎng)站上150x150px有圖片,這是圖片應(yīng)該是在我們的服務(wù)器上的大小。你永遠(yuǎn)不應(yīng)該比你想讓他們呈現(xiàn)在較大的圖像,也不能減少它們的大小使用CSS或者HTML標(biāo)簽。
我們下載我們的每一個圖像,然后手動壓縮和調(diào)整他們的。優(yōu)化后的圖像,是一個習(xí)慣,優(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)站運(yùn)營商利用瀏覽器緩存是最具挑戰(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存儲副本,當(dāng)有人用你的網(wǎng)站,靜態(tài)內(nèi)容是從最接近他們的服務(wù)器負(fù)載。
例如,如果你的網(wǎng)站的服務(wù)器主要是來自德克薩斯,沒有一個CDN,一個來自阿姆斯特丹的游客必須等待服務(wù)器負(fù)載的網(wǎng)站所有的方式從美國用CDN,網(wǎng)站從一個位置,靠近用戶加載。在這種情況下,這是一個靠近阿姆斯特丹的地方。因此,網(wǎng)站加載速度更快。
這里是如何從CDN作品GTmetrix視覺表現(xiàn)
我們把所有的圖片,JavaScript,和CSS文件到CDN和只保存HTML文件在我們的服務(wù)器。托管你的圖像在CDN將如何快速你的頁面加載的網(wǎng)站訪問者有很大的不同。
當(dāng)我們這樣做,pagespeed工具還煩人的建議,我們利用我們的瀏覽器對于一些第三方資源緩存。這里的截圖:
結(jié)論
這是我們來監(jiān)測反向評分100 / 100與谷歌的速度工具中最重要的步驟。我們沒有優(yōu)化網(wǎng)頁。我們還優(yōu)化內(nèi)頁,免費(fèi)的反向鏈接檢查器。
你可以采取的三個最重要的行動,以提高您的網(wǎng)站是:
使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))。
修復(fù)渲染阻塞問題。(避免對身體有JavaScript編碼。你的代碼應(yīng)該放在文件的底部。)
優(yōu)化圖像的大小和壓縮。
您的團(tuán)隊(duì)為您的網(wǎng)站做了這樣一個項(xiàng)目嗎?如果是這樣,你的結(jié)果是什么?
創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦:
后臺功能需求的15個成都網(wǎng)站建設(shè)關(guān)鍵點(diǎn)
空間,主機(jī)的選擇尤為重要,分享2個重要點(diǎn)
網(wǎng)站名稱:谷歌網(wǎng)頁速度測試工具
鏈接地址:http://www.rwnh.cn/news/21144.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營銷、商城網(wǎng)站、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容