引領未來 全面數位服務

網頁加速的14條黃金法則

想要加快網頁下載速度，卻不知道問題出在哪裡？本書以全球十大網站做為案例分析的對象，包括Yahoo、Google、Amazon、YouTube等。只要了解大型網站的經驗法則，就可以指引你優化網頁效能的方向。網站的視覺設計及內容，是能否吸引訪客的重要因素之一，但也不能因而顧此失彼，造成網站效能的瓶頸。從過去的訪客行為研究分析指出，等待一個網頁的呈現時間不能超過9秒鐘，但面對目前網頁內容多媒體化的現實挑戰，要達到這樣的目標，在前端頁面的設計上，也就需要多花些心思。著重網頁前端的效能改善《High Performance Web Sites》內容主要針對網站前端的設計人員所設計。作者曾經擔任雅虎CPO（Chief Performance Officer），在雅虎負責研究改善網站效能的方法，他以多年的經驗整理出14個網站前端設計需要注意的準則。全書內容簡明扼要，具有網站設計經驗的讀者，可以快速領略要點；初次接觸的生手，也可以透過本書建立良好的網站設計觀念。14條必勝定律如何有效提升網站效能？作者針對網站效能最佳化歸納出以下方針，並舉例加以說明： 1. 減少需要發出HTTP Request的數量當你設計的網頁中包含的元件數量越多，Client需要對網站伺服器發出的HTTP Request也會增加，同時也會延長網頁處理的時間。 2. 採用Content Delivery Network服務由Mirror Image、Akamai、SAVVIS等業者所提供的Content Delivery Network（CDN，內容遞送網路服務），可以供應強大的全球網路基礎架構，將網站以最有效的方式傳送給全球使用者，並自動幫網站選擇最佳路徑傳送資料，例如，根據瀏覽者所在地、網路品質及流量狀況，選擇距離用戶端最近的資料中心傳送資料，確保網頁的瀏覽品質及運作速度。 3. 在網頁中加入過期檔頭你可以利用這個設定讓網頁具備快取機制，縮短頁面載入時間，尤其是針對內容不常變動的網頁。當然這樣的運用，得視你的網頁性質而定，若內容變動頻率高的網頁，則不適用此方式。 4. 善用Gzip壓縮機制以XML/HTTP做為資料交換的開放格式已經十分普遍，傳輸的檔案體積，較過去單純的EDI方式增加許多，用傳送壓縮時間換取傳輸時間，也是一種提升效率的策略，目前常見的網站伺服器大都支援此項技術。你甚至也可以視情況選擇壓縮HTML、CSS及JavaScript的檔案內容。 5. 將Stylesheet置於網頁頁首將樣式表（Stylesheet）置於頁首，可以讓CSS設定先行載入，在第一時間套用設定直接呈現網頁。相較於把樣式表放置在頁尾，等所有內容都下載完畢後才套用，樣式表置於頁首的作法，除了頁面呈現速度較快，載入過程中也較不易造成空白頁的出現。 6. 將Script內容置於頁尾許多實際狀況中，網頁包含的Script程式，本身並不需要在載入後立即執行，所以作者建議將這些程式碼置於頁尾，至少內容可以在傳輸前段時間即備妥，讓使用者有較佳的瀏覽體驗。 7. 避免CSS Expression的撰寫方式CSS Expression的目的，在於讓自訂樣式的語法可以取代部分的Script內容，雖然這麼做很好用，但因網頁顯示過程中花費較多的邏輯判斷時間，造成網站效能的致命傷。 8. 將JavaScript及CSS內容獨立於網頁內容之外透過獨立內容的方式，讓HTML本文檔案縮小，而且可以同時被瀏覽器下載，以縮短網頁呈現的時間。 9. 減少DNS查找的次數，縮短取得網頁內容之前的前置時間雖然網頁可以串連不同網站來源的內容，但是不同網站來源的內容一旦太多，便會延遲頁面載入速度；如果能夠減少網頁內不同網站來源的內容，就可以減少從用戶端發出的DNS Request數量，縮短DNS的查詢時間。 10. JavaScript內容精簡化網頁中的JavaScript也是下載的一部分，所以當程式碼內容較多時，亦會直接影響網頁下載的速度。檢視一下程式碼，移除不必要的部分。 11. 避免重導向網頁重新導向是很方便的功能，但對於使用者而言，他必須等待更多的時間直到最終頁面被載入，所以應該盡可能避免使用重導向轉址功能。 12. 移除重複的Script程式碼重複的Script程式碼需要花費更多的下載時間，這個問題通常發生在程式碼未能妥善模組化的情況下，檢查一下你的Script程式吧。 13. 善用Etag透過設定Web Server中的Entity Tag方式，能決定網頁中被快取的內容，以加速網頁呈現，但也得視網頁內容特性而定，Etag主要運用在靜態頁面上，而動態顯示內容的網頁則不適用此方式。 14. 讓Ajax程式可做到暫存快Ajax架構透過非同步的傳輸方式，讓使用者具有較佳的使用體驗，卻不見得是效能的保證。除了可以透過利用Gzip壓縮、避免DNS查找次數、簡化JavaScript內容之外，控制HTTP過期檔頭來快取Ajax網頁，也能發揮明顯效果。 拿知名網站開刀，保證你大呼過癮本書最後以全球十大網站做為案例分析的對象，包括Yahoo、Google、Amazon、YouTube等。這些網站之所以成功，除了透過內容及社群機制吸引訪客，在網站效能的表現上，也必須克服流量提高所帶來的問題。作者使用3個度量值（Page Weight、Response Time、YSlow Grade）逐一檢視這些網站，找出問題點以及可以改善的地方，配合前述建議的14項準則，解決效能表現不佳的現象。作者表示，這些準則都經過實務證明為有效的解法，可以幫網站減少平均二至三成的網路傳輸時間。對照本書，檢視你的網站架構出了哪些問題，並對症下藥加以落實，我相信可以讓訪客感受到明顯的效能提升。編輯：桃園網頁設計-鴻享科技有限公司來源：iThome關鍵字：網頁、Ajax聲明：本文來自網路，版權為原作者所有，如有侵犯權益，請與桃園網頁設計-鴻享科技有限公司聯繫刪除，謝謝。

研究：3成7網站使用過時或有漏洞的JavaScript函式庫

研究發現3成7的網站使用1個含有漏洞的JavaScript函式庫版本，有1成的網站使用2個以上含有漏洞的JavaScript函式庫版本。Alexa排行榜的7.5萬個網站中也有不少使用有漏洞的版本。        JavaScript函式庫為高階的動態程式語言，與HTML及CSS並列為全球資訊網（WWW）的三大核心技術。（JavaScript library）則是為了方便開發JavaScript應用而事先寫好的子程式集合，全球已出現近10萬種函式庫。        該報告所測量的並非JavaScript函式庫的安全狀態，而是網站使用及維護這些函式庫的情況，並以最常見的72種開放源碼的JavaScript函式庫為基準，包括jQuery、jQuery-UI、Modernizr、Bootstrap、Yepnope、jQuery-Migrate及SWFObject等。       研究人員建立了72種函式庫之各種版本的漏洞資料庫，然後掃描Alexa排行榜上前7.5萬個網站以及隨機選取的另外7.5萬個.com網站，以偵測這13.3萬個網站是否安裝這些函式庫及其版本。       結果發現有37%的網站使用1個含有漏洞的JavaScript函式庫版本，有10%的網站使用2個以上含有漏洞的JavaScript函式庫版本。而在Alexa排行榜上的7.5萬個網站所使用的函式庫中，有87.3%的YUI3、86.6%的Handlebars、40.1%的Angular、36.7%的jQuery，以及33.7%的jQ-UI都是有漏洞的版本。       其實37%這個比例還可能被低估了，因為研究人員只測量了72個JavaScript函式庫。       報告指出，儘管各種JavaScript函式庫已有更新版，但仍有不少網站繼續使用含有漏洞的版本，對於網站開發人員而言，他們必須先知道網站使用了哪些函式庫，採用更系統化的管理，而非直接手動把函式庫檔案或CDN連結複製到代碼庫中。       此外，研究人員也發現，絕大多數的函式庫都未建立專用的安全更新郵件論壇（mailing list），也多缺乏詳細的漏洞報告，還有許多修補程式無法相容於更舊的函式庫版本，快速的生命周期也讓開發人員疲於更新。編輯：桃園網頁設計-鴻享科技有限公司來源：iThome關鍵字：JavaScript函式庫版本聲明：本文來自網路，版權為原作者所有，如有侵犯權益，請與桃園網頁設計-鴻享科技有限公司聯繫刪除，謝謝。

什麼是響應式網頁設計？

隨著智能型手機及平板計算機的普及，越來越多用戶使用它上網，近年來大傢開始重視手機及平板上的網頁視覺效果，不但設計類網站已經開始朝向響應式網頁設計，企業官網、甚至政府部門網站，也開始改成響應式網頁設計，但多數人對於響應式網頁設計(Responsive web design，簡稱為RWD )還不太瞭解，響應式網頁設計是一種網頁設計的技術做法，該設計可使網站在多種瀏覽裝置，如桌面計算機到智能型手機、平板計算機或其他移動產品裝置上，閱讀和導航，同時減少縮放、平移和卷動。響應式網頁設計使用CSS3 media queries方式，以百分比的方式及彈性的畫面設計，在不同解像度下改變網頁頁面的佈局，讓不同的設備都可以正常瀏覽同一網站，提供最佳的視覺體驗。接下來華企助力的開發團隊就跟大傢說說響應式設計的一些優勢和特點。一、響應式設計的優勢        1. 如果網站還是傳統的網頁設計，在智能型手機上無法有良好的顯示效果，就必須使用RWD響應式設計網頁，才能滿足消費者的在手機上瀏覽網頁的需求。        2. 網站開發成本及時間較低，傳統的網頁設計，如果要針對桌面計算機、智能型手機、平板計算機等不同分辨率的裝置，分別開發不同的網頁，要花費比較多的時間及開發成本，改用RWD響應式設計網頁，就可以同時適用於手機、平板等不同裝置，開發成本及時間較低。        3. 維護較方便，采用RWD響應式設計網頁，隻要維護1種網頁版本，維護成本比較低也比較方便。 二、響應式設計在APP應用程序領域的應用       響應式網頁設計RWD，已經被大多數的網頁設計師所認同，並逐步應用在不同領域的網頁設計上。除此之外，響應式設計也被應用於手機 APP程序設計。 APP除瞭要考慮不同尺寸的裝置屏幕顯示外，也要考慮直式屏幕(Portrait)及橫式屏幕(Landscape)的差異；現在比較普遍的手機尺寸有3.7-6英寸，平板計算機也有7-10英寸等不同尺寸，APP應用程序在設計UI畫面時，就可導入響應式設計的概念，讓APP可同時適用於不同尺寸裝置，或依照你的APP特性，隻提供Portrait模式或Landscape模式。       如在iPhone上大部份的APP采用Portrait，以單手操作而言直式屏幕可觸控的范圍最廣、最容易操作，用戶也習慣這樣的操作模式，不會想到將手機轉為橫式操作。但某些遊戲APP，為瞭有較寬的遊戲畫面，會將遊戲畫面設計為Landscape，一般APP，除非有必要，其實可以不需制作 Landscape畫面。       響應式設計，不僅僅隻有響應式網頁設計，越來越多APP應用程序的UI接口設計，也都采用響應式設計，希望能開發出符合不同尺寸的裝置使用的APP，除瞭手機、平板等裝置之外，Smart TV上也有越來越多的APP程序，如何讓50-60英寸的Smart TV與手機、平板的APP，有相同的使用體驗，導入響應式設計已經是現在的趨勢。 編輯：桃園網頁設計-鴻享科技有限公司來源：88頭條新聞關鍵字：響應式設計、響應式網頁設計RWD聲明：本文來自網路，版權為原作者所有，如有侵犯權益，請與桃園網頁設計-鴻享科技有限公司聯繫刪除，謝謝。