2016-08-25 分類: 網(wǎng)站建設(shè)
谷歌網(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)非??斓乇惠d入了,但是我們知道,總有一個(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é)果是什么?
創(chuàng)新互聯(lián)設(shè)計(jì)文章推薦:
后臺(tái)功能需求的15個(gè)成都網(wǎng)站建設(shè)關(guān)鍵點(diǎn)
空間,主機(jī)的選擇尤為重要,分享2個(gè)重要點(diǎn)
網(wǎng)站名稱:谷歌網(wǎng)頁(yè)速度測(cè)試工具
鏈接地址:http://jinyejixie.com/news/21144.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、App開(kāi)發(fā)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷、商城網(wǎng)站、網(wǎng)站維護(hù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容