サイトを高速化しよう

Aug 23, 2020 blog tips howto

Abstract

何気なくこのサイトのスピードをPageSpeed Insights で確認したら思ったより遅かったので原因の特定と修正をした．

恐らくどのようなサイトを作るにしても何らかのcssやjsを使うことになるだろう．特に，bootstrapやFont Awesomeは多くのサイトで使われている．しかし，これらのファイルをどのように使うかでページの描画速度が大きく変わることになるのだ．

筆者は，今までこれらのファイルをWebサーバーに配置していた．同じサーバー上でローカルからファイルを読み込んだほうが速い気がしたからである．ところがどっこいローカルのcssやjsを読み込むのに200msもかかっていた．~~サーバーが弱いのかな~~

なんとかならないか調べていたら，CDNなるものを使うと劇的に速くなるらしい．CDNとは外部からのアクセスに対し，自身が全てのファイルを読み込み転送するのではなく，外部のサーバーにリソースを分散させることができる．

本サイトでは，ローカルにbootstrapを配置していたが，これをBootstrapCDNにすると劇的に速度が向上し，200msから20msになった．はやすぎぃ！

同様にFont Awesomeをcdnjsから取得するようにした結果，同様に20msに落ち着いた．

先日作ったqrコード生成ツールでは，jQueryとjquery-qrcodeを使っていたが，これもcdnjsから取得させた．これだけでPageSpeed Insightsのスコアが86から97になった．やったぜ！

次に，紹介ページであるAboutのスコアを調べると91だった．原因は筆者の近影画像がPNG形式で重いかららしい．写真をJPEG 2000,JPEG XR,webpに圧縮すると速くなるよ，と書いてあったがそんな形式私は知らない．そのためグーグル先生に聞くとこんなページがあった．

要するにJPEG2000はアップルが，JPEG XRはマイクロソフトが，webpはグーグルがそれぞれ推しているらしい．ユーザーサイドではただの迷惑であるが．対応状況としてはwebp一強らしい．さすがグーグル．唯一の非対応ブラウザとしてsafariがあるが，それも最近解消されたらしい．

さっそくwebpを使ってみよう．

サイト開設でも述べたが，筆者のPC環境ではChromebook + Debian Busterである． debianでは webpをインストールすれば一通りのコマンドが使えるようになる．

sudo apt install webp

画像の圧縮にはcwebpコマンドを使う．

cwebp hoge.png -o hoge.webp

なお，webpは圧縮画像でありながら透過色にも対応している．特にオプションも必要ない．

サイズを確認すると342KBから25KBまで圧縮できた．強すぎん？

ここまでの作業で読み込み速度は劇的に変わりPageSpeed Insightsからもお褒めの言葉をいただいた．

しかし，ここまでやっておきながらとてつもなくページのロードを遅らせている要因はある．それはDisqusだ．こいつがクッソ激烈に遅い．遅すぎる!!

正直コメントも全く無いのでなくしても良いのだが，一応付けておきたいため今回は見逃した．しかし，ものすごいロード時間と大量のクッキーやアクセスチェーンを要するため，これをつけるだけでサイトの評価は大きく下がる．他にコメント機能ないかなあ…

以下の作業でサイトの高速化に成功した．

皆さんもサイトの高速化をしてインターネットのトラフィックを減らそう！

Twitter

Bookmark

Pocket