国产三级小视频在线观看,国产oo后高中生在线视频观看,免费无码av片在线观看播放

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

時(shí)間：2015-04-13 13:34:35　瀏覽：2332次

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

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

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

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

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

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

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

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

2、如何覆蓋緩存；

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

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

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

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

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

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

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

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

body { opacity: 1 !important; }

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

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

多年來(lái)，我們不內(nèi)聯(lián)CSS和javascript因?yàn)樗刮覀兏y模塊化項(xiàng)目、規(guī)模和維護(hù)。然而，現(xiàn)在有許多構(gòu)建工具可以處理這些問題。現(xiàn)在推薦你內(nèi)聯(lián)CSS和javascript渲染所必須折疊線上面內(nèi)容等提高感知到的頁(yè)面性能。在下面的一個(gè)腳本中，該腳本內(nèi)聯(lián)樣式規(guī)則從外部樣式表??這是基于一個(gè)例子PageSpeed見解文檔中找到。這種方法內(nèi)聯(lián)CSS樣式規(guī)則的問題是你的樣式規(guī)則不會(huì)呈現(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ù)器配置，有幾件事你可以做什么來(lái)提高網(wǎng)站速度：瀏覽器緩存和數(shù)據(jù)壓縮。

第二，瀏覽器緩存

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

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

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

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

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

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

Cache-Control: max-age=2592000

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

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

3、數(shù)據(jù)壓縮。壓縮文件允許瀏覽器下載得更快。當(dāng)瀏覽器請(qǐng)求頁(yè)面資源從您的服務(wù)器，服務(wù)器將告訴瀏覽器，被壓縮的資源。瀏覽器將下載的資源，然后解壓縮它。一個(gè)最常用GZip壓縮器在網(wǎng)站數(shù)據(jù)。在Apache上啟用GZip，對(duì)于Apache web服務(wù)器，您可以添加GZip壓縮指令在你.htaccess文件。下面的指令可以說(shuō)明哪些文件應(yīng)該被壓縮和哪些不該。這些指令才會(huì)進(jìn)行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")

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

檢查GZip壓縮。驗(yàn)證GZip壓縮實(shí)際上是工作在SVG文件，我使用Chrome DevTools。

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