首頁 站長新聞正文

          如何通過優化前端來提升網站的速度

          別楞網 站長新聞 2016-12-25 10:38:40 2864 0 優化提升網站速度

          人們建立網站推廣他們的商品和服務,吸引購物者,提供好的購物體驗。所有的零售商都面對著一個相同的挑戰:把客戶轉變成買家。在在線購物者中實際買家的百分比可以量化為“轉化率”。影響轉化率的因素有很多。首先,當你的網上商店有引人注目的標題和舉辦強有力的促銷活動,一個用戶友好的布局和較快的加載速度時,客戶更可能購買商品。

          早在2010年,谷歌就支持在眾多決定搜索結果排名的因素中,以頁面加載速度作為一種因素。但比搜索排名更重要的是,網站加載速度對于網站的可用性至關重要。在加載網頁結果上,需要耗費的時間越多,網站的跳出率就越高,使用率就越低。

          頁面加載時間VS網站的速度頁面加載時間

          頁面加載速度代表了一個網頁從服務器中被加載并顯示在瀏覽器中的速度有多快。 頁面加載時間指單擊一個鏈接并從服務器接收響應之間的時間間隔。

          關于網站速度,有三個主要考慮的因素:

          • 瀏覽器接收被請求數據的時間(頁面加載時間);

          • 瀏覽器怎么相應頁面加載;

          • 瀏覽器呈現的速度

          自然,一個快速加載的網站并不能保證你的網站排在搜索排名的前面,盡管當你的網站和另一個網站在相關性上有聯系時,你會占到一些優勢。

          多快可以稱之為快?

          定義可接受的網站平均速度

          現在我們來看一下一些數據數據,用這些數據算出對于網站來說“慢”和“快”意味著什么。很明顯,這些定義隨著時間的遷移會發生改變,而且,當談到網站速度的時候,因特網用戶的要求變得越來越高。早在1999年,當人們還在使用撥號連接因特網的時候,對于他們來說加載網頁平均需要等待8秒是完全可以接受的。在2006年,因特網連接速度提高了,用戶宣稱他們愿意等待6秒的時間。到了2010年,如果一個網頁需要超過3秒的下載時間,用戶就會離開網站。

          如何通過優化前端來提升網站的速度 如何通過優化前端來提升網站的速度 站長新聞 seo1

          谷歌首先意識到了網站速度的重要性。Arvind Jain, 一個谷歌工程師, 宣稱公司在乎新產品不會拖慢其他谷歌服務的速度。難怪谷歌的工程師們提出網站0.1秒的更優性能建議。這就是在感官記憶中存儲視覺信息所需要的時間。如果一個網站加載小于0.1秒,我們會感覺頁面是立刻被下載完畢的。自然,這是留住你的網站的客戶的有效的方式。

          如何衡量網站加載速度?

          什么樣的速度計可以衡量網站加載速度?在网络上你可以找到各種各樣的幫助你衡量你的網站的速度的工具。讓我們來看看最有效的和最熱門的選項。

          Google PageSpeed

          Google PageSpeed Insights 是一個衡量網站性能的很好的工具。它讓你能夠跟蹤關鍵統計數據,檢測可能出現的問題,并且提供如何提高你的網站速度的可能的解決方案和建議。Google PageSpeed使用分值范圍1到100的分級評估體系。如果你得到的分數大于等于85,你的網站就可以看作是已優化的性能好的。它還有可以評估網站的移動版本的用戶體驗的額外功能。

          GTmetrix

          GTmetrix跟蹤你的網站性能,包括Google PageSpeed Insights和YSlow(由雅虎提供的)計算出的分數和優化建議。 GTmetrix也記錄總頁面加載時間、頁面大小和請求數量這些信息。你可以下載以報告的形式這些信息,以便于做進一步的分析。

          Pingdom

          另一個衡量網站性能的工具叫做Pingdom,它被定位為用于市場營銷和整體性能JK的專業工具。你可以通過訂閱各種計劃來使用Pingdom的特性,并且在你提交購買之前有一個14天的試用版。除了利用像評價網站的性能和顯示瀏覽器請求這樣的Pingdom的必要特征之外,你還可以存儲測試結果和跟蹤隨著時間推移的網站變化。

          你如何優化你的網站的性能?

          前端優化

          在運行了測試來衡量你的網站性能和找出性能瓶頸之后,是時候考慮一下網頁的優化了。我們會專注于前端(網站直接與用戶交互的部分)的優化。下面是優化你的網站的前端的四個方法:

          1. 壓縮圖片

          在2016年, 基于HTTP檔案文件的研究發現大約64%的網站頁面主要由圖片組成。 圖片會使網站加載變慢。因此,優化圖片可以是提高你的網頁加載速度的更好的方式之一。在你深入研究圖片壓縮技術和考慮更佳格式之前,問下自己是否真的需要某些圖片; 作為規則,一個網站應該減少會拖慢速度的圖形,因為這些圖形會導致整體的用戶體驗變差。如果你必須使用一張圖片,考慮用更輕量級的并且在任何分辨率下都很清晰的CSS效果來替代。

          此外,考慮哪個圖片格式是最適合的。例如,你可以使用光柵或矢量圖像。矢量格式對于logo、文本、圖標是更可取的,因為矢量圖像的質量不依賴于分辨率和比例尺。然而,矢量格式對于像圖片這樣復雜的圖像來說是不適合的。對于圖片,你應該考慮使用光柵圖像格式,例如JPEG、GIF或者PNG。為了選擇正確的格式,你可以參考谷歌提供的決策流程圖:

          如何通過優化前端來提升網站的速度 如何通過優化前端來提升網站的速度 站長新聞 seo2

          如果你想要減小你的網頁的大小,但在猶豫使用哪一種格式,那這個圖表就派上用場了。

          2. 最小化CSS、HTML和JavaScript

          • 通過移除不需要的空白、制表符、行折疊(line folds)等來縮減CSS、HTML和JavaScript。這會使代碼可讀性降低,但是使文件大小減小——機器可以很好地讀取這些被縮減的代碼。

          • 資源管道(asset pipeline)的好處。資源管道是一個默認的Ruby on Rails框架,它能夠組合、縮減和壓縮JavaScript和CSS 源碼。它也讓你能夠在其他的編程語言和包括CoffeeScript、Sass和 LESS的其他預處理器創造這些源碼。

          • 減少的請求數量。 瀏覽器可以同時執行的請求數量是有限的,這也是為什么減少請求數量可以減少加載時間。資源管道組合了資源,會使瀏覽器請求減少。

          • 緩存文件。文件緩存減少了頁面加載時間——但如果你改變了一個資源,你會怎么做?考慮到可能發生的變化,管道使用fingerprint——一個用來建立文件的名稱和它的內容之間的關系的工具。如果一個文件在修改內容之后重新命名了,fingerprint允許用戶檢查文件的兩個版本是否相似。這種技術給瀏覽器提供了相關的文件版本。

          3. 遵從折疊線以上(Above-the-Fold)原則

          這是一個已經被證實了的事實:你的網站上的元素放置對于你的網站的整體速度有重要的影響。你有越多的元素,包括圖像和樣式表,對每個元素就需要更多的HTTP請求,這會使加載速度變慢。 適當地分配你的網站的元素會使你能夠有效地改善你的前端性能。

          折疊線以上(Above-the-Fold)原則說的是把最有必要的元素放在網頁的上部,不需要向下滾動就能看到。以下是如何遵循折疊線以上(Above-the-Fold)原則的一些提示:

          • 盡量縮小折疊線以上的數據大小。頁面的上端展示越多的數據,越多的HTTP請求會被發送到托管服務器;這個過程直接影響了頁面加載時間??s小折疊線以上的數據大小會導致網站性能更好。

          • 把CSS移到網頁更高的位置。把CSS放到你網頁的頭,會使標題、logo、導航欄和其他元素循序漸進加載。當用戶可以看到你的網頁加載了的比特數時,他們會知道加載正在發生,體驗更加舒服。

          • 把腳本寫在下面。 如果你的腳本在網頁的上部,瀏覽器首先會下載它們,然后再展示用戶最初請求的內容。把腳本放到底部就告訴了瀏覽器先加載最相關的信息,然后再下載腳本。

          如何通過優化前端來提升網站的速度 如何通過優化前端來提升網站的速度 站長新聞 seo3

          實現Gzip壓縮

          下載并傳輸壓縮文件到Web瀏覽器速度更快。 Gzip壓縮程序處理文本文件,包括JavaScript、CSS和HTML文檔; 但是視頻、圖片和音頻文件等元素無法通過Gzip壓縮。 壓縮文件占用較少的空間,需要較少的帶寬。 根據調查,將Gzip壓縮文件保存在服務器上可以將頁面的下载速度提高3-4倍。

          Gzip可在大多數新型瀏覽器上運行,包括Chrome、Firefox、Opera和Internet Explorer,這使得Gzip成為更具吸引力的壓縮器之一。

          總結

          當然,確定一個會拖慢網站性能的瓶頸將花費更多的時間和精力。 繼續關注我們博客即將會刊登的關于如何優化后端的文章,以提高頁面加載速度。

          西安分類信息網
          版權聲明
          文章來源互聯網,信息真實性不詳,站長不具備核實的能力,不承擔任何責任。對于用戶言論真實性引發的全部責任,由用戶自行承擔。
          本文系作者授權發表,未經許可,不得轉載。
          本文鏈接:http://www.ao-soft.com/post/52.html

          發表評論

          評論列表(0人評論 , 2864人圍觀)
          ?還沒有評論,來說兩句吧...
          我好喜欢你在线观看_强行扒开双腿玩弄_小草影院视频_日本av在线看_撅起屁股叫的再浪一点_日本熟妇高清无码视频