「網頁HTML肥大症」的現況、藥方、以及無奈/Frederic Filloux
在網站上只有一頁的文章,往往需要6到55頁的HTML程式碼來呈現。現在,網頁上的程式碼過度肥大的問題越來越嚴重,必須靠更進一步的創新來解決。
當我們閱讀一頁800個字、甚至不到一個網頁的新聞時(編按:原文字數指英文,以下同;但比例上而言即使是中文也應該相去不遠),瀏覽器可能需要載入長達55頁、等於大約50萬個字元的HTML程式碼。
更精準一點說,筆者所分析的一篇757字的網頁(包含4667個字元與空白符號),一共需要多達485,527的字元的程式碼:
換句話說,對人的閱讀「有用」的文字內容,只佔全部資料傳輸量的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試算表文件,看看更精確的數字、參考文件網址、以及計算公式。
以上這些文章都是隨機選用的,但都是不錯的參考範例。依序包括:
Berners-Lee的原始文章;
以還在實驗階段的「漸進網頁App」(Progressive Web App,PWA)格式編碼製作的華盛頓郵報(Washington Post)文章;
以傳統HTML格式製作的Politico網站文章;
來自AMP官方部落格的文章(好像不是用AMP格式做的);
在Medium.com網站上發表的Monday Note專欄(對標準的W3網頁格式做過變動);
一篇紐約時報文章(NYT)文章;
以AMP製作的The Guardian文章
需要捲動40次才能讀完的MailOnline網頁,但程式最佳化做得很好;
一篇華盛頓郵報文章;
原始HTML格式的The Guardian文章。
對於這些網頁,筆者有兩個觀察結果:
如果不計入Berners-Lee那篇文章的「極小」、以及The Guardian那篇「極大」的案例,其他幾份文件中的「可讀內容/HTML程式碼」比例約在4.55%到9%之間;其中比例最低的華盛頓郵報文章(9號)因為提供了專為行動閱讀最佳化的格式(2號),所以在電腦上看還不是那麼要緊。除此之外,可讀比例相對最高的則是網頁結構最單純的3號Politico網頁。
最令人意外的(至少對筆者而言),是華盛頓郵報的PWA版網頁。純HTML版的可讀內容跟PWA版差不多,但檔案卻大了不少。
PWA格式是Google在大約一年前推出的 ,技術上來說是介於行動版app和行動版網站之間的設計。根據官方開發網站的說法,它的特色包括:
即時載入
無論讀者端的連線速度如何,PWA服務都可以讓內容app以幾乎即時、而且穩定的方式載入。
可加上行動設備主畫面
透過畫面上的安裝指示,讀者可以快速將app圖像放上行動設備的主畫面,讓下次使用更加簡便。
推播通知
即使讀者的瀏覽器沒有打開,也能收到關於新文章發佈的即時提醒推播訊息。
迅速
流暢的動畫、捲動、以及導覽效果,讓讀者的閱讀體驗更加理想。
安全
媒體和讀者之間以HTTPS協定連線,讓資訊的往來流通更加安全。
反應靈敏
現今的讀者整天都掛在手機、平板、或是筆記型電腦上,所以媒體的app或網頁在操作反應上也必須因應行動版的需求;媒體必須讓內容在各種尺寸的螢幕上都有良好的顯示效果。
即使縮小HTML的技術普及,「多餘」的程式碼還是可能把空間吃光。
Google最近正開始推廣PWA格式,也開始提供必要的工具;最先開始試用的大企業包括印度的零售業大站Flipkart、以及先前提到的華盛頓郵報(目前頁面上還有些小問題,而且還不支援廣告)。
由於PWA提供了推播訊息、以及其他過去只有原生app才有的功能,所以對媒體來說似乎是個不錯的選擇(但大家要祈禱它不要過一陣子又被Google給莫名其妙砍掉了)。
雖然最近開始有些相關的新技術出現,但「縮小HTML檔案」這件事還非常有待努力;而且,即使這些新技術有機會普及,像是廣告、用戶資料收集、沒完沒了的追蹤程式等等「多餘」的東西,恐怕還是會把這些省下來的空間都吃光光。