網(wǎng)站設(shè)計(jì)的速度和性能對(duì)于用戶體驗(yàn)非常重要。如果您的網(wǎng)站速度太慢，您不僅會(huì)失去訪問者，還會(huì)失去潛在的客戶。像Google這樣的搜索引擎會(huì)在搜索排名中考慮網(wǎng)站的速度，因此在優(yōu)化網(wǎng)站速度時(shí)，您應(yīng)該考慮所有因素。每毫秒都很重要。

本期深圳網(wǎng)站設(shè)計(jì)公司Angle給大家講解一些用于改善網(wǎng)站性能和速度的常規(guī)網(wǎng)站優(yōu)化技巧。

1、盡可能延遲加載內(nèi)容
Ajax允許我們構(gòu)建可以隨時(shí)異步更新的網(wǎng)頁(yè)。這意味著，當(dāng)用戶執(zhí)行操作時(shí)，與其重新加載整個(gè)頁(yè)面，不如簡(jiǎn)單地更新該頁(yè)面的某些部分。我們可以以圖片庫(kù)為例。圖像文件又大又沉；它們會(huì)降低網(wǎng)頁(yè)的頁(yè)面加載速度。我們可以只顯示圖像的縮略圖，然后當(dāng)用戶單擊它們時(shí)，我們可以異步地從服務(wù)器請(qǐng)求全尺寸圖像并更新頁(yè)面，而不是在用戶首次訪問網(wǎng)頁(yè)時(shí)加載所有圖像。這樣，如果用戶只想看幾張圖片，則不必等待所有圖片下載。這種開發(fā)模式稱為延遲加載。諸如jQuery，Prototype和MooTools之類的Ajax / web開發(fā)庫(kù)可以使延遲的內(nèi)容加載更容易實(shí)現(xiàn)。

2、使用外部JS和CSS文件
當(dāng)用戶首次加載您的網(wǎng)頁(yè)時(shí)，瀏覽器將緩存CSS和JavaScript文件等外部資源。因此，最好將它們放置在外部文件中，而不是內(nèi)聯(lián)JavaScript和CSS文件。使用內(nèi)聯(lián)CSS還會(huì)增加網(wǎng)頁(yè)的呈現(xiàn)時(shí)間。在主CSS文件中定義所有內(nèi)容后，由于瀏覽器已經(jīng)知道需要應(yīng)用的所有樣式規(guī)則，因此在呈現(xiàn)頁(yè)面時(shí)，瀏覽器的工作量減少了。
另外，使用外部JavaScript和CSS文件使站點(diǎn)維護(hù)更加容易，因?yàn)槟恍枰S護(hù)全局文件，而不是分散在多個(gè)網(wǎng)頁(yè)中的代碼。

3、使用緩存系統(tǒng)
如果發(fā)現(xiàn)您的站點(diǎn)正在連接到數(shù)據(jù)庫(kù)以創(chuàng)建相同的內(nèi)容，那么該開始使用緩存系統(tǒng)了。通過使用緩存系統(tǒng)，您的站點(diǎn)只需創(chuàng)建一次內(nèi)容，而不必每次用戶訪問頁(yè)面時(shí)都創(chuàng)建內(nèi)容。不用擔(dān)心，緩存系統(tǒng)會(huì)根據(jù)您的設(shè)置方式定期刷新其緩存-因此，即使是不斷變化的網(wǎng)站設(shè)計(jì)（例如帶有評(píng)論的博客文章）也可以被緩存。

流行的內(nèi)容管理系統(tǒng)（如WordPress和Drupal）將具有靜態(tài)緩存功能，可將動(dòng)態(tài)生成的頁(yè)面轉(zhuǎn)換為靜態(tài)HTML文件，以減少不必要的服務(wù)器處理。對(duì)于WordPress，請(qǐng)查看WP Super Cache（六個(gè)修訂版已安裝的六個(gè)關(guān)鍵WordPress插件之一）。Drupal的核心是頁(yè)面緩存功能。

您還可以在網(wǎng)站服務(wù)器上安裝數(shù)據(jù)庫(kù)緩存和服務(wù)器端腳本緩存系統(tǒng)（如果有能力的話）。例如，PHP具有稱為PHP加速器的擴(kuò)展，可以通過緩存和各種其他方法來優(yōu)化性能。PHP加速器的一個(gè)示例是APC。數(shù)據(jù)庫(kù)緩存通過減少與數(shù)據(jù)庫(kù)讀/寫/訪問過程相關(guān)的工作來提高網(wǎng)站應(yīng)用程序的性能和可伸縮性。例如，memcached緩存常用的數(shù)據(jù)庫(kù)查詢。

4、避免在HTML中調(diào)整圖像大小
如果圖像原本的尺寸為1280x900px，但您需要將其設(shè)置為400x280px，則應(yīng)使用Photoshop之類的圖像編輯器（而不是使用HTML width和height屬性<img width="400" height="280" src="myimage.jpg" />）來調(diào)整圖像的大小并重新保存圖像。這是因?yàn)?，自然地，大圖像的文件大小總是比小圖像的大。與其使用HTML調(diào)整圖像大小，不如使用Photoshop等圖像編輯器調(diào)整其大小，然后將其另存為新文件。

5、停止使用圖像顯示文本

不僅屏幕閱讀器無法訪問圖像中的文本，而且對(duì)于SEO完全沒有用，而且使用圖像顯示文本還會(huì)增加網(wǎng)頁(yè)的加載時(shí)間，因?yàn)楦嗟膱D像意味著網(wǎng)頁(yè)更重。如果您需要在網(wǎng)站中使用大量自定義字體，請(qǐng)了解CSS @ font-face，以更有效地顯示帶有自定義字體的文本。不用說，您必須確定提供字體文件是否比提供圖像更好。

以上就是優(yōu)化網(wǎng)站設(shè)計(jì)速度的五大技巧，希望可以幫助到有需要的設(shè)計(jì)師。本期深圳網(wǎng)站設(shè)計(jì)公司Angle就為大家分享到這里。