Google可能需要像這樣的設施來把HTML壓縮一下。

「網頁HTML肥大症」的現況、藥方、以及無奈

Frederic Filloux
資深記者、創業家,擁有多年編輯與新聞產業經驗,現任Monday Note編輯。 本站已獲Monday Note直接授權編譯其作品。

在網站上只有一頁的文章,往往需要6到55頁的HTML程式碼來呈現。現在,網頁上的程式碼過度肥大的問題越來越嚴重,必須靠更進一步的創新來解決。

當我們閱讀一頁800個字、甚至不到一個網頁的新聞時1,瀏覽器可能需要載入長達55頁、等於大約50萬個字元的HTML程式碼;更精準一點說,筆者所分析的一篇757字的網頁(包含4667個字元與空白符號),一共需要多達485,527的字元的程式碼:01

換句話說,對人的閱讀「有用」的文字內容,只佔全部資料傳輸量的0.96%;其餘的部份包括超過600個連結、以及超過120組包括追蹤、廣告、分析等等用途的程式碼。例如筆者在另一篇文章中所寫的,光是Chartbeat追蹤分析碼,就長達29,000個字元!

在某些網頁上,實際可讀內容只佔程式碼的不到1%。

如果能知道「程式碼用量」跟「媒體網站營收」的比例關係就好了。以這個例子中的英國網站《The Guardian》來說,結果想必會相當有趣(抱歉,這是黑色幽默;最近這家媒體的生意不太好,不過筆者個人是很喜歡的)。

以《The Guardian》的案例而言,HTML碼的肥大程度確實是有點誇張;不過幸好在正常連線速度之下,它的網頁載入速度還是蠻快的。而且,他們也是首先廣泛運用Google AMP(加速行動網頁)格式的媒體之一;在這個格式之下,會有高達80%的原始網頁碼被去除掉,讓內容在行動設備上的載入速度更快。

作為另一個極端的例子,筆者用HTML發明者Tim Berners-Lee所寫的《World Wide Web Summary》來當做對照。這份發表於1991年的文章,可以說是最純粹、最簡潔的HTML形式:整篇文章內容不到4,200個字元,而連同程式也不過4,600個字元。

也就是說,如同下表中所示,整份文件的「有用率」高達90%;或者您也可以參閱筆者的原始Google試算表文件,看看更精確的數字、參考文件網址、以及計算公式。

02

以上這些文章都是隨機選用的,但都是不錯的參考範例。依序包括:

  1. Berners-Lee的原始文章;
  2. 以還在實驗階段的「漸進網頁App」(Progressive Web App,PWA)格式編碼製作的華盛頓郵報(Washington Post)文章;
  3. 以傳統HTML格式製作的Politico網站文章;
  4. 來自AMP官方部落格的文章(好像不是用AMP格式做的);
  5. 在Medium.com網站上發表的Monday Note專欄(對標準的W3網頁格式做過變動);
  6. 一篇紐約時報文章(NYT)文章;
  7. 以AMP製作的The Guardian文章
  8. 需要捲動40次才能讀完的MailOnline網頁,但程式最佳化做得很好;
  9. 一篇華盛頓郵報文章;
  10. 原始HTML格式的The Guardian文章。

對於這些網頁,筆者有兩個觀察結果:

  • 如果不計入Berners-Lee那篇文章的「極小」、以及The Guardian那篇「極大」的案例,其他幾份文件中的「可讀內容/HTML程式碼」比例約在4.55%到9%之間;其中比例最低的華盛頓郵報文章(9號)因為提供了專為行動閱讀最佳化的格式(2號),所以在電腦上看還不是那麼要緊。除此之外,可讀比例相對最高的則是網頁結構最單純的3號Politico網頁。
  • 最令人意外的(至少對筆者而言),是華盛頓郵報的PWA版網頁。純HTML版的可讀內容跟PWA版差不多,但檔案卻大了不少。

03

PWA格式是Google在大約一年前推出的 ,技術上來說是介於行動版app和行動版網站之間的設計。根據官方開發網站的說法,它的特色包括:

即時載入

無論讀者端的連線速度如何,PWA服務都可以讓內容app以幾乎即時、而且穩定的方式載入。

可加上行動設備主畫面

透過畫面上的安裝指示,讀者可以快速將app圖像放上行動設備的主畫面,讓下次使用更加簡便。

推播通知

即使讀者的瀏覽器沒有打開,也能收到關於新文章發佈的即時提醒推播訊息。

迅速

流暢的動畫、捲動、以及導覽效果,讓讀者的閱讀體驗更加理想。

安全

媒體和讀者之間以HTTPS協定連線,讓資訊的往來流通更加安全。

反應靈敏

現今的讀者整天都掛在手機、平板、或是筆記型電腦上,所以媒體的app或網頁在操作反應上也必須因應行動版的需求;媒體必須讓內容在各種尺寸的螢幕上都有良好的顯示效果。

即使縮小HTML的技術普及,「多餘」的程式碼還是可能把空間吃光。

Google最近正開始推廣PWA格式,也開始提供必要的工具;最先開始試用的大企業包括印度的零售業大站Flipkart、以及先前提到的華盛頓郵報(目前頁面上還有些小問題,而且還不支援廣告)。

由於PWA提供了推播訊息、以及其他過去只有原生app才有的功能,所以對媒體來說似乎是個不錯的選擇(但大家要祈禱它不要過一陣子又被Google給莫名其妙砍掉了)。

雖然最近開始有些相關的新技術出現,但「縮小HTML檔案」這件事還非常有待努力;而且,即使這些新技術有機會普及,像是廣告、用戶資料收集、沒完沒了的追蹤程式等等「多餘」的東西,恐怕還是會把這些省下來的空間都吃光光。


  1. 原文字數指英文,以下同;但比例上而言即使是中文也應該相去不遠。


喜歡我們的文章嗎?按讚立即加入粉絲團 :)

IDEAS Night

rocketlab_banner 網路的便利讓許多旅遊行程與價格更加透明,在去中間化的潮流下,比價訂房、行程販售,要如何從一片紅海中找到利基、並且做到今日的規模?這次 IDEAS Night 邀請兩位專家,分享重要的轉折與市場資訊。 立即搶位

直接報名



推薦您也參考

獎勵作者

歡迎您以點數獎勵作者:

關於點數的獲得與使用方式,請參閱說明