no-image

ブログをリニューアルしてdev.toより速くなりました

タイトルの通り。

今までずっとテーマがしっくりこないなーと思っていて、シンプルかつ早い、って感じのコンセプトのテーマが無いかとずっと思っていたのですが、

今日見つけて是非試したいとなったのが現在のテーマである、Godios.です。こちらのテーマを少し弄って使用しています。
こちらのテーマですが、dev.toを思わせる作りですごい。

基本的にテーマやアセットの非同期読み込みを徹底しつつ、完全レスポンシブデザイン。

そして、ほぼ読み込み0を体感できる、プリフェッチ(カーソルを合わせると記事を先読み込み)機能。
これかなり実装するにはめんどくさいですからね。素晴らしいに尽きる。

そして、このブログはサーバサイドの最適化もかなり行っており、Nginx CacheとHackを使用していることでかなりのパフォーマンスが出せるようになっています。
結果、速度は
Loading: 20-40ms
Scripting: 100ms
Rendering: 100ms
Painting: 50ms

という感じで、
DomContentLoadedが200ms程度、Loadは250ms程度。(自分の環境であれば)
さらにプリフェッチ機能のおかげでブログ記事への遷移は体感0秒に等しいと思われます。
これは爆速といっていいでしょう。
測った感じdev.toはLoad 300msだったので多分超えてます。まあ、こっちが画像もコンテンツも少ないからという感じではありますけどね。

惜しいところとしては、jQueryを使っておりその部分が非同期化は厳しいところですね。
多分脱jQueryをしない限りでは、Perfomance100は厳しい。(現在88)
これがあるため、LighthouseのFirst Meaningful Paintはそこまで高くないです。3000msくらい。

まあWordpressでjQuery使わないブログなんてないレベルだからしょうがないけれども。
後はServiceWorker。この部分が改善すればさらに速度は上がると思われます。

そこまで速度上げても体感変わらないんじゃないの?
という感じはしますが、早さはロマンですからね。これからも早くしていきたい。