WordPressのイラストサイトをPageSpeed Insightsでモバイル・PC双方10080点以上にした話


 このたび、skskSketchを見た目含め大幅にリニューアルしました。というのも、もともとはPCでの閲覧前提に作っていたのですが、Googleアナリティクスによるとモバイル(スマホ・タブレット)での閲覧が、全体の閲覧数比10%程度→50%強と、無視できない変化が発生していました。

 イラストサイトのため、トップページで画像を大量に読み込みます。画像サイズの圧縮、CSSやJavaScriptの軽量化により、ある程度は早くしていましたが、それでもPageSpeed Insightsでの速度評価は悪かったです。

 「しょうがないよなー画像多いし」と一度は諦めたものの、モバイル閲覧が多いとなれば少し本腰を入れて取り組むことに。「画像のデータサイズをコンパクトに」「コードを単純に」「画像を後に読み込む」と特殊なことではありませんが、結局サイトのほぼ全てに手を加える必要が出てきました。

 結果から先に書くと、11月23日現在でモバイル・PCともに100点に(!?)スコアがアップ。2022年2月現在ではモバイル80点以上、PC95点以上というくらいになっています。もう…100点じゃないんだ…

 Googleアドセンスを貼っていると、その広告用のスクリプトや画像によって大幅にスコアが落ちるので、そういったページは体感に任せるしかなさそうです。

デバイスごとのスコア(2022年2月)
やったこと一覧

画像の軽量化および遅延読み込み

対応するPageSpeed Insightsのチェック項目

 画像の多いサイトなので、まず優先すべきは画像の扱い。

 画像の軽量化は悩むことなく「tinypng」を使うことで実現(もともと使ってたというのもある)。画像によっては7割もの容量削減をしてくれるというありがたいWebサービスです。

 続いて画像の遅延読み込み。これはかなりハマりました。WordPressでよく名前が挙がるプラグインは

あたりです(なんてそのものズバリな名前…)。

 しかしこれらのプラグインでは、いくら読み込みを待っても画像が真っ白なままで、解決法を試しても全滅… プラグインは諦め、JavaScriptで対応しました。

スクリプト本体

GitHub – tuupola/lazyload: Vanilla JavaScript plugin for lazyloading images

使い方

lazyload(1.x系と2.x系)の使い方 – 淡々日和 – 備忘録

 まずは、footer.phpの終わり間際に、ダウンロードしたスクリプトのURLと、動作のタイミングについて記述。

--前略--
 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/lazyload-min.js">;</script>
<script> window.addEventListener("load", function(event) {
  let timeout = setTimeout(function() {
   lazyload();
     }, 1000);
    });</script>;
</body>;

</html>;

 このままではスクリプトを読み込んでいるだけで画像の遅延読み込みは実行されないため、imgタグを合うように直します。

<img class="lazyload" src="遅延読み込み用の代替画像のパス" data-src="実際に必要な画像のパス" alt="画像がない場合の代替テキスト">

 一個ずつ変更はえらいこっちゃですが、幸いWordPressなので該当のテンプレートを修正すれば一括で完了。

<?php if (has_post_thumbnail()) : ?>
			<img class="lazyload" src="<?php echo get_template_directory_uri(); ?>/images/loading.gif" data-src="<?php the_post_thumbnail_url('large'); ?>" alt="<?php the_title(); ?>">

phpの意味

<?php if (has_post_thumbnail()) : ?><!--アイキャッチ画像が投稿に設定されていれば-->
<?php echo get_template_directory_uri(); ?><!--テーマのテンプレートのあるURL-->
<?php the_post_thumbnail_url('large'); ?><!--アイキャッチ画像のURL。'large'、'medium'、`thumbnail`から任意に設定-->
<?php the_title(); ?><!--対象の投稿のタイトル-->

HTML、PHPの見直し

 画像の手入れをした段階でモバイル80点に届いたので、このまま完了でも良かったんですが、ダークモードやモバイルへのちゃんとした対応など、最近の情勢に近いところまで実装しておこうと考え、マークアップの方も手を入れました。

対応するPageSpeed Insightsのチェック項目
改修前 (〜2020/12) 改修後 (2021/1〜)
11(340) 9(390)

  PHPでの行数で表記。()内はHTMLになったときのものです。管理のしやすさも考えナビゲーション、凡例、サムネイルギャラリーをphpでパーツ分割していて、コード量はむしろ以前よりも増えています。

など情報量も増やしているので妥当なところではないかと思います。

CSSの見直し

改修前改修後
950(minifyなし)1500(1)

 CSSは、個別投稿ページでの要素が増えたので、それにともなって増加。アップロードする前にVS Codeの拡張機能でminifyするようになったので最終的には1行(でも、ほんとに効果あるのかなこれ)

 基本を背景黒+メインカラー緑のダークモードとし、夜以外の時間帯にはサイトの色が背景グレー+緑に変わります。これは、CSSの変数によるもので、CSSの初めの方で明るい版、暗い版に分けてカラースキームを決めておいて、要素ごとにその色を再利用する、という機能を使っています。

カスタムプロパティ (–*): CSS 変数
CSSで変数(カスタムプロパティ)を使ってみよう | Webクリエイターボックス

外部スクリプトの削減

 意外とサイト読み込み時間に影響を与えているのがTwitter、Webフォント、Googleアナリティクスなどの外部スクリプト。

 Googleアナリティクスは外せないので、まずはTwitterのシェアボタンを見直すことに。

 シェアボタンは、クリック/タップした際にログインの手間が発生します。そのワンステップがときに煩わしいのは確かなので、クリック/タップしたときにそのページのURLとタイトルをコピーするボタンに変更しました。

 クリック/タップするとアラートとともにコピーされます。SNS等にペーストしてご利用ください。

URLコピー完了のアラート 使用例

 Webフォントに関してはTypekitとFont Awesomeを使っていたのをFont Awesomeのみに。

 今回のリニューアル方針「とにかく簡素に高速に」からは外れるように思ったので、華やかさよりも速度重視にしました。サイトの華やかさはイラストで出そう…ということで。

サイトの見た目に関して

 サムネイルを正方形にして、ファーストビューに並ぶ画像を増やしました。

見た目はあまり変わらないがコードをごっそり変更

しかし最初のはダサいなぁ…

最初のはダサい

おわりに

 素早く表示したうえで感じの良いサイトにするために、結果サイト全体を手直ししてシェイプアップすることに。

 「画像をなんとかすればいいだろう」と始めた高速化ですが、ドキュメント構造から考えて少しずつ遅延の原因をつぶしていかないといけなかったので「高速化には魔法はない」を痛感しました。

 skskSketchはイラストサイトなので、重要なのはやはり作品のクオリティです。 今後とも描くものの質を向上していきます。

 個々のページではまだモバイルとPCでの速度に差が出ているため、それはおいおい修正を加えていきますが、まずは早くなった(であろう)サイトが、みなさんにとって使いやすいものであれば幸いです。

宣伝

 Skebやってます。「これ描いてくれ」というのがあればどうぞ!

よそいち3 (@VArghhhhhhhhhhh) | Skeb

               

広告

   

コメントする

★マークのある項目が必須項目です。メールアドレスは公開されません。

CAPTCHA


内容を確認して、送信してください(プレビューはされません)。コメント内では<strong>、<code>、<em>のタグが使えます。

こちらもいかが

新しい作品

アピアランスのジグザグ効果で素体を作るひもパターンブラシ
アピアランスのジグザグ効果で素体を作るひもパターンブラシの描き方

過去の作品

ハロウィン2019