提升網站加載速度的一些小技巧

時間 2019-11-17

原文原文鏈接

翻譯：瘋狂的技術宅javascript

原文：likegeeks.com/improve-web…php

爲你網站的用戶留下良好的第一印象是很是必要的。隨着商業領域的競爭，擁有一個吸引人的網站能夠幫助你脫穎而出。研究代表，若是加載時間超過3秒，會有 40％的用戶放棄訪問你的網站（www.optimumsystemsonline.com/business-su…css

若是開發人員急於瀏覽網站的編碼部分，問題的發生只是時間問題。各類各樣的編碼錯誤可能會致使網站加載速度很是慢，從而用戶離開的網站。在頁面加載時間與跳出率的爭論中，你能夠清楚地看到加載速度較慢的網站的參與率較低。html

同時提升網站加載速度也是提升網站排名的必要步驟之一。如下是避免頁面加載速度緩慢時須要考慮的一些事項。前端

爲你的頁面元素選擇正確的加載順序

你的頁面中 <head> 部分中的全部元素都須要以正確的方式預加載。用戶在你的網站上看到任何內容以前，全部這些元素都必須按順序加載。在 <head> 部分中使用 JavaScript 會致使頁面在嘗試呈現信息時變慢。java

若是沒有對頁面加載元素的順序進行優化，那麼用戶可能會在加載過程當中看到白屏。經過優化頁面加載元素，能夠大大的加快頁面加載的速度。雖然優化頁面加載元素很是耗時，但這種付出仍是很值得的。node

服務器性能可能會致使頁面加載問題

只要有人點擊你的網站，它就會激活從服務器開始的一系列事件。瀏覽器所作的最重要的一件事就是向你的服務器發送請求。程序員

若是服務器響應緩慢，就會致使頁面加載問題，因此你必須排除網絡故障。若是這類問題常常發生，你可能須要從新尋找其餘 Web 服務商，要考慮它能爲你的網站提供多少速度，即便你須要爲可靠的網絡主機支付更多費用。web

優化代碼很重要

壓縮 JavaScript 代碼也是解決頁面加載速度緩慢問題的好方法。使用代碼壓縮工具，你能夠擺脫逗號、註釋甚至不須要的空格。使用 Google Closure Compiler 等程序是不錯的選擇。瀏覽器

優化以前：

function test(node) { 
    var parent = node.parentNode;
    
    if (0) {
        alert( "Hello Everybody" );
    } else {
        alert( "We love Websites" );
    }
    return;
    alert( 1 );
}
複製代碼

優化後：

function test(){alert("We love Websites")}
複製代碼

正如你所看到的，優化工具刪除不會用到的變量，還刪掉了死代碼。

優化服務器端代碼一樣很是重要，就像咱們在處理大文件一文中看到的那樣，而不會損失性能。

瞭解延遲和異步標記

JavaScript 中最經常使用的同步加載機制之一是異步加載。基本上此機制可確保你的網站以多流方式加載。

在使用瀏覽器找到一串如 <script src =「some.js"> </ script> 的代碼後，將當即中止建立 CSSOM 和 DOM 模型。因此將 JavaScript 代碼放在主 HTML 代碼以後能夠加快頁面加載速度。

此代碼可以讓你更好地理解異步標記的功能：

<html>
    <head>
        <script src="big.js"></script>
    </head>
	<body>
複製代碼

在加載 big.js 以前，下面的代碼不會處理。

</body>
</html>
複製代碼

向此代碼添加 async 標記可確保當即建立 DOM 模型，而且不會干擾正確加載和執行的 JavaScript。如下是正確使用 async 標記的示例。

<html>
    <head>
        <script src="big.js" async></script>
    </head>
	<body>
複製代碼

這段代碼會被處理，而且不依賴於big.js加載進度。

</body>
</html>
複製代碼

須要注意的是，若是你的 JavaScript 必須進行 HTML 或 CSS 操做，則使用 sync 標記可能不是最好的方法。必須以強制的順序加載腳本時，應避免使用 sync 標記。

注意複雜的文件格式和大圖像

雖然編碼錯誤是頁面加載速度緩慢的主要緣由之一，但大圖像和複雜文件格式等也會致使問題。一旦你使用的服務器被瀏覽器請求，它會開始將須要的每一個字節都加載到用戶的移動設備或計算機上。

若是你有許多大圖像，那麼加載它們須要更長的時間。這就是你須要使用文件壓縮軟件和插件的緣由。雖然壓縮這些圖像的大小可能會有所幫助，但在某些狀況下，你可能須要刪除一些圖像。

未使用的 .JS 庫組件

許多開發人員按原樣使用 jQuery UI 之類的庫，而根本不去優化它。這樣作可能會致使你根本不須要的代碼組件。若是能夠選擇從 JavaScript 庫中排除哪些組件，那麼你必定要抓住這個機會。經過修改這些庫中的代碼，能夠爲用戶提供更好的體驗並加快你的網站速度。

使用 GZIP 模塊是理想的選擇

雖然 gzip 是一個相對古老的發明，但在加快網站加載速度時絕對值得使用。這個程序可以壓縮 Web 服務器上的文件大小，甚至能夠將一些靜態文件壓縮到原始大小的 99％。

因爲 JavaScript 被視爲文本文件，所以能夠經過用 gzip 壓縮來減小頁面加載所需的時間。

使用 Node.js 對文件壓縮也是一個好主意。如下是進行設置的方法：

const zlib = require('zlib');

你能夠經過如下幾種方式使用：

const gzip = zlib.createGzip();
 
const fs = require('fs');
 
const inp = fs.createReadStream('input.txt');
 
const out = fs.createWriteStream('input.txt.gz');
 
inp.pipe(gzip).pipe(out);
複製代碼

在gzip的幫助下，你能夠找到並消除代碼中的重複元素。這些重複的元素也能夠用歸檔字典中的小符號進行替換。剩下的最終代碼將不會那麼笨重，而且徹底針對性能進行了優化。

Be Aware of Code Density

意識到代碼密度

當你的網站中包含大而密集的元素時只會減慢它的速度。像 Facebook 這樣的大型網站擁有超過 6000 萬行代碼。雖然你的站點沒有這麼多代碼，但仍是須要找到優化代碼的方法，以確保可以快速加載。

不斷審查本身的代碼並對其進行優化是避免問題的惟一方法。從長遠來看，在代碼優化方面投入的時間和精力確定會獲得回報。

處理太多文件請求

每次新用戶訪問時，你網站上的每一個 CSS 文件、社交分享按鈕和 JavaScript 元素都會生成一個新的文件請求。即便是最強大和最可靠的服務器也只能在處理這麼多請求時開始減速。

你須要考慮的是刪除頁面上的某些文件請求，而不是試圖弄清楚如何提升服務器的速度。

聽任此此問題會致使在吸引用戶訪問你網站時遇到不少問題。你的主要目標應該是盡一切可能加速你的網站，並讓人們輕鬆瀏覽它。

避免使用太多插件

即便你使用 WordPress 網站，在頁面加載速度方面也可能會遇到問題。大多數企業主使用 WordPress 模板，由於它能夠與他們的新網站一塊兒運行。可是，你一般還須要使用許多不一樣的插件來使網站具備更多功能。

這些插件多是有用的，可是有太多插件會產生問題。若是有插件太多又試圖同時運行，那麼它將大大減慢你的網站速度。

客觀地看待正在使用的插件能夠幫助你找出哪些插件是能夠不用的。減小插件的數量將使你的 WordPress 網站更快。

適當的用 CSS3 效果而不是 JavaScript

一些程序員沒有意識到 CSS 的新版本能夠比以舊版本作得更多。在過去 CSS 1.0 和 2.0 須要大量的 JavaScript 輔助才能實現高級樣式效果。可是用 CSS3 不只能夠爲你提供更大的靈活性，還能夠下降你的 CPU 使用率。

下面是一些代碼，你能夠用 CSS3 實現滑塊效果而無需使用 JavaScript：

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS Slider</title>
    </head>
    <body>
        <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
        <div id="slider">
            <figure>
                <img src="austin-fireworks.jpg" alt>
                <img src="taj-mahal_copy.jpg" alt>
                <img src="ibiza.jpg" alt>
                <img src="ankor-wat.jpg" alt>
                <img src="austin-fireworks.jpg" alt>
            </figure>
        </div>
    </body>
</html>
複製代碼

CSS

@keyframes slidy { 
    0% { left: 0%; }
    20% { left: 0%; }
    25% { left: -100%; }
    45% { left: -100%; }
    50% { left: -200%; }
    70% { left: -200%; }
    75% { left: -300%; }
    95% { left: -300%; }
    100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0
    text-align: left;
    font-size: 0;
    animation: 30s slidy infinite;
}
複製代碼