做爲一個全棧互聯網工程師,咱們的目標決不只僅知足於功能的實現,並且要包括性能、安全、易用性等等各方面的考量。那麼是否有一些能夠公開評測的標準,使咱們可以準確地知道目前咱們網站的質量水平在全行業中處於什麼樣的水平呢?隨着技術水平的不斷進步,網站評測方面的各類工具也在不斷演進。工具 工欲善其事,必先利其器。 想要知道本身網站的質量水平,憑想像和猜想是不行的,必需要有能夠客觀衡量的工具。YSlow 最先作這方面嘗試的是2012年誕生於Yahoo的YSlow,可是如今已經逐漸淡出歷史舞臺。它的名稱其實是英文Why Show(爲何這麼慢?)的縮寫,從它的名字你應該能知道它是幫助站長解決網頁加載速度的工具。YSlow是一款瀏覽器插件,能夠支持包括Chrome,Firefox,Safari等等主流瀏覽器。在瀏覽器上安裝相應插件後,就能夠對任意網站進行評測,最後給出一個整體評分。評測內容包括網頁是否包含了過多的HTTP請求,JS和CSS是否通過壓縮,是否採用CDN等等,主要是提供給站長一個優化的方向和參考建議。css
PageSpeed
在YSlow以後,Google推出了本身的網頁優化建議工具PageSpeed Insights,這是一個網頁工具,你不須要像YSlow同樣下載插件和安裝,你只須要打開它的網頁,輸入任何你想測評的網址,就能夠獲得優化建議了。
GTmetrix
我最常使用的工具不是以上兩款,而是一個名叫GTmetrix的網站,這個網站結合了以上兩個工具,給出了更加完整的建議。
Lighthouse
更強大而嚴格的工具仍是Google推出的Lighthouse。這也是一款瀏覽器插件,不過目前只能用於Google自家的Chrome瀏覽器。它從4個方面對任何網站進行評測,包括性能、易用性、最佳實踐。咱們下面將重點介紹如何能在這4個方面都徹底知足Google的要求。
優化
GTMetrix
優化的第一步,咱們仍是先從GTMetrix開始。通常網站常見的問題和建議以下:
CDN
一般狀況下,你須要爲你的網站開通CDN服務,以確保在地理位置上離用戶最近的服務器能夠優先爲用戶提供服務。提供CDN服務的廠商不少,並且價格並不昂貴,不少雲服務商好比阿里雲、百度雲都有提供這方面的服務。
Enable gzip compression
這一項主要是檢查你的nginx服務器是否設置了gzip壓縮傳輸的方式。打開你的Chrome開發者工具,檢查Network標籤裏每個請求的Response header,看一下是否有content-encoding: gzip,若是沒有,說明你的網站沒有設置gzip傳輸。
解決方案:參照個人這篇文章《個人nginx鍋爐片》設置。
Add Expires headershtml
這一項也是不少網站缺失的配置,因爲沒有給jpg圖片以及css和js設置合適的過時時間,致使每次訪問網站都須要從新從網站讀取內容,這是不少網站訪問速度慢的緣由。設置方式:一樣,參照上一節所提到的文章。前端
解決方案:參照個人這篇文章《個人nginx鍋爐片》設置。java
不少狀況下,或者是出於無知,或者是出於偷懶,工程師們傾向於把一張大圖用css方式縮小,例如這樣:width: 100px; height: 50px;。致使的結果是這張圖片在網頁上看起來彷佛圖片縮小了,但實際上文件尺寸並無變小。這也是不少網站變慢的主因。 解決方法:參照個人這篇文章《用imgproxy自動縮放圖片》設置。雪碧圖 若是你的頁面中有不少小圖標的時候,最糟糕的做法莫過於把它們所有切成小碎的jpg或者png,這樣會使你的頁面在加載時向服務器端發送不少次http請求,而每一次請求都有獨立的創建鏈接、傳輸數據、斷開鏈接的過程,很是浪費資源。 解決方案:若是可能的話,把這些圖標作成獨立的圖標字體文件。若是不行,則把它們壓縮成雪碧圖。 壓縮js和css 一般狀況下,你剛剛寫完的js是下圖中左邊這種樣子的,而一般大公司網站的代碼是圖中右邊這樣的。nginx
左邊的代碼人類閱讀沒有什麼問題,可是你不該該把它們就這樣在網絡中傳輸。第一,浪費流量;第二,你能讀得懂,你的友商也能讀得懂,不利於安全。
解決方案:你應該把你的js/css/html進行醜化(uglify)和壓縮(minify)。
終極大法
以上全部這些修改建議聽上去都不錯,可是我要一個一個作下來太繁瑣怎麼辦?也許你應該考慮用一個現代的框架幫你自動完成這些事情,好比Angular/React/Vue,或者你本身全用Grunt/Gulp/Webpack完成全部這些事情。你知道這就是爲何前端工程師要學習框架的緣由了吧?由於個人博客網站是全用Jekyll直接建在Github Pages上的,使用了CloudFlare作CDN,而它們已經自動幫我完成了全部這些煩瑣的事情,因此起點比較高,很輕鬆就能在GTMetrix上獲得99分的高分。
Lighthouse
在完成了GTMetrix的要求,可以得到99分以上的高分以後,咱們還想要達到更高的標準,挑戰Google的Lighthouse滿分!
Lighthouse從如下4個方面對網頁作出評價,咱們逐個來談。
漸進式Web應用(Progressive Web Apps)
頭一項標準『漸進式Web應用』,這個標準是Google自家發明的。其目的是爲了讓網站能在網絡不順暢通的狀況下也能顯示基本內容,或者上一次緩存的內容,而不是給出一個難看的『網絡不通』的提示,而且可以讓用戶像安裝普通應用同樣直接把網頁安裝在手機上。PWA的終極理想是能夠用網頁應用來取代應用,因此目前並不被Apple支持。Google官網給出了關於如何實現PWA的詳細指南,按照指南學習一步一步就能夠構建出你的第一個PWA網頁。建設完成後能夠用Lighthouse來測試一下你的網頁到底有多符合PWA標準。
漸進式Web應用標準共有11項。
下面重點介紹一下爲了使一個網頁能知足基本的PWA要求所必需要完成的工做:
manifest.json
首先,你的網站必需要有一個manifest.json文件,這個文件裏描述了最基本的一些信息。好比個人網站的manifest.json文件是這樣的:
這裏要注意的是你必須事先準備好你的網站的Logo圖標,並且尺寸必須是512x512的。另外,這裏設定的主題顏色必須和頁面中的顏色相一致。在各頁面的頭部須要添加如下代碼行:
在這裏指定了你的網站的manifest.json文件的路徑,而且指定了頁面的theme-color主題色。
serviceworker.js
在你的主頁面當中增長如下代碼用來判斷瀏覽器是否支持ServiceWorker,若是支持的話,加載ServiceWorker文件:
而後在根目錄下增長一個serviceworker.js的文件:
把指定的文件保存在緩存中,這樣下次若是網絡不通的話,瀏覽器會從緩存中取文件,而不會出現網絡不通的畫面。建好了ServiceWorker文件的頁面,會在Chrome工具欄裏看到這樣的效果:
同時,完成了PWA效果的網站,可讓用戶在手機中直接安裝,好比:
而後,就會在用戶的主屏幕上生成一個帶有你設定的圖標的應用:
點擊圖標打開應用,會來到一個沒有任何URL地址欄和工具欄的頁面,使用戶徹底感受不到是在瀏覽網頁:
性能
Lighthouse對性能的要求基本和GTMetrix差很少,若是你能在GTMetrix得到高分的話,經過Lighthouse的這一項測試應該不難。惟一多要求的一項是全部圖片都要求是webp格式,可是Safari瀏覽器目前並不支持這種格式,因此若是你把網站上的全部jpg文件改爲webp文件的話會致使你的網站裏的圖片在iPhone上不能顯示。(我目前的網站全面採用了webp格式,不過會在不久的未來全面切換回jpg,主要緣由是iPhone目前還不兼容。)
性能標準共有10項。
可用性
可用性標準主要是指在製做網頁時必須考慮殘疾人的需求。
可用性標準共有8項。
Elements Use Attributes Correctly
這一項標準的要求之一是:全部圖片必須有alt屬性,這樣若是圖片不能顯示時,也能出現合適的文字。固然還有不少其它要求,你能夠根據Lighthouse給出的建議逐項調整。
Elements Describe Contents Well
這一項標準的要求之一是:全部input輸入框必須有label或者aria-label。以下面這樣:
Color Contrast Is Satisfactory
這一項標準的要求是全部字體的前景色和背景色的對比度須要足夠強,以便於視力很差的人士可以分辨頁面上的字跡。若是你不知道某兩種顏色的對比度是否足夠,能夠用這個網頁檢測,綠色的Pass表示合格。
有時候這一標準會有誤判,爲了能讓它經過,你可能須要設置額外的background-color屬性,例如(stylus):
最佳實踐
最佳實踐標準是指一個理想網站所應該達到的最高標準。包括:避免使用Application Cache,避免使用WebSQL,使用Http 2.0,使用https,避免使用document.write,避免使用console.log等等。這些標準看上去很瑣碎,可是每一項標準的提出都有其合理性,應當不遺餘力遵照。
最佳實踐標準共有15項。
使用http 2.0
關於如何開通http 2.0,能夠參考我以前寫過的一篇文章《免費給你的網站加上藍色小閃電》。
成果
若是你完成了以上的全部優化步驟,相信你的網站應該能夠獲得一個比較高的評分了。如今咱們隨便找個網站評測一下看看吧,別人家的網站效果大抵都是這樣的:
而咱們的網站,通過調校以後的效果是這樣的:
是否是頗有成就感呢?
有一個平臺能夠提供給大家學習,讓你在實踐中積累經驗掌握原理。主要方向是JAVA工程師。若是你想拿高薪,想突破瓶頸,想跟別人競爭能取得優點的,想進BAT可是有擔憂面試不過的,能夠加個人Java學習交流羣:282711949。web
注:加羣要求面試
一、大學學習的是Java相關專業,畢業後面試受挫,找不到對口工做能夠json
二、在公司待久了,如今過得很安逸,但跳槽時面試碰壁。須要在短期內進修、跳槽拿高薪的瀏覽器
三、參加過線下培訓後,知識點掌握不夠深入,就業困難,想繼續深造緩存
四、已經在Java相關部門上班的在職人員,對自身職業規劃不清晰,混日子的
五、有必定的C語言基礎,接觸過java開發,想轉行的
小號勿擾,不喜勿加
做者:張京