網站SEO優化、字體瘦身: 把字體 壓縮95% 從 11.6MB 變成 600kB

讓網站跑得越快,SEO優化的效果就會越好。

2024年5月30日
font portfolio seo
網站SEO優化、字體瘦身: 把字體 壓縮95% 從 11.6MB 變成 600kB

網站優化、字體瘦身: 把字體 壓縮95% 從 11.6MB 變成 600kB

先講重點流程

  1. 先看Google font有沒有支援相關字體,沒有再思考自己處理(Google font會切割字體檔案)
  2. 只使用用到的字,換句話說,把沒用到的字刪掉。(使用FontForge、FontMagic去”修剪沒使用到的字”)
  3. 如果不想統計網站用到了那些字的話,本篇文章結尾有”開發遊戲常用3000字”,讓大家一鍵複製,一鍵貼上
  4. 最後,把.ttf轉成.woff2格式

先查Google font

由於GOOGLE FONT的中文資源真的很少,所以如果你會點開這篇文章,估計是要為字體瘦身一下了

使用字體編輯工具(這步驟可以壓縮80%)

這款Fontforge是開源的字體編輯工具,可以來編輯自型(須注意商業字體不能這樣用)

補字

因為中文繁體常常會缺字,這時候需要去補字,大部分時間用類似複製貼上可以解決.

切選常用字

底下有常用3000字,再搭配程式選字,把一些非常用字篩掉.

compress

那程式的介紹網路上面資源很多,主要就是可以用一些script去把字選取出來。

image

記得轉換成.woff2 (這步驟再壓縮65%)

第二代 WOFF,WOFF2 壓縮比更好,比 WOFF 再減少 30% 體積,目前各大瀏覽器都已支援,是當今網路字型的首選。

image

重要:字體授權

本篇文章使用思源柔黑體(源柔ゴシック),本字體以SIL Open Font License 1.1(SIL 開源字型授權版本1.1,簡稱SIL OFL 或OFL)授權協議發佈

✔ 這款字體無論是個人還是企業都可以自由免費商用,也無需知會或者標明原作者。

✔ 這款字體可以自由傳播、分享,或者將字體安裝於系統、軟件或APP中也是允許的,可以與任何軟件捆綁再分發以及/或一併銷售。

✔ 這款字體可以自由修改、改造。但修改或改造後的字體也必須同樣以SIL Open Font License 1.1授權公開。

所以當各位想要去使用這樣的方式

切記!切記!切記! 一定要查看字型的授權

常用3000字

衝嗨囉併製夠值鄉阿啊哎哀唉埃挨癌矮艾愛礙安氨俺岸按案暗昂凹熬傲奧澳八巴叭吧拔把壩爸罷霸白百柏擺敗拜班般頒斑搬板版辦半伴扮瓣邦幫膀傍棒包胞寶飽保堡報抱豹暴爆卑杯悲碑北貝備背倍被輩奔本崩逼鼻比彼筆幣必畢閉辟碧蔽壁避臂邊編蝙鞭扁便變遍辨辯標表別賓濱冰兵丙柄餅並病撥波玻剝播脖伯駁泊勃博搏膊薄卜補捕不布步部擦猜才材財裁采彩踩菜蔡參餐殘蠶慘燦倉蒼艙藏操曹槽草冊側測策層叉插查茶察差拆柴纏產闡顫昌長腸嘗償常廠場暢倡唱抄超巢朝潮吵炒車扯徹撤塵臣沈陳闖襯稱趁撐成呈承誠城乘懲程橙吃池馳遲持匙尺齒斥赤翅充沖蟲崇抽仇綢愁籌酬醜瞅臭出初除廚礎儲楚處觸川穿傳船喘串窗床晨創吹垂錘春純唇醇詞瓷慈辭磁雌此次刺從匆蔥聰叢湊粗促催脆翠村存寸措錯搭達答打大呆代帶待袋逮戴丹單擔膽旦但誕彈淡蛋氮當擋黨蕩刀導島倒蹈到盜道稻得德的燈登等鄧凳瞪低堤滴迪敵笛底抵地弟帝遞第顛典點電店墊澱殿雕吊釣調掉爹跌疊蝶丁叮盯釘頂訂定丟東冬懂動凍洞都鬥抖陡豆督毒讀獨堵賭杜肚度渡端短段斷鍛堆隊對噸敦蹲盾頓多奪朵躲俄鵝額惡餓鱷恩兒而爾耳二發乏伐罰閥法帆番翻凡煩繁反返犯泛飯範販方坊芳防妨房肪仿訪紡放飛非啡菲肥廢沸肺費分紛芬墳粉份奮憤糞豐風楓封瘋峰鋒蜂馮逢縫鳳奉佛否夫膚孵弗伏扶服浮符幅福輻蝠撫府輔腐父付婦負附覆赴副傅富賦腹覆該改鈣蓋溉概幹甘桿肝趕敢感剛崗綱缸鋼港高搞稿告戈哥胳鴿割歌閣革格葛隔個各給根跟更耕工弓公功攻供宮恭鞏拱共貢勾溝鉤狗構購夠估咕姑孤菇古谷股骨鼓固故顧瓜刮掛拐怪關觀官冠館管貫慣灌罐光廣歸龜規矽軌鬼櫃貴桂滾棍郭鍋國果裹過哈孩海害含函寒韓罕喊漢汗旱杭航毫豪好號浩耗呵喝合何和河核荷盒賀褐赫鶴黑嘿痕很狠恨哼恒橫衡轟哄紅宏洪虹鴻侯喉猴吼後厚候乎呼忽狐胡壺湖葫糊蝴虎互戶護花華嘩滑化劃畫話樺懷淮壞歡還環緩幻喚換患荒慌皇黃煌晃灰恢揮輝徽回毀悔匯會繪惠慧昏婚渾魂混活火夥或貨獲禍惑霍擊饑圾機肌雞積基跡績激及吉級即極急疾集輯籍幾己擠脊計記紀忌技際劑季既濟繼寂寄加夾佳家嘉甲賈鉀價駕架假嫁稼尖堅間肩艱兼監減剪檢簡堿見件建劍健艦漸踐鑒鍵箭江姜將漿僵疆講獎蔣匠降交郊嬌澆驕膠焦礁角腳攪叫轎較教階皆接揭街節劫傑潔結捷截竭姐解介戒屆界借巾今斤金津筋僅緊錦盡勁近進晉浸禁京經莖驚晶睛精鯨井頸景警凈徑競竟敬境靜鏡糾究九久酒舊救就舅居局菊橘舉矩句巨拒具俱劇懼據距聚卷倦決絕覺掘嚼軍君均菌俊峻卡開凱慨刊堪砍看康抗炕考烤靠科棵顆殼咳可渴克刻客課肯坑空孔恐控口扣枯哭苦庫褲酷誇跨塊快寬款狂況礦虧葵愧潰昆困擴括闊垃拉啦喇臘蠟辣來萊賴蘭攔欄藍籃覽懶爛濫郎狼廊朗浪撈勞牢老樂勒雷蕾淚類累冷楞厘梨離莉犁璃黎禮李里哩理鯉力歷厲立麗利勵例隸粒倆連簾憐蓮聯廉臉練煉戀鏈良涼梁糧兩亮輛量遼療聊僚了料列劣烈獵裂鄰林臨淋磷靈玲淩鈴陵羚零齡領嶺令另溜劉流留硫瘤柳六龍籠隆壟攏樓漏露盧蘆爐魯陸錄鹿碌路驢旅鋁履律慮率綠氯濾卵亂掠略倫輪論羅蘿邏螺裸洛絡駱落媽麻馬瑪碼螞罵嗎嘛埋買邁麥賣脈蠻滿曼慢漫忙芒盲茫貓毛矛茅茂冒貿帽貌麽沒枚玫眉梅媒煤黴每美妹門悶們萌盟猛蒙孟夢彌迷謎米泌秘密蜜眠綿棉免勉面苗描秒妙廟滅民敏名明鳴命摸模膜摩磨蘑魔抹末沫陌莫漠墨默謀某母畝牡姆拇木目牧墓幕慕穆拿哪內那納娜鈉乃奶奈耐男南難囊惱腦鬧呢嫩能尼泥你擬逆年念娘釀鳥尿捏您寧凝牛扭紐農濃弄奴努怒女暖挪諾哦歐偶爬帕怕拍排牌派攀盤判叛盼龐旁胖拋炮跑泡胚陪培賠佩配噴盆朋棚蓬鵬膨捧碰批披皮疲脾匹屁譬片偏篇騙漂飄瓢票拼貧頻品平評憑蘋屏瓶萍坡潑頗婆迫破剖撲鋪葡蒲樸浦普譜七妻棲戚期欺漆齊其奇歧騎棋旗企豈啟起氣棄汽契砌器恰千遷牽鉛謙簽前錢潛淺遣欠槍腔強墻搶悄敲喬橋瞧巧切茄且竊親侵秦琴禽勤青氫輕傾清情晴頃請慶窮丘秋蚯求球區曲驅屈軀趨取娶去趣圈全權泉拳犬勸券缺卻雀確鵲裙群然燃染嚷壤讓饒擾繞惹熱人仁忍認任扔仍日絨榮容溶熔融柔肉如儒乳辱入軟銳瑞潤若弱撒灑薩塞賽三傘散桑嗓喪掃嫂色森僧殺沙紗剎砂傻啥曬山杉衫珊閃陜扇善傷商賞上尚梢燒稍少紹哨舌蛇舍設社射涉攝申伸身深神審嬸腎甚滲慎升生聲牲勝繩省聖盛剩屍失師詩施獅濕十什石時識實拾蝕食史使始駛士氏世市示式事侍勢視試飾室是適逝釋收手守首壽受獸售授瘦書抒叔樞殊疏舒輸蔬熟暑署屬鼠薯術束述樹豎數刷耍衰摔甩帥雙霜爽誰水稅睡順瞬說絲司私思斯撕死四寺似飼松聳宋送頌搜艘蘇俗訴肅素速宿塑酸蒜算雖隨髓歲遂碎穗孫損筍縮所索鎖他它她塌塔踏胎台擡太態泰貪攤灘壇談潭坦嘆炭探碳湯唐堂塘糖躺趟濤掏逃桃陶淘萄討套特疼騰藤梯踢啼提題蹄體替天添田甜填挑條跳貼鐵廳聽廷亭庭停蜓挺艇通同桐銅童統桶筒痛偷頭投透突圖徒塗途屠土吐兔團推腿退吞托拖脫駝妥拓唾挖哇蛙娃瓦歪外彎灣丸完玩頑挽晚碗萬汪亡王網往忘旺望危威微為圍違唯惟維偉偽尾緯委萎衛未位味胃謂喂慰魏溫文紋聞蚊吻穩問翁窩我沃臥握烏污屋無吳吾五午伍武舞務物誤悟霧夕西吸希析息犧悉惜晰稀溪錫熙嘻膝習席襲媳洗喜戲系細隙蝦瞎峽狹轄霞下嚇夏廈仙先纖掀鮮閒弦賢鹹銜嫌顯險縣現線限憲陷獻腺鄉相香廂湘箱詳祥翔享響想向巷項象像橡削消蕭硝銷小曉孝效校笑些歇協脅斜諧攜鞋寫泄瀉卸屑械謝蟹心辛欣新信興星猩刑行形型醒杏姓幸性兇兄匈胸雄熊休修羞朽秀繡袖嗅須虛需徐許序敘畜緒續蓄宣玄懸旋選穴學雪血尋巡詢循訓訊迅壓呀鴉鴨牙芽崖啞雅亞咽煙淹延嚴言巖沿炎研鹽顏衍掩眼演厭宴艷驗焰雁燕央揚羊陽楊洋仰養氧癢樣腰邀搖遙咬藥要耀爺也冶野業葉頁夜液一伊衣醫依儀夷宜姨移遺疑乙已以矣蟻椅義億憶藝議亦異役抑譯易疫益誼逸意溢毅翼因陰音吟銀引飲蚓隱印應英嬰鷹迎盈營蠅贏影映硬喲擁永泳勇湧用優憂幽悠尤猶由郵油遊友有又右幼誘於予余魚娛漁愉愚與宇羽雨語玉籲育郁獄浴預域欲喻寓御裕遇愈譽豫元員園原圓袁援緣源遠怨院願曰約月岳鑰悅閱躍越雲勻允孕運暈韻蘊雜砸災栽宰載再在咱暫讚臟葬遭糟早棗藻竈皂造噪燥躁則擇澤責賊怎曾增贈渣紮眨炸摘宅窄債沾粘展占戰站張章漲掌丈仗帳脹賬障招找召兆趙照罩遮折哲者這浙針偵珍真診枕陣振鎮震爭征掙睜蒸整正證鄭政癥之支汁芝枝知織肢脂蜘執直值職植殖止只旨址紙指趾至志制治質致智置中忠終鐘腫種仲眾重州舟周洲軸宙皺驟朱株珠諸豬蛛竹燭逐主煮囑住助注貯駐柱祝著築抓爪專磚轉賺莊樁裝壯狀撞追準捉桌著仔茲姿資滋籽子紫字自宗綜棕蹤總縱走奏租足族阻組祖鉆嘴最罪醉尊遵昨左作坐座做藹隘庵鞍黯骯拗襖懊扒芭疤捌跋靶掰扳拌絆梆綁榜蚌謗磅鎊苞褒雹鮑狽悖憊笨繃泵蹦匕鄙庇斃痹弊璧貶匾辮彪憋鱉癟彬斌繽瀕鬢秉稟菠舶渤跛簸哺怖埠簿睬慚滄糙廁蹭茬岔豺摻攙禪饞蟬鏟猖敞鈔嘲澈忱辰鐺澄逞秤癡弛侈恥寵疇稠鋤雛櫥矗揣囪瘡炊捶椿淳蠢戳綽祠賜醋簇竄篡崔摧悴粹搓撮挫瘩歹怠貸耽檔叨搗禱悼蹬嘀滌締蒂掂滇巔碘佃甸玷惦奠刁叼叠諜碟鼎董棟兜蚪逗痘睹妒鍍緞兌墩盹囤鈍咄哆踱垛墮舵惰跺訛娥峨蛾扼鄂愕遏噩餌貳筏礬妃匪誹吠吩氛焚忿諷敷芙拂俘袱甫斧俯脯咐縛尬丐柑竿尷稈橄贛岡肛杠羔膏糕鎬疙擱蛤庚羹埂耿梗蚣躬汞茍垢沽辜雇寡卦褂乖棺逛閨瑰詭癸跪亥駭酣憨涵悍捍焊憾撼翰夯嚎皓禾烘弘弧唬滬猾徊槐宦渙煥瘓凰惶蝗簧恍謊幌卉諱誨賄晦穢葷豁譏嘰唧緝畸箕稽棘嫉妓祭鯽冀頰奸殲煎揀儉柬繭撿薦賤澗濺檻韁槳醬椒跤蕉僥狡絞餃矯剿繳窖酵稭睫芥誡藉襟謹荊兢靖窘揪灸玖韭臼疚拘駒鞠桔沮炬鋸娟捐鵑絹眷訣倔崛爵鈞駿竣咖揩楷勘坎慷糠扛亢拷銬坷苛磕蝌墾懇啃吭摳叩寇窟垮挎筷筐曠框眶盔窺魁饋坤捆廓睞婪瀾攬纜欖瑯榔嘮姥澇烙酪壘磊肋擂棱貍漓籬吏瀝俐荔栗礫痢靂鐮斂粱諒晾寥嘹撩繚瞭咧琳鱗凜吝賃躪拎伶聆菱瀏琉餾榴嚨朧聾窿婁摟簍陋廬顱鹵虜賂祿呂侶屢縷巒掄侖淪啰鑼籮騾蟆饅瞞蔓莽錨卯昧媚魅氓朦檬錳咪靡瞇覓緬瞄渺藐蔑皿閩憫冥銘謬饃摹茉寞沐募睦暮捺撓瑙吶餒妮匿溺膩撚攆碾聶孽擰獰檸濘鈕膿瘧虐懦糯毆鷗嘔藕趴啪耙徘湃潘畔乓螃刨袍沛砰烹彭澎篷坯劈霹啤僻翩撇聘乒坪魄仆菩圃瀑曝柒淒祈臍崎鰭乞迄泣掐洽鉗乾黔譴嵌歉嗆蹺鍬僑憔俏峭竅翹撬怯欽芹擒寢沁卿蜻擎瓊囚嶇渠痊瘸冉瓤壬刃紉韌戎茸蓉榕冗揉蹂蠕汝褥蕊閏腮叁搔騷臊澀瑟鯊煞霎篩刪煽擅贍裳晌捎勺奢赦呻紳沈笙甥矢屎恃拭柿嗜誓梳淑贖蜀曙恕庶墅漱蟀拴栓涮吮爍碩嗽嘶巳伺祀肆訟誦酥粟溯隋祟隧唆梭嗦瑣蹋苔汰癱痰譚檀毯棠膛倘淌燙滔謄剔屜剃涕惕恬舔迢帖彤瞳捅凸禿頹蛻褪屯豚臀馱鴕橢窪襪豌宛婉惋皖腕枉妄偎薇巍帷葦畏尉猬蔚瘟紊嗡渦蝸嗚巫誣蕪梧蜈侮捂鵡勿戊昔犀熄蟋徙匣俠暇餡羨鑲宵瀟簫霄囂淆肖哮嘯蠍邪挾懈芯鋅薪馨釁腥洶銹戌墟旭恤酗婿絮軒喧癬炫絢渲靴薛勳熏旬馴汛遜殉丫押涯衙訝焉閻蜒檐硯唁諺堰殃秧鴦漾夭吆妖堯肴姚窯謠舀椰腋壹怡貽胰倚屹邑繹姻茵蔭殷寅淫癮鶯櫻鸚熒瑩螢穎傭庸詠踴酉佑迂淤渝隅逾榆輿嶼禹芋冤鴛淵猿苑粵耘隕醞哉贓鑿蚤澡憎咋喳軋閘乍詐柵榨齋寨氈瞻斬盞嶄輾棧綻彰樟杖昭沼肇轍蔗貞斟疹怔猙箏拯吱侄幟摯秩擲窒滯稚衷粥肘帚咒晝拄矚蛀鑄拽撰妝幢椎錐墜綴贅諄卓拙灼茁濁酌啄琢咨姊揍卒佐佘賒1234567890-=!@#¥%……&*()~:"{}[]|\?/<>,.;'+abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ

Thank you for reading, I hope you like it. Here is the link to my website

感謝您的觀看,希望對您有幫助. 如果希望找我合作的話,點擊這裡可以連結到我的網站

Feel free to ask questions and add any other recommendation you think might be useful ⚡️