提供更快的網頁加載速度不只能提高用戶體驗,更是今日網站 SEO 優化的關鍵重點之一。
本文深入探討了各種網頁加速技巧幫助您加快網頁載入速度,提高性能,包括利用快取技術減少請求等待時間、使用圖片優化技巧來縮小圖片文件大小、懶加載加速畫面載入、壓縮數據以節省帶寬、實現附載平衡以提高伺服器效能、使用異步處理來減少阻塞,以及有效管理數據庫連接池以提高查詢效率。
瀏覽器快取是一個用於存儲網頁資源的臨時性存儲區域,旨在提高網站性能和減少用戶等待時間。當您訪問一個網站時,瀏覽器會下載網頁的各種資源,例如 HTML、CSS、JavaScript、圖片等。這些資源通常包括在 HTTP 請求中,從伺服器獲取。
如何利用瀏覽器快取來提高網站性能。當您訪問一個網站時,瀏覽器可以將某些資源存儲在本地,這樣下次訪問相同頁面時就不需要再次下載這些資源了。
瀏覽器會根據 HTTP 標頭中的快取控制訊息來判斷何時使用快取。這些標頭包括:
當瀏覽器需要一個資源,它會檢查快取中是否已經存在該資源的副本。如果存在並且未過期,瀏覽器將直接使用快取的版本,而不重新請求伺服器。只有在以下情況下,瀏覽器將重新請求資源:
瀏覽器快取是一個優化工具,它通過存儲和重複使用網站資源,提高了網站載入速度,但需要仔細配置以確保資源的有效性和更新。
快取就像是我們放在工作桌旁的點心箱(瀏覽器快取),在我們想吃的時候可以直接使用(讀取快取),而不必再起身去超商補貨。圖片是網站中常見的大型資源,我們可以通過壓縮和使用現代格式來減小它們的大小,提高頁面載入速度。
壓縮圖片是減小圖片文件大小的關鍵。您可以使用多種工具來執行此操作,例如:
使用 HTML 的 loading 屬性: 懶加載可以使網頁僅在用戶捲動到圖片時才載入圖片。這可通過 HTML 的 loading 屬性來實現。例如:
- <img src="placeholder.jpg" data-src="image.jpg" loading="lazy" alt="描述">
使用 data-src
屬性輸入的 URL,loading="lazy"
表示使用懶加載。
使用 JavaScript 函數: 如果需要更多控制,您可以使用 JavaScript 函數來實現懶加載。以下是一個簡單的範例,使用 JavaScript 檢測圖片是否出現在視窗中,如果是,則將 src
屬性中的圖片 URL 設置為 data-src
的值:
- const ary = document.querySelectorAll("img[lazyload='lazy']");
- const observer = new IntersectionObserver((entries, observer) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- const img = entry.target;
- img.src = img.dataset.src;
- observer.unobserve(img);
- };
- });
- }, {
- root: null,
- rootMargin: "0px",
- threshold: 0.5, // 當圖片的 50% 出現在視口中時載入
- });
- ary.forEach((img) => {
- observer.observe(img);
- });
懶加載就像是我們在吃到飽餐廳中,需要吃什麼(進入畫面中)才點什麼(載入數據)。
最小化和合併 CSS 和 JavaScript 可以減少HTTP請求並改進性能。
優化 CSS 是提高網頁性能的關鍵之一。以下是一些優化 CSS 的方法和具體代碼範例:
減少HTTP請求次數是一個重要的目標,所以您可以將多個CSS文件合併成一個,以減少請求數。
- <link rel="stylesheet" href="styles.css">
利用工具壓縮 CSS 文件,例如CSSNano、UglifyCSS,去除不必要的空格、註釋和無用代碼。
- /* 未壓縮 */
- body {
- background-color: #ffffff;
- font-family: Arial, sans-serif;
- }
- /* 壓縮 */
- body{background-color:#fff;font-family:Arial,sans-serif;}
JavaScript 優化可以提高網頁性能和反應速度。以下是一些優化 JavaScript 的方法和具體代碼範例:
合併多個 JavaScript 文件並壓縮它們,以減少請求次數和文件大小。
- <script src="index.js"></script>
使用 async
或 defer
屬性,將不必要的 JavaScript 代碼推遲載入,以改善頁面載入性能。
- <!-- 異步 -->
- <script src="script.js" async></script>
- <!-- 推遲 -->
- <script src="script.js" defer></script>
優化 DOM 操作是提高網頁性能的重要一環。DOM 操作觸發了瀏覽器的回流(reflow)和重繪(repaint),這些操作需要大量的計算資源。以下是一些優化 DOM 操作的技巧:
- const fragment = document.createDocumentFragment();
- const elm1 = document.createElement('div');
- elm1.innerText = '元素1';
- fragment.appendChild(elm1);
- const elm2 = document.createElement('div');
- elm2.innerText = '元素2';
- fragment.appendChild(elm2);
- [TARGET].appendChild(fragment);
- const elm = document.getElementById('target');
- const elmW = element.clientWidth;
- const elmH = element.clientHeight;
- // 資料都讀取完後,在進行寫入動作
- elm.style.width = elmW + 100 + "px";
- elm.style.height = elmH <= 80 ? '5rem' : elmH;
requestAnimationFrame
來執行它們。這將確保 DOM 操作在繪製之前進行,從而減少回流和重繪的次數。- // 封裝 DOM
- function updateDOM() {
- const elm = document.getElementById('target');
- elm.style.width = '10rem';
- elm.style.height = '5rem';
- };
- // 使用 requestAnimationFrame 調用函數:
- requestAnimationFrame(updateDOM);
- div {
- width: 20rem;
- height: 10rem;
- }
- div.new {
- width: 10rem;
- height: 5rem;
- }
- const elm = document.getElementById('target');
- elm.classList.add('new');
將事件監聽器添加到父元素,以減少事件處理程序的數量。
現在,讓我們深入研究壓縮技術,如 Gzip 和 Brotli。它們可以幫助我們節省帶寬並提高載入速度。打開 Nginx 的配置文件,通常位於 /etc/nginx/nginx.conf
或 /etc/nginx/sites-available/default
。在 http
區塊中,添加以下配置:
以下是如何在 Nginx 伺服器上配置 Gzip 壓縮的範例:
- http {
- gzip on;
- gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
- gzip_min_length 1000;
- gzip_proxied any;
- gzip_vary on;
- gzip_disable "MSIE [1-6]\.";
- }
以下是如何在 Nginx 伺服器上配置 Brotli 壓縮的範例:
- http {
- brotli on;
- brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
- brotli_comp_level 6;
- brotli_buffers 16 8k;
- brotli_min_length 1000;
- }
- sudo service nginx restart
壓縮就像是我們將客戶網路所購買的東西,盡可能的塞入最小的紙箱(最小化數據)中後寄出,以節省運輸費用(流量)。
附載平衡是一種分散網路流量的技術,它將傳入的請求分發到多個伺服器,以確保高可用性、性能優化和數據處理能力擴展。這有助於避免單點故障,提供更好的用戶體驗,以及有效地處理大量的請求。以下是一個使用 Nginx 實現附載平衡的範例:
- http {
- # 請確保將伺服器的 IP 位置和 port 替換為您自己的伺服器設置。
- upstream servers {
- server 10.10.10.101:80; # 伺服器1: 80 port
- server 10.10.10.102:80; # 伺服器2: 80 port
- server 10.10.10.103:80; # 伺服器3: 80 port
- }
- server {
- listen 80;
- server_name yourdomain.com;
- location / {
- proxy_pass http://servers;
- proxy_set_header Host $host;
- proxy_set_header X-Real-IP $remote_addr;
- }
- }
- }
它將傳入的請求分發到三個後端伺服器,以平衡流量和提高可用性。這樣,您的網站可以更好地應對高流量和故障情況,提供更好的用戶體驗。
附載平衡就像是直接提供多台販賣機,來確保儘管一群人使用時,排隊(等候)時間也會縮短。異步處理是一種用於處理可能需要等待時間的任務。當執行異步任務時,代碼將繼續運行,而不必等待任務完成。這有助於避免阻塞應用程序,提高用戶體驗。
以下是一個使用 Node.js 中的 async 套件來處理異步任務的範例。async 套件提供了多個實用的函數,用於處理異步操作,特別是當您需要按特定順序執行它們時。
- const async = require('async'); // 需要安裝 async 套件
- // 同時處理 task1、task2 的任務
- async.auto({
- task1: (next) => {
- // 模擬讀取資料,1 秒後完成
- setTimeout(() => {
- next(null, '任務1 完成');
- }, 1000);
- },
- task2: (next) => {
- // 模擬讀取資料,2 秒後完成
- setTimeout(() => {
- next(null, '任務2 完成');
- }, 2000);
- }
- }, (err, results) => {
- // task1、task2 皆完成,則進行以下動作
- if (err) return console.error('Error:', err);
- console.log('任務皆完成');
- });
異步處理就像是我們在煮泡麵時,不需要等水滾了再打開泡麵,而是在加熱水的過程當中,我們就可以先把調味包加到碗裡。連接到數據庫的過程通常是一個耗時的操作,並且在每次查詢後關閉連接可能會浪費資源。而連接池有助於提高應用程序的效能,減少資源浪費。以下是一個簡單的連接池使用示例,以數據庫連接為例:
- const mysql = require('mysql'); // 需要安裝 mysql 套件
- const db = mysql.createPool({
- connectionLimit: 10,
- host: 'localhost',
- user: 'your_username',
- password: 'your_password',
- database: 'your_database',
- });
- function query(queryText) {
- return new Promise((resolve, reject) => {
- db.getConnection((err, connection) => {
- if (err) return reject(err);
- connection.query(queryText, (queryErr, results) => {
- connection.release();
- if (queryErr) return reject(queryError);
- resolve(results);
- });
- });
- });
- };
- // 使用連接池查詢數據
- query('SELECT * FROM your_table')
- .then((results) => {
- console.log('Success:', results);
- })
- .catch((error) => {
- console.error('Error:', error);
- });
CDN 是「內容傳遞網絡」(Content Delivery Network)的縮寫。它是一個分佈式網絡基礎架構,用於提供高效、快速和可靠的內容傳遞服務。CDN 的目標是優化內容傳遞,減少網絡擁塞,降低載入時間,提高用戶體驗。
當您使用這些工具來優化網站時,測試和性能監控是關鍵的一部分。以下是一些實際的測試工具,以及如何使用它們來評估您的網站性能:
Chrome 瀏覽器的內置工具,提供實時性能分析,包括記憶體使用情況、CPU 使用情況和事件時間軸。這有助於識別網站中的性能問題並進行改進。
測試結果通常包括指標,如首次內容渲染時間、加載時間、資源大小和數量,以及建議的改進措施。通過定期使用這些工具進行性能測試,您可以追蹤網站的性能變化,識別瓶頸,並採取必要的措施來優化您的網站,提供更好的用戶體驗。
為您的網站提供性能評分,並列出改進建議。該工具還會顯示用戶體驗數據,例如首次內容渲染時間和可交互時間。
Chrome 瀏覽器的內置工具,提供關於網站性能、可訪問性、最佳實踐和 SEO 的詳細報告。您可以查看各個項目的得分和建議,以改進網站。
提供詳細的性能報告,包括首次內容渲染時間、加載時間、資源分佈圖和水平線圖。您可以查看不同地點和設備的測試結果。