在處理客戶(hù)問(wèn)題的過(guò)程中，無(wú)憂(yōu)主機(jī)小編發(fā)現(xiàn)，很多無(wú)憂(yōu)主機(jī)用戶(hù)在制作網(wǎng)頁(yè)的時(shí)候，往往不夠重視網(wǎng)頁(yè)的優(yōu)化。例如上傳的圖片大小過(guò)大，幾M甚至十幾M。這樣帶來(lái)的直接后果就是，網(wǎng)頁(yè)存儲(chǔ)量過(guò)大，網(wǎng)頁(yè)加載速度過(guò)慢，或者干脆就無(wú)法打開(kāi)。無(wú)憂(yōu)主機(jī)小編最近在網(wǎng)上學(xué)習(xí)的時(shí)候，發(fā)現(xiàn)了 一個(gè)非常好的優(yōu)化網(wǎng)頁(yè)插件：PageSpeed Insights，我最喜歡這款功能的圖片無(wú)損壓縮功能，非常的簡(jiǎn)單和使用。下面無(wú)憂(yōu)主機(jī)小編將從安裝、使用全方位的介紹這款工具的使用方法。 PageSpeed Insights 是一款Google瀏覽器插件，該工具能可以幫助網(wǎng)站開(kāi)發(fā)者找出到底是哪些地方影響的了網(wǎng)站的載入速度，并且Google還會(huì)提出優(yōu)化建議。那么PageSpeed Insights 具體可以分析頁(yè)面的哪些方面的情況呢？包括資源、網(wǎng)絡(luò)、DOM以及時(shí)間線(xiàn)等等。這些功能，對(duì)客戶(hù)網(wǎng)站的優(yōu)化都是極其有益的。接下來(lái)，無(wú)憂(yōu)小編將對(duì)PageSpeed Insights做一個(gè)詳細(xì)的介紹。 1、PageSpeed Insights如何安裝？ PageSpeed Insights 是一款Google瀏覽器插件，當(dāng)然要先安裝Google瀏覽器。安裝完成之后，打開(kāi)Google瀏覽器，點(diǎn)擊Google瀏覽器的右上角的“自定義并控制Google Chrome”。 點(diǎn)擊工具，擴(kuò)展程序，就會(huì)看到您的擴(kuò)展程序列表。當(dāng)然您如果是新安裝的Google瀏覽器，里面就沒(méi)有擴(kuò)展程序了。 點(diǎn)擊擴(kuò)展程序列表最下方的獲取更多擴(kuò)展程序，便進(jìn)入到了Chrome網(wǎng)上應(yīng)用店。 然后在左上角搜索PageSpeed Insights ，點(diǎn)擊添加至Chrome，等待安裝完成就可以了。安裝完成之后，我們就可以在Google瀏覽器的右上角看到PageSpeed Insights插件的圖標(biāo)了。 2、? 如何進(jìn)入PageSpeed Insights 工具？ 安裝完了PageSpeed Insights 插件之后，我們?nèi)绾芜M(jìn)入這個(gè)工具？同樣，也是在“自定義并控制Google Chrome”——工具中，選擇開(kāi)發(fā)者工具。 在開(kāi)發(fā)者工具的最右邊，我們就可以看到PageSpeed了(如下圖)。點(diǎn)擊進(jìn)去，便進(jìn)入了PageSpeed Insights for Chrome 工具了。 3、? PageSpeed Insights 工具如何使用？ 既然有一個(gè)這么優(yōu)秀的網(wǎng)頁(yè)優(yōu)化工具，那么該如何使用呢？無(wú)憂(yōu)主機(jī)小編在這里用www.gle-technology.com這個(gè)網(wǎng)頁(yè)給大家講解PageSpeed Insights的使用方法。 首先，用Google瀏覽器打開(kāi)您需要優(yōu)化的的網(wǎng)頁(yè)并用2中的方法打開(kāi)PageSpeed Insights工具。 點(diǎn)擊開(kāi)始分析按鈕，對(duì)當(dāng)前頁(yè)面開(kāi)始分析。 分析完成之后，我們可以看到分析頁(yè)面。 4、? 如何根據(jù)分析結(jié)果優(yōu)化頁(yè)面？ 頁(yè)面分析結(jié)束之后，我們要學(xué)會(huì)首先看概述。因?yàn)楦攀鍪菑囊粋€(gè)整體的方面給您的網(wǎng)頁(yè)做了一個(gè)分析，并提出了網(wǎng)頁(yè)修改的大致方向，讓您對(duì)自己的網(wǎng)頁(yè)有一個(gè)大概的優(yōu)化方向，不至于無(wú)從下手。 看完概述之后，我們就可以轉(zhuǎn)到左邊的細(xì)節(jié)優(yōu)化項(xiàng)目了（如下圖）。 在這里，我們可以清楚的看到PageSpeed Insights 做的所有測(cè)試項(xiàng)目已經(jīng)給網(wǎng)頁(yè)優(yōu)化提出的具體建議。由于很多網(wǎng)站網(wǎng)站容量大都是因?yàn)閳D片大小導(dǎo)致，下面無(wú)憂(yōu)小編將從優(yōu)化圖片的方面給大家講解一下網(wǎng)頁(yè)圖片優(yōu)化的過(guò)程。 在細(xì)節(jié)優(yōu)化項(xiàng)目里我們可以看到優(yōu)化圖片項(xiàng)目。點(diǎn)擊，可以查看到關(guān)于圖片的優(yōu)化建議。 在這個(gè)實(shí)例中，可以?xún)?yōu)化的圖片有三張，我們選擇一張最大的作為例子，其他的處理方式是一樣的。   在上圖第一條優(yōu)化建議記錄中，有兩個(gè)可以點(diǎn)擊的鏈接： 我們點(diǎn)擊“查看經(jīng)過(guò)優(yōu)化的內(nèi)容”，就是經(jīng)過(guò)壓縮后的圖片，無(wú)憂(yōu)主機(jī)小編親自測(cè)試過(guò)，壓縮后的圖片的效果是沒(méi)有任何變化的，但是兩張圖片的大小發(fā)生了變化，壓縮比率一般可以到30~ 60%。這樣就使得網(wǎng)站負(fù)荷大大減少。那么如何無(wú)損壓縮后的 圖片上傳類(lèi)？非常簡(jiǎn)單，把壓縮后的圖片，保存在自己的電腦上，然后通過(guò)ftp上傳覆蓋就可以了。是不是非常實(shí)用而且便捷呢？ 經(jīng)過(guò)圖片處理后，網(wǎng)頁(yè)的負(fù)荷大大降低，提供了網(wǎng)頁(yè)的性能。其他方面，也可以根據(jù)它的提示做適當(dāng)?shù)膬?yōu)化。站長(zhǎng)們，你們還在等什么呢，趕緊用PageSpeed Insights來(lái)優(yōu)化您的網(wǎng)站吧！無(wú)憂(yōu)主機(jī)小編強(qiáng)烈推薦站長(zhǎng)必備網(wǎng)站優(yōu)化工具。

本文地址：http://www.gle-technology.com/others/11204.html