如何打造一個全滿分網站

時間 2019-11-06

原文原文鏈接

做爲一個全棧互聯網工程師，咱們的目標決不只僅知足於功能的實現，並且要包括性能、安全、易用性等等各方面的考量。那麼是否有一些能夠公開評測的標準，使咱們可以準確地知道目前咱們網站的質量水平在全行業中處於什麼樣的水平呢？隨着技術水平的不斷進步，網站評測方面的各類工具也在不斷演進。css

工具

工欲善其事，必先利其器。html

想要知道本身網站的質量水平，憑想像和猜想是不行的，必需要有能夠客觀衡量的工具。前端

YSlow

最先作這方面嘗試的是2012年誕生於Yahoo的YSlow，可是如今已經逐漸淡出歷史舞臺。它的名稱其實是英文Why Slow(爲何這麼慢？)的縮寫，從它的名字你應該能知道它是幫助站長解決網頁加載速度的工具。YSlow是一款瀏覽器插件，能夠支持包括Chrome, Firefox, Safari等等主流瀏覽器。在瀏覽器上安裝相應插件後，就能夠對任意網站進行評測，最後給出一個整體評分。評測內容包括網頁是否包含了過多的HTTP請求，JS和CSS是否通過壓縮，是否採用CDN等等，主要是提供給站長一個優化的方向和參考建議。android

PageSpeed

在YSlow以後，Google推出了本身的網頁優化建議工具PageSpeed Insights，這是一個網頁工具，你不須要像YSlow同樣下載插件和安裝，你只須要打開它的網頁，輸入任何你想測評的網址，就能夠獲得優化建議了。nginx

GTmetrix

我最常使用的工具不是以上兩款，而是一個名叫GTmetrix的網站，這個網站結合了以上兩個工具，給出了更加完整的建議。git

Lighthouse

更強大而嚴格的工具仍是Google推出的Lighthouse。這也是一款瀏覽器插件，不過目前只能用於Google自家的Chrome瀏覽器。它從4個方面對任何網站進行評測，包括性能、易用性、最佳實踐。咱們下面將重點介紹如何能在這4個方面都徹底知足Google的要求。github

優化

GTMetrix

優化的第一步，咱們仍是先從GTMetrix開始。通常網站常見的問題和建議以下：web

CDN

一般狀況下，你須要爲你的網站開通CDN服務，以確保在地理位置上離用戶最近的服務器能夠優先爲用戶提供服務。提供CDN服務的廠商不少，並且價格並不昂貴，不少雲服務商好比阿里雲、百度雲都有提供這方面的服務。chrome

Enable gzip compression

這一項主要是檢查你的nginx服務器是否設置了gzip壓縮傳輸的方式。打開你的Chrome開發者工具，檢查Network標籤裏每個請求的Response header，看一下是否有content-encoding: gzip，若是沒有，說明你的網站沒有設置gzip傳輸。json

解決方案：參照個人這篇文章《個人nginx鍋爐片》設置。

Add Expires headers

這一項也是不少網站缺失的配置，因爲沒有給jpg圖片以及css和js設置合適的過時時間，致使每次訪問網站都須要從新從網站讀取內容，這是不少網站訪問速度慢的緣由。設置方式：一樣，參照上一節所提到的文章。

解決方案：參照個人這篇文章《個人nginx鍋爐片》設置。

圖片大小

不少狀況下，或者是出於無知，或者是出於偷懶，工程師們傾向於把一張大圖用css方式縮小，例如這樣：width: 100px; height: 50px;。致使的結果是這張圖片在網頁上看起來彷佛圖片縮小了，但實際上文件尺寸並無變小。這也是不少網站變慢的主因。

解決方法：參照個人這篇文章《用imgproxy自動縮放圖片》設置。

雪碧圖

若是你的頁面中有不少小圖標的時候，最糟糕的做法莫過於把它們所有切成小碎的jpg或者png，這樣會使你的頁面在加載時向服務器端發送不少次http請求，而每一次請求都有獨立的創建鏈接、傳輸數據、斷開鏈接的過程，很是浪費資源。

解決方案：若是可能的話，把這些圖標作成獨立的圖標字體文件。若是不行，則把它們壓縮成雪碧圖。

壓縮js和css

一般狀況下，你剛剛寫完的js是下圖中左邊這種樣子的，而一般大公司網站的代碼是圖中右邊這樣的。

左邊的代碼人類閱讀沒有什麼問題，可是你不該該把它們就這樣在網絡中傳輸。第一，浪費流量；第二，你能讀得懂，你的友商也能讀得懂，不利於安全。

解決方案：你應該把你的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文件是這樣的：

{
  "name": "日新亭",
  "short_name": "日新亭",
  "description": "苟日新，日日新，又日新",
  "start_url": "/index.html",
  "orientation": "any",
  "icons": [{
    "src": "/assets/img/icons/android-chrome-512x512.png",
    "sizes": "512x512",
    "type": "image/png"
  }, {
    "src": "/assets/img/icons/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "theme_color": "#000000",
  "background_color": "#000000",
  "display": "standalone"
}

關於favicon圖片尺寸的選擇

因爲各類設備各類操做系統各類瀏覽器的差別，連一個最簡單的favicon圖片的選擇都成了難題，每家廠商有描述各不相同，即便同一家廠商，也在各個不一樣的版本有不一樣的要求，好比Google Chrome在37版本之前要求196x196，37版本之後又要求192x192，而Apple官網又要求你提供至少4種尺寸：180x180, 167x167, 152x152, 120x120，Google TV要求96x96, 任務欄要求32x32，普通瀏覽器要求16x16，還不包括Windows桌面各類大中小型圖標的要求。面對如此紛繁複雜的要求，到底應該怎麼辦呢？一種方法是找個工具網站幫你解決這個難題，我推薦的網站是這裏，由於做者對各類設備的favicon作過專門的研究；另外一種作法是爲簡單起見，按個人模板來，只須要作6種圖標就可覆蓋大部分設備，Apple只須要一種180x180，由於小設備會自動縮小，另外2種512x512和192x192是爲Google準備的，還有3種適應普通瀏覽器。

製做好圖標文件以後，在你的html頭部指定manifest.json文件的路徑，指定頁面的theme-color主題色，而且注意設定的主題顏色必須和頁面中的顏色相一致，而後指定圖標：

<!-- Favicon -->
    <link rel="icon" type="image/png" href="/assets/img/icons/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/assets/img/icons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/assets/img/icons/favicon-96x96.png" sizes="96x96">

    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" href="/assets/img/icons/apple-touch-icon.png" />

    <link rel="manifest" href="/manifest.json">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="{{ site.title }}">

    <!-- Android Lolipop Theme Color -->
    <meta name="theme-color" content="{{ page.color }}">

serviceworker.js

在你的主頁面當中增長如下代碼用來判斷瀏覽器是否支持ServiceWorker，若是支持的話，加載ServiceWorker文件：

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js');
  };

而後在根目錄下增長一個serviceworker.js的文件：

var cacheName = 'fengerzh';
var filesToCache = [
  '/',
  '/index.html',
  '/assets/js/main.js',
  '/assets/css/main.css',
  '/assets/img/placeholder.png',
  '/assets/img/icons/preloader.svg',
  '/assets/img/icons/read.svg',
];

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

self.addEventListener('activate', function(e) {
  e.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (key !== cacheName) {
          return caches.delete(key);
        }
      }));
    })
  );
  return self.clients.claim();
});

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

把指定的文件保存在緩存中，這樣下次若是網絡不通的話，瀏覽器會從緩存中取文件，而不會出現網絡不通的畫面。建好了ServiceWorker文件的頁面，會在Chrome工具欄裏看到這樣的效果：

同時，完成了PWA效果的網站，可讓用戶在手機中直接安裝，好比：

而後，就會在用戶的主屏幕上生成一個帶有你設定的圖標的應用：

點擊圖標打開應用，會來到一個沒有任何URL地址欄和工具欄的頁面，使用戶徹底感受不到是在瀏覽網頁：

性能(Performance)

Lighthouse對性能的要求基本和GTMetrix差很少，若是你能在GTMetrix得到高分的話，經過Lighthouse的這一項測試應該不難。惟一多要求的一項是全部圖片都要求是webp格式，可是Safari瀏覽器目前並不支持這種格式，因此若是你把網站上的全部jpg文件改爲webp文件的話會致使你的網站裏的圖片在iPhone上不能顯示。（我目前的網站全面採用了webp格式，不過會在不久的未來全面切換回jpg，主要緣由是iPhone目前還不兼容。）

性能標準共有10項。

可用性(Accessibility)

可用性標準主要是指在製做網頁時必須考慮殘疾人的需求。

可用性標準共有8項。

Elements Use Attributes Correctly

這一項標準的要求之一是：全部圖片必須有alt屬性，這樣若是圖片不能顯示時，也能出現合適的文字。固然還有不少其它要求，你能夠根據Lighthouse給出的建議逐項調整。

Elements Describe Contents Well

這一項標準的要求之一是：全部input輸入框必須有label或者aria-label。以下面這樣：

<input type="text" class="search-field" placeholder="搜索" aria-label="搜索">

Color Contrast Is Satisfactory

這一項標準的要求是全部字體的前景色和背景色的對比度須要足夠強，以便於視力很差的人士可以分辨頁面上的字跡。若是你不知道某兩種顏色的對比度是否足夠，能夠用這個網頁檢測，綠色的Pass表示合格。

有時候這一標準會有誤判，爲了能讓它經過，你可能須要設置額外的background-color屬性，例如(stylus)：

p
            margin 0 0 rem(30px)
            background-color #141414
            color darken(lightGray, 20%)
            font-size rem(17px)
            line-height rem(26px)

最佳實踐(Best Practice)

最佳實踐標準是指一個理想網站所應該達到的最高標準。包括：避免使用Application Cache，避免使用WebSQL，使用Http 2.0，使用https，避免使用document.write，避免使用console.log等等。這些標準看上去很瑣碎，可是每一項標準的提出都有其合理性，應當不遺餘力遵照。