久久精品人人爽,华人av在线,亚洲性视频网站,欧美专区一二三

丸趣SEO課堂-優化準則:網站減負的十大建議

189次閱讀
沒有評論

共計 3340 個字符,預計需要花費 9 分鐘才能閱讀完成。

網站快速加載,是提供良好用戶體驗的前提。然而,網站功能的不斷增多,程序包的不斷臃腫,導致網站訪問時較大的下載量,最終影響了響應速度。沒有一個用戶喜歡等待,如何減少代碼量,為網站減去過多負擔,Craig?Buckler 在 sitepoint 網站發表了一篇文章《10?Quick?and?Easy?Fixes?to?Reduce?Page?Weight》,分享為網站減負的十個建議。下面為該文的編譯內容。

2013 年,網站頁面的重量增加了 32%,竟然達到了 1.7MB,包含 96 個獨立 HTTP 請求。這只是一個平均數值,其中近一半的網站已經超過了這個數值。網站的過度臃腫正趨于流行,其中很大的責任在于 Web 開發者。

過于笨重的網站將嚴重影響網站的最終體驗,主要表現在以下四個方面:

  • 更大的下載量,導致更慢的用戶體驗。并不是每個人都擁有 20M 的網絡連接,尤其是對于那些不發達地區。不管你的網站多么優秀,用戶永遠不希望等待。
  • 移動 Web 訪問正迅速發展,移動網民幾乎占到所有網民的 1 /4。在典型的 3G 網絡連接下,一個 1.7Mb 的網站加載需要近一分鐘。如果你的網站無法高效工作于這些移動設備,那采用響應式 Web 設計技術又有什么用呢?
  • 網站加載速度已被谷歌加入排名算法中。加載緩慢會降低網站排名,同時也會影響搜索引擎優化。
  • 網站包含的代碼越多,更新和維護它所花費的時間就會越長。

Craig?Buckler 預言,2014 年網頁的重量將會下降。那如何精簡代碼,為網站減負呢?Craig?Buckler 給出了十條建議。這些建議中涉及到的技術均是大家熟知的。

1. 啟用 GZIP 壓縮

根據?W3Techs.com 上的數據顯示,近一半的網站都未進行過壓縮。在 Web 主機上,通過簡單的服務器設置即可開啟 GZIP 壓縮。

2. 支持瀏覽器緩存

如果瀏覽器能容易地緩存一個文件,那它就無需反復下載該文件了。實現該功能的一個解決方案,就是在 HTTP 頭中設置合適的?Expires?Header、上一次修改時間或采用的?ETags。

你可通過配置服務器來自動完成以上工作。下面是 Apache 中的.htaccess 文件,其中的代碼實現了“將所有圖片緩存一個月”的功能。

1
2
3
4
5
6
7
8
<IfModule mod_expires.c>
ExpiresActive On
?
<FilesMatch ".(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"
</FilesMatch>
</IfModule>

3. 使用 CDN

瀏覽器限制了每個域中可同時處理的并發 HTTP 請求數量:4 至 8 個。如果你的網頁需要從域中加載 96 個資源,那瀏覽器最多可設置 12 組并發請求。(因為文件大小并不同,這種情況實際上并不會發生,但該限制仍然適用。)

如若從另一個域中請求靜態文件,則可使瀏覽器處理的 HTTP 請求數量加倍。此外,一個文件被調用后就會產生一個緩存文件,以供下一個調用它的網站使用。我們可選用 JavaScript 庫(如 jQuery)和字體庫,同時你也可以考慮專用的圖片托管。

前面提到的三條建議可以加快網站的加載速度,下面的建議將幫助我們檢查網站代碼,以高效地減少網站重量。

4. 刪掉沒用的資源

網站一直在變革之中。如果你不再使用某組件,那就刪掉與之關聯的 CSS 和 JavaScript。如果它們包含在一個單獨文件中,處理起來就會很簡單。否則,你需要借助一些工具,如 Chrome 的 Audit 開發工具、JSLint、Dust-Me?Selectors、CSS?Usage、unused-css.com,也可構建?grunt-uncss 此類的工具。

5. 合并和壓縮 CSS

理想的情況是只擁有一個 CSS 文件(如果你使用 RWD 以支持 IE 的老版本,那就需要兩個 CSS 文件。)構建并維護幾個單獨的 CSS 文件也算合理,但在部署到產品服務器之前,你應該將它們集合在一起,并刪掉那些不必要的空白區域。

Saas、LESS 和 Stylus 等預處理器可幫你完成這些痛苦的工作。Grunt.js、Gulp 等工具可自動化你的工作流。如果你更喜歡 GUI,可借助 Koala 提供的免費跨平臺應用。

如果你覺得這些比較麻煩,也可手動通過命令行工具將 CSS 文件集中在一起,如在 Windows 中,可使用如下代碼:

1
copy file1.css+file2.css file.css

在 Mac/Linux 中,可使用如下代碼:

1
cat file1.css file2.css > file.css

最終文件經過在線 CSS 壓縮工具(如?cssminifier.com、CSS?Compressor?&?Minifieror 等)壓縮后即可運行。

最后,請記住在頭部(Head)加載所有 CSS,以便瀏覽器展示接下來的 HTML 元素,同時也可避免瀏覽器下次再重繪頁面元素。

6. 壓縮并合并 JavaScript

平均每個頁面需加載 18 個 JavaScript 文件,所以我們要將自己編寫的 JavaScript 代碼進行合并和壓縮。我們可以自己構建壓縮工具,也可以使用在線工具,如?YUI?Compressor、Closure?Compiler 及 CompressorRater。

使用 JavaScript 壓縮工具進行壓縮,必須十分謹慎。你的代碼有一點小問題,即便丟失了一個分號,壓縮過程也可能會失敗。無論如何,對 JavaScript 文件進行壓縮,可減少 HTTP 請求數量,從而提高網站性能。

最好在 </body> 之前加載 JavaScript,這樣可確保該腳本不會阻礙其它內容的加載,同時在該腳本被下載和執行之前,頁面的內容已加載完畢,并可閱讀了。

7. 使用正確的圖片格式

錯誤地使用圖片格式會增加網頁的負載。圖片格式通常有以下使用原則:

  • 照片使用 JPG 格式;
  • 其他的使用 PNG 格式。

當你有一些小圖像,它們僅包含有限的幾種色彩集,采用 GIF 格式,其壓縮效果可能更好。本文暫不討論向量圖。

現在有大量免費的圖形軟件包,可用來轉換圖片的格式。其中像 XnView 允許你批處理這些文件。請記住下面兩條原則:

JPG 為一種有損壓縮格式,其質量介于 0(質量很差、更小的文件)至 100(質量最好,更大的文件)之間。介于 30 至 70 之間的大部分圖片顯示效果比較好。

PNG 支持 256 顏色表和 24 位的真彩色。如果你不需要透明,并能控制調色板,那 256 的 PNG 圖像顏色模式可能壓縮得更好。

8. 重整大圖片的尺寸

即便是最入門級的智能手機上的照片機(三百萬像素),其拍出來的照片往往太大而不適合在網站上顯示。但大部分內容編輯者往往將圖片直接從相機中直接上傳到網站上。因此,我們需要一個可以自動調整圖片尺寸的系統。

圖片的尺寸永遠不能超過它所在容器的最大值。如果網站模板的寬度最大為 800px,那圖片的寬度就不能超過該值。一些高分辨率、Retina 顯示屏,可顯示寬度為 1600px 的圖片,但這仍比從相機中直接輸出的圖片要小。

在減輕網頁重量方面,圖片尺寸的調整起著重要的作用。將圖片尺寸縮小 50%,可節省 75% 的總空間,相當于減少了文件大小。

9. 進一步壓縮圖片

即便已將圖片調整為正確的格式和尺寸,你仍可使用一些分析和優化圖像的工具進一步壓縮圖片。這些工具包括?OptiPNG、PNGOUT、jpegtran 和?jpegoptim。大部分工具可獨立安裝,也可整合入你構建的過程中。另外,還有一些在線工具,如 Smush,它可以工作于云上。

10. 去掉不必要的字體

Web 字體對設計進行了重大改革,減少了基于圖像的字體的使用。但是,使用傳統字體后,網頁的代碼量往往會增加數百 KB。所以網站中這種字體的使用盡量控制在兩、三種以內。

利用以上提到的方法,大部分網站可以將減去 30~50% 的重量。對于一般的網站,可以減掉 800KB 的代碼量,訪問速度可獲明顯提升。(編譯:陳秋歌)

內容來自:10?Quick?and?Easy?Fixes?to?Reduce?Page?Weight

丸趣 TV 網 – 提供最優質的資源集合!

正文完
 
丸趣
版權聲明:本站原創文章,由 丸趣 2023-12-12發表,共計3340字。
轉載說明:除特殊說明外本站除技術相關以外文章皆由網絡搜集發布,轉載請注明出處。
評論(沒有評論)
主站蜘蛛池模板: 屏东市| 赤壁市| 贺州市| 思茅市| 郓城县| 射阳县| 汕头市| 镶黄旗| 正安县| 大洼县| 大理市| 镇安县| 禄劝| 葵青区| 克什克腾旗| 朝阳区| 肃南| 浦县| 宜黄县| 股票| 滦南县| 陵川县| 涿鹿县| 阳山县| 库尔勒市| 华容县| 长沙市| 道真| 富锦市| 大同市| 吉首市| 涞源县| 上蔡县| 房山区| 资阳市| 台北市| 博白县| 桓仁| 镇宁| 上栗县| 鄂伦春自治旗|