網頁設計原始碼優化讓網站載入加速技巧

網站的載入速度是一個非常重要的用戶體驗考核標準，當然，影響網站載入速度的原因有很多，比如主機、網路、電腦頻寬、瀏覽器...都有可能，但本文iWare網頁設計小編和大家主要分析的不是外部因素，主要是大家在網站設計過程當中，找出常見的網頁設計技術因素，找出問題，大多問題都能迎刃而解！

一、網頁速度最大關鍵：檔案大小

1、內容檔案大小

搜尋引擎優化網頁加載的最佳 速度：2秒，如何達到這個不可能的任務？首先，網頁內容所包括的文本、產品的圖片、影片、插件、文件...等等。用戶能夠忍受的最長等待時間大約在 6-8秒之間，也這就是說8秒是個臨界值，如果你的網站打開速度在8秒以上，那麽大部分訪客最終都會離你而去。

2、程式內容檔案

要想把網頁做得精彩，必須仰賴程式元件強化視覺效果，但若將所有的程式元件都放在一個頁面上，會顯著影響網站的運行品質。優化的重點是：統計頁面中的每個程式元件，如文字、圖片、ActiveX或Java特效代碼以及HTML文本的大小，盡量將程式檔案大小控制在50K以下。

二、網頁設計優化

網頁優化是指在設計，使用網頁各元素時，能夠盡量減少網頁元素對下載速度所產生的影響。這些細節我們了解後，是能在日常網頁製作中可以進行避免的。

1、讓網頁符合W3C標準

(1)在網頁製作中使用CSS語法取代老舊的HTML語法。這樣做不僅能取代掉垃圾原始碼，例如TABLE就是一個不太合乎當今網頁語法的HTML，使用CSS製作表格不僅簡易而且更顯專業。

(2)讓HTML標記有始有終。不管是我們自己寫或是查看他人的HTML原始碼時，會發現HTML代碼標簽寫得不合乎規範，有的標記有頭無尾，但是並沒有妨礙原始碼的正確執行，這樣做不僅使HTML原始碼格式規範，更可以加速頁面的顯示速度。

2、優化CSS

(1)階層式樣式表CSS是HTML的視覺優化靈魂角色，一個漂亮的網站不可能沒有它。一般來說，我們要合並精減CSS，移除無用多餘原始碼；圖片儘量不要使用CSS的濾鏡來渲染；套用CSS選擇器時儘量使用有目的的樣式為主。

(2)HTML頁面中有多種引用CSS的方法，不同的方法導致的效率也不一樣。通常，我們可以參考標準的語法加以改良，或是參考其他專業人士所分享的開源碼技巧，都有助於CSS優化。

3、優化圖片

圖片可以說是影響網頁開啟速度最大的因素，不管是使用圖片優化工具，還是減小圖片大小。在品質和文件大小之間必須找到一個合適的平衡點。主要有以下幾個需了解的方面。

(1)一般在網頁上使用的圖片主流格式有三種，jpg、png、gif，什麽時候使用什麽格式，並熟悉圖片壓縮軟體，可以減少網頁讀取時間。

(2)圖片的使用顯示。需要顯示圖片時，盡量使用背景讀取，而不是直接加載，預載入下一頁的主要內容。在用戶看到大圖之前先把小圖展開，讓用戶不至於在等待的過程中太焦慮。詳細的技術可以參考Lazy Loading相關技術。

(3)圖片在HTML原始碼裏要標明大小。這樣瀏覽器就能事先留空間，當你在網頁上添加圖片或表格時，預先設定的高度和寬度，也就是參數。近年受到RWD響應式網頁設計的風氣，指定顯示比例比指定高度寬度更為重要。

4、優化腳本程式語言

(1)網頁的特效往往與腳本程式(Script)關係密切，我們經常會在頁面中嵌入多種腳本語言，比如常用到的javascript 與VBScript語言。動態腳本原始碼在使用中也可以進行一定的優化。在網頁中使用同一種腳本語言。然而在一個網頁中使用到多種腳本原始碼時，會拖慢頁面的開啟速度。儘量在頁面中使用單一種腳本語言編寫原始碼。

(2)能用CSS實現效果時，就別用腳本語言。如必須使用動態腳本原始碼時，盡量將原始碼放在其他來源，搜尋引擎是不能讀取腳本語言的。對於搜尋引擎來說原始碼越少越有利於判定網站內容與加速。

(3)可將多個頁面都用到的腳本程式編寫成獨立存在的腳本文件檔案中，然後再在頁面中通過JAVASCRIPT等腳文語言調用，減少web頁面下載時間。