為什麼頁面加載速度很重要
用戶期待一個快速的網站 - 但為什麼？
它歸結為用戶體驗控制中的一個基本概念。
作為人類，我們不喜歡失去對環境的任何控制。我們容易受到挫折和分心。
更快的頁面加載速度讓用戶擁有對網站更多的控制權的角度看-他們控制它，而不是它控制他們。
因此，更快的加載速度意味著更快樂，更少受挫的用戶。
（另外，保持您的自然搜索排名健康 - 自2010年以來，Google已將頁面加載速度作為其排名算法中的主要信號。）
作為設計師，我們有時傾向於選擇美麗的設計美學路徑而不是快速頁面加載。
但是當網頁80％的時間用於下載圖像，樣式表和腳本等資源（所有這些都構成我們設計的工具帶）時，改善頁面加載時間和用戶體驗的責任落在我們身上，對嗎？
現在，設計師傾向於採取更全面的方法。
這不僅僅是我們應該關注的資產，以提高整體網站速度，這是整個設計過程。以下是有關如何輕鬆加快網站速度的提示：
＃1：通過了解您的受眾和頁面目標，從頭腦開始
您網頁的目標是什麼？
您希望您的網站訪問者免費試用還是提交電子郵件地址？
加快網站速度的第一步是從最終開始。
在開始模擬視覺效果，壓縮圖像，剪切HTML或編寫腳本之前，重要的是要提前花時間瞭解利益相關者和最終用戶的目標：在下筆之前進行規劃將確保更好的最終結果。
想像這樣的問題：
- 我需要採取什麼行動（試一試：買東西，看博客文章）
- 我需要做的基本要素是什麼？（高質量的圖像等）
我還建議您在競爭對手的網站上花費大量時間。注意他們使用哪些元素來吸引訪問者後採取行動。他們如何讓他們的網頁對迴歸用戶感興趣，又新又清新？
他們很有可能瞭解他們的觀眾，所以不要害怕記筆記。
設計每個頁面時要考慮到最終目標，這將確保您網站每個頁面上的每個元素都能發揮作用和功能。多餘的元素會使您的網站放慢速度，因此通過向觀眾提供完成工作所需的內容來減少任何時間..
＃2：內容是關鍵 - 但也考慮到結構！
信息架構（IA）側重於以有效和可持續的方式組織，構建和標記內容。
IA的目標是幫助您網站的用戶輕鬆快速地查找信息 - 然後完成任務。
好的IA通知內容策略，用戶界面設計，交互設計和前端開發。
花在您的信息架構上的時間最終將意味著更好的結構化內容，設計和代碼，有助於快速有效地加速您的網站。
它甚至可以為您的搜索引擎優化工作做出貢獻 - 谷歌將看到您的優秀IA擁有噸的價值，併為您提供更高的SERP排名。
＃3：使用CSS而不是圖像
CSS（層疊樣式表）是獨立的能力的事情看的方式從他們的意思。
對於大量高質量圖像犧牲頁面加載速度的好消息。電子商務和攝影網站是兩個主要的例子。客戶經常需要大而美麗的圖像和快速響應的網站。（特別是攝影和電子商務網站）
如果您在這些空間中擁有客戶，那麼值得探索CSS，這樣就可以在不需要圖像的情況下創建高質量的視覺效果。您的頁面加載速度更快，性能更好！
注意：將樣式表的大小保持在最小值非常重要 - 加載的內容會更少。
但是，如果您使用圖像，請確保為作業選擇正確的格式：
＃4：優化圖像以加快頁面加載速度
優化圖像時需要考慮以下幾點：
- 圖像越大，加載速度越慢。如果放置圖像的區域最大寬度為300px，則應將圖像裁剪為300像素寬並保存為72DPI。
- 以適當的格式保存圖像。最常見的是：
- GIFS（圖形交換格式）
- JPEG（聯合圖像專家組）
- PNG（便攜式網絡圖形）
- SVG（可縮放矢量圖形）
根據圖像的性質及其使用方式，將決定哪種圖像格式更合適。要加快您的網站速度，請從以下列表中選擇最適合該任務的網站：
GIF將圖像的所有顏色強制為256色調色板，以減小圖像尺寸。這非常適用於不太複雜且顏色範圍有限且簡化的圖像。Gif還支持透明度，但通常可以花一些力氣在邊緣看起來光滑。
JPEG將有損壓縮應用於圖像，這可以顯著減小文件大小，但這可能會降低視覺質量。JPEG格式是壓縮照片的常用選擇。
PNG格式是一種靈活的健壯格式，支持無損數據壓縮。保存為PNG-8格式將允許您以較小的文件大小保存高質量的圖像。PNG-24和PNG-32通過模糊邊緣並使其在透明背景上顯得更加清晰來支持透明度。但是，這通常會導致更大的文件大小。
SVG是一種基於XML的矢量圖像格式。設計師通常會設計一個矢量圖形，如圖標或插圖，並將其保存為SVG，保留其所有矢量信息。圖像大小通常很小，圖像縮放而不會失去清晰度，並支持交互性和動畫。
嘗試為每種格式選擇最佳設置：質量，調色板大小等，您將找到最佳圖像格式，以將頁面加載速度降至最低，並最終加快您的網站速度。
＃5：為移動用戶優化您的設計
移動用戶的目標與桌面用戶不同，通常需要快速，易消化的信息。有這麼多移動用戶在加載網站時遇到問題，這是獲得競爭優勢的一種相對簡單的方法。
這裡有一個快速修復快速清單，使您的移動網站更加用戶友好。
- 消除任何不必要的圖像資產
- 使用CSS3模擬圖形效果
- 考慮將自適應圖像用於較小的設備
- 使用媒體查詢來控制頁面元素的佈局和包含
- 專為移動體驗而設計 - 而不是事後的想法。
如果您知道有關移動優化的更多快速修復，請在評論中告訴我們！
在此之前，通過快速查看代碼，可以加快頁面加載速度...
＃6：通過縮小您的CSS，HTML和JavaScript來縮短您的網站，讓您的代碼精益求精
為了加快您的網站速度，您必須消除代碼中的額外空格，換行符和縮進，這樣您的網頁才能儘可能精簡。
這可以通過使用縮小工具（如YUI Compressor，Google Closure Compiler和cssminifier）壓縮文件來實現。（但始終確保您保留原件以供將來編輯。）
＃7：在jQuery PlugIn 上下手吧！考慮CSS而不是......
你有沒有在一個有很多插件的網站上工作，你不知道哪一個做了什麼？
插件提供的附加功能很棒，但太多可能是網站速度慢的根本原因。
解決方案？再次考慮在有意義的地方使用CSS - 您將獲得與插件相同的效果或功能，但不會出現潛在崩潰和安全風險的麻煩。
刪除任何超出要求的插件，不僅可以降低頁面加載速度，還可以顯著降低運營成本。
＃8：在讓您的網站出現之前運行一些性能測試
你不必每次都失明。在部署之前，有一些很棒的免費工具可以讓您的網站完成任務：
不用花很長時間來評估您網站的整體速度。評估單個頁面，並專注於小修補程序，以幫助加快您的網站。
＃9：明智地選擇你的框架
肯定有一些非常好用的響應式框架。
你會看到很多有很多插件，豐富的CSS，SASS，Javascript和隨時可用的模板......
然而，這種豐富的技術優勢也會影響您網頁的性能，如果您需要加快您的網站速度，也不會對您有所幫助。
一個好主意是考慮使用更多模塊化的移動優先框架，例如Zurb的Foundation。
這些人讓他們更容易從他們的組件中挑選。您可以簡單地創建自定義下載並僅選擇所需內容，而不是下載整個框架。這將確保您的頁面不必加載膨脹的CSS和javascript文件。
我發現Grid和排版組件足以構建一個精簡，快速加載的網站。
＃10：使CSS和JavaScript外部提升頁面加載速度
使用外部文件通常會使頁面加載更快，因為瀏覽器會緩存JavaScript和CSS文件。
或者，如果您在網頁中使用CSS，請將CSS放在HEAD元素中。這使頁面顯示加載速度更快，並且可以逐步執行此操作。
使用JavaScript，只需將腳本移動到頁面底部即可。
結論
我們有時會因為犧牲頁面加載速度而創建漂亮的圖形和複雜的設計，所以不要忘記用戶體驗元素。
這都是關於控制的。用戶感受到的控制越多，他們就越快樂！
當您需要快速加載，美觀但功能強大的網站實施這些技巧時，即使最棘手的客戶也能留下深刻印象。
加快網站的速度還有哪些？歡迎評論！
