Ivon Huang
Ivon Huang

自由軟體、航空、20世紀歷史愛好者。 這裡記載的東西究竟會成為未來的碎片,在那最果之處,反射出匯集各處思念的光芒。 My Blog: https://ivonblog.com

將suckless.org極簡網頁設計哲學付諸實現

(编辑过)
網路能交換全球資訊,方便大規模監控,研究如何控制社會,發起革命,讓有錢人賺大錢,並破壞了我們的Web生態。這個產業正在增加網頁的資源消耗,就為了在螢幕上顯示幾個字。有上百萬的工作就只是在用無效率的方式產出HTML。

自從將suckless的設計哲學套用到我自己做的網頁後,網頁在Google Lighthouse的分數從80分一路飆到了將近100分。

了解suckless哲學

suckless.org,強調極簡主義的程式設計師社群,著名作品為dwm、dmenu、st,有這三個不到500MB的軟體就足以構成一個能用的Linux桌面環境。

suckless字面意義是「沒有一點爛處(的軟體)」,不過字典沒這個字。

在他們的網站也寫明了suckless哲學:

軟體應保持簡單、最小化、實用。此一信念應該適用於所有IT產業。

感覺suckless.org的理念跟1980年代的FSF、UNIX駭客社群有所重合呢。然而事與願違,軟體產業才不可能搞這一套呢,搞Web開發的更不可能。再繼續讀下去,他們的官網還洋洋灑灑的寫出了哪些軟體超酷,哪些軟體超爛,例如Linux社群萬年的吵架話題"systemd":

其中還提及了網頁開發,結論是現在的Web爛死了:

網路能交換全球資訊,方便大規模監控,研究如何控制社會,發起革命,讓有錢人賺大錢,並破壞了我們的Web生態。這個產業正在增加網頁的資源消耗,就為了在螢幕上顯示幾個字。有上百萬的工作就只是在用無效率的方式產出HTML。

網頁上還舉了三個例子說明什麼才是好網頁:This is a motherfucking website

點進去就是用HTML寫的網頁。但是嘿,網頁會自動適應螢幕大小。

看了一下原始碼,幹,還有Google Analytics正在監控我。

其他網頁的例子還支援自動切換黑白主題。

你並不需要框架也能做好網頁。網頁並不是壞了,它一直都能運作,是你弄壞了,去你媽的。

我覺得這是一個好啟發,剛好有一個單頁面有近100張NSFW圖片的網頁需要優化,所以我嘗試將一部分的部落格的文章網頁轉成這樣的極簡網頁,作個實驗。

一個插曲

我發現我的某個教授還蠻厲害的,她雖然很老了,非資訊本科,卻將過去學生的作品都集中在學校伺服器,還自己做了個網頁。

因為是純HTML設計(副檔名甚至是.htm),就算文字超過2000字還跟圖片混在一起,載入速度也屌打我只有500字的部落格廢文網頁。

Hugo在裝有主題的情況下建立純HTML網頁

我的部落格文章使用Hugo生成,並用Git部署。照理說新文章會自動套用主題,那要如何新增只有HTML的文章呢。

最簡單的方法便是在網站根目錄的static目錄直接新增目錄,使用/posts/文章名稱/這樣的目錄結構,再新增index.html即可。

但是這樣新增的文章不會被Hugo的分類掃到,變成孤兒頁面,算是個缺點。

接著著手改寫程式碼,原始網頁是500字,加上很長的表格,還有100張圖片。最初做這個網頁的時候,圖片插入loading="lazy"標籤,並使用.avif格式加快載入速度,使得網頁大小不到10MB。但Google Lighthouse最高給出的成績也就醬子了。

我看了一下,時間大多是花在載入遠端JS、字體、Gitalk留言板、LikeCoin上。

一般來說我的正常網頁是長這樣,看似簡單但其實要載入很多東西。

在將此網頁從頭改寫後,我把Javascript全部抽掉,只剩HTML和控制寬度的CSS,做的像This is a motherfucking website呈現的那樣,專注呈現內容。

順便吐槽一下Visual Studio Code的輔助插件,HTML Validate和Markdown的插件語法檢查都好嚴格ㄛㄛ... 我還是回去用VIM就好了。

原本Markdown表格的部份轉成HTML,將網頁元素置中,用CSS讓圖片隨螢幕自動調整寬度、自動黑白主題,不載入任何不必要的JavaScript。

我將極簡化的網頁稱為「suckless版」

再跑一次Google Lighthouse...duang!

想看網頁前後對比的請造訪以下網址 (R18注意,家裡沒大人再看)

正常版

suckless版

結論

後來我還是Git回退,將該網頁回復原狀了,並保留了一份副本。我覺得我自己看是沒問題,但新用戶來看會覺得網頁是不是壞掉了啊...

不過這確實是個不錯的實驗。讓你的網站能用W3M存取,是很重要的。我用Hugo生成的網頁大致上可以,但是純HTML更好不是嗎。

CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论