嘿嘿连载网,久久亚洲精品无码菠萝蜜

[轉(zhuǎn)譯]提高網(wǎng)站速度給力網(wǎng)站優(yōu)化

時間：2015-04-13 13:34:35　瀏覽：2549次

網(wǎng)站打開速度直接關(guān)系到網(wǎng)站的用戶體驗，之前在互聯(lián)網(wǎng)八秒鐘原則中我們講過關(guān)于網(wǎng)速對優(yōu)化的重要性。為了更好的做好網(wǎng)站優(yōu)化工作，提高網(wǎng)站速度是非常重要的。今天筆者小丹要分享的該篇文章就是告訴大家通過一些優(yōu)化技術(shù)可以有效的提高網(wǎng)站速度。大家不妨一起來學(xué)習(xí)一下吧！

首先，做好優(yōu)化HTML結(jié)構(gòu)是提高網(wǎng)站速度必須。

1、引用JavaScript和CSS文件底部；

2、處理了無樣式的flash內(nèi)容（FOUC）；

3、內(nèi)聯(lián)CSS和JavaScript；

4、服務(wù)器配置。

然后我們要瀏覽器緩存的緩存情況。

1、文件應(yīng)該被緩存多長時間；

2、如何覆蓋緩存；

3、數(shù)據(jù)壓縮。

在應(yīng)用所有這些優(yōu)化我的網(wǎng)站，我能夠得到一個完美的（100/100）PageSpeed見解分數(shù)為移動和桌面web性能的分析。

第一，優(yōu)化網(wǎng)站HTML結(jié)構(gòu)

很長一段時間，我們以為外部CSS和JavaScript引用應(yīng)該在<head>頭部標簽。開始時引用JS和CSS資源等等HTML文檔的意義，因為我需要這個東西來設(shè)計網(wǎng)頁外觀和功能正常。但是有script和link網(wǎng)站元素的HTML文檔可以阻止頁面的呈現(xiàn)，這意味著瀏覽器不會處理和顯示任何隨后的HTML元素，直到資源被下載和處理。

很多JavaScript文件，特別是寫聽記住異步編程經(jīng)常是不需要內(nèi)部的引用<head>頭部標簽，可以在HTML文檔加載這樣他們不阻止瀏覽器渲染頁面內(nèi)容。HTML文檔的引用CSS文件末有點棘手，這是因為當(dāng)你加載CSS文件的文檔，用戶可能會看到頁面內(nèi)容沒有任何風(fēng)格，因為外部樣式表中的樣式規(guī)則還沒有被加載并處理。這種情況被稱為flash了無樣式內(nèi)容（FOUC）。

1、引用JavaScript和CSS文件底部。每當(dāng)有可能的話，我們應(yīng)該引用外部資源底部的文檔，就在關(guān)閉之前body標簽。

2、處理了無樣式的Flash內(nèi)容。FOUC地址，給我所做的一切body元素內(nèi)聯(lián)樣式屬性的0%的不透明度。

然后，在外部樣式表我重置body元素回到100%的不透明度。

body { opacity: 1 !important; }

外部樣式表已經(jīng)加載和處理時，將顯示的內(nèi)容。這種方法的問題是如果有一個服務(wù)器故障，防止CSS文件被下載，用戶就會看到一個空白頁，因為內(nèi)聯(lián)樣式屬性的body元素。

3、內(nèi)聯(lián)CSS和JavaScript。您還可以包括CSS樣式規(guī)則<style>在標簽和JS腳本<script>標簽在你的HTML文檔。這提高了頁面速度，因為瀏覽器不需要請求和下載外部資源呈現(xiàn)web頁面。然而，這是只適合少量的CSS和javascript。否則HTML文檔將增加文件大小和JS和CSS不會從瀏覽器緩存中獲益。

多年來，我們不內(nèi)聯(lián)CSS和javascript因為它使我們更難模塊化項目、規(guī)模和維護。然而，現(xiàn)在有許多構(gòu)建工具可以處理這些問題?，F(xiàn)在推薦你內(nèi)聯(lián)CSS和javascript渲染所必須折疊線上面內(nèi)容等提高感知到的頁面性能。在下面的一個腳本中，該腳本內(nèi)聯(lián)樣式規(guī)則從外部樣式表??這是基于一個例子PageSpeed見解文檔中找到。這種方法內(nèi)聯(lián)CSS樣式規(guī)則的問題是你的樣式規(guī)則不會呈現(xiàn)如果用戶已禁用JavaScript。

    <html>
        <head> ... </head>
      <body> ...
        <script>
          var cb = function() {
            var l = document.createElement('link'); l.rel = 'stylesheet';
            l.href = 'css/semeano.min.css';
            var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
          };
          var raf = requestAnimationFrame || mozRequestAnimationFrame ||
            webkitRequestAnimationFrame || msRequestAnimationFrame;
          if (raf) raf(cb);
          else window.addEventListener('load', cb);
        </script>
       </body>
    </html>

4、服務(wù)器配置。如果你有訪問你的服務(wù)器配置，有幾件事你可以做什么來提高網(wǎng)站速度：瀏覽器緩存和數(shù)據(jù)壓縮。

第二，瀏覽器緩存

允許站點文件（外部樣式表、JavaScript文件、圖片等）。由瀏覽器緩存意味著文件不需要聽每次下載站點上的一個web頁面請求的用戶。這可以加快用戶的體驗當(dāng)導(dǎo)航到另一個web頁面，因為諸如你的樣式表和web字體不需要再次下載，因為他們已經(jīng)存儲在用戶的瀏覽器緩存。那么，我們?nèi)绾巫尀g覽器緩存文件呢？

當(dāng)瀏覽器請求一個文件從我們的web服務(wù)器，服務(wù)器將做的事情之一是把這些文件的HTTP標題的HTTP頭文件包含元數(shù)據(jù)被請求的文件以及方向瀏覽器如何對待該文件。一個標準的HTTP頭字段，我們可以指定cache - control。

Cache-Control允許我們定義如何我們希望瀏覽器緩存文件。我們可以使用Cache-Control頭字段告訴瀏覽器是否緩存文件，以及多長時間應(yīng)該緩存文件。事實證明，在網(wǎng)站中沒有一個Cache-ControlSVG文件的HTTP頭字段。使用lighttpd模塊在我的服務(wù)器，所以我打開它的配置文件（lighttpd.conf）并添加以下行來設(shè)置max-age1個月的指令。

expire.url = ( "/svg/" => "access plus 1 months" )

重新啟動web服務(wù)器之后，使用Chrome DevToolsSVG文件檢查，以確保我的配置按計劃進行。

這這張圖中你可以看到在DevTools，移的標題標簽Cache-Control場現(xiàn)在指定一個max-age指令。順便說一下，max-age以秒為單位指定。2592000秒= 30天。

Cache-Control: max-age=2592000

1、文件應(yīng)該被緩存多長時間呢？沒有特定的規(guī)則時到底多久你的文件應(yīng)該被緩存，但最佳實踐是緩存他們盡可能長時間。緩存時間取決于你怎么經(jīng)常更新你的網(wǎng)站文件和文件緩存的類型。例如，你可以設(shè)定一個時間max-age等文件，不要經(jīng)常變化—網(wǎng)站的標志、JS文件和CSS文件。下表中數(shù)據(jù)僅供參考，HTML5 Boilerplate這些緩存時間：

2、覆蓋瀏覽器緩存。如果聽我們更新資源緩存到期之前，我們將需要一種方法來迫使瀏覽器重新下載資源。有很多方法可以處理這種情況。一個簡單的方法就是改變資源的名稱和更新我們的引用它。例如，如果我們更新一個文件styles.css，我們可以重命名它為styles.v2.css。您可以使用gulp-rev-all重命名資源時的改變因為這樣做手工不是可伸縮。然后，我們還需要更新我們的HTML鏈接引用styles.css現(xiàn)在指向聽styles.v2.css。這樣做通常是與服務(wù)器端腳本（比如PHP）和/或與你的CMS模板文件，以便更新傳播在整個網(wǎng)站。或者，您可以使用gulp-rev-replace包。

3、數(shù)據(jù)壓縮。壓縮文件允許瀏覽器下載得更快。當(dāng)瀏覽器請求頁面資源從您的服務(wù)器，服務(wù)器將告訴瀏覽器，被壓縮的資源。瀏覽器將下載的資源，然后解壓縮它。一個最常用GZip壓縮器在網(wǎng)站數(shù)據(jù)。在Apache上啟用GZip，對于Apache web服務(wù)器，您可以添加GZip壓縮指令在你.htaccess文件。下面的指令可以說明哪些文件應(yīng)該被壓縮和哪些不該。這些指令才會進行mod_gzip你的服務(wù)器上安裝并啟用。

    <ifModule mod_gzip.c>
      mod_gzip_on Yes
      mod_gzip_dechunk Yes
      mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
      mod_gzip_item_include handler ^cgi-script$
      mod_gzip_item_include mime ^text/.*
      mod_gzip_item_include mime ^application/x-javascript.*
      mod_gzip_item_exclude mime ^image/.*
      mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </ifModule>

或者，您可以使用Apache的mod_deflate模塊。

啟用GZip在nginx。如果你在nginx服務(wù)器上，下面是GZip壓縮的數(shù)據(jù)指令，可以放置在您的服務(wù)器的配置文件。

    gzip on;
    gzip_comp_level 2;
    gzip_http_version 1.0;
    gzip_proxied any;
    gzip_min_length 1100;
    gzip_buffers 16 8k;
    gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/    javascript;
    # Disable for IE < 6 because there are some known problems gzip_disable "MSIE [1-6].(?!.*SV1)";
    # Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6 gzip_vary on;

如果你使用nginx lighttpd：

    # Add mod_compress to your modules
    server.modules = ( ... "mod_compress", ... )
    compress.allowed-encodings = ("gzip", "deflate")
    compress.filetype = ("text/plain", "text/html", "text/javascript", "text/css", "text/xml")
    # Don't forget to create a cache directory and add the path here
    compress.cache-dir = "<your cache directory>"

在例子中web服務(wù)器啟用gzip壓縮，但它不是壓縮SVG文件，所以我不得不將其添加到服務(wù)器應(yīng)該壓縮文件類型列表。

compress.filetype = ( ..., "image/svg+xml")

這里要注意的是，別忘了任何更改后重新啟動web服務(wù)器配置文件。

檢查GZip壓縮。驗證GZip壓縮實際上是工作在SVG文件，我使用Chrome DevTools。

在數(shù)據(jù)壓縮：