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

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

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

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

 結果から先に書くと、11月23日現在でモバイル・PCともに100点に(!?)スコアがアップ。実際に閲覧くださるかたの感覚の方が正しいのですが、速度に関してひとまず問題ないサイトにはできたのかなと思います。

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

モバイルとPCのPageSpeed Insightsスコア

 アニメーションやパララックス、カルーセルを盛り込んだサイトは華やかでカッコいいですが、「必須な情報を知りたい」という以外では、閲覧する方への利益となるのはやはり表示速度だろうと考え、skskSketchは「とにかく簡素に高速に」を心がけてリニューアルしました。

やったこと一覧

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

対応する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のチェック項目
  • CSSの最小化
  • JavaScriptの最小化
  • JavaScriptの実行にかかる時間
  • 過大なDOMサイズの回避
改修前 改修後
65(320) 11(340)

  PHPでの行数で表記。()内はHTMLになったときのもので、最終的に20行増えています。

など情報量も増やしているので妥当なところではないかと思います。 あとはWordPressテーマのファイル構成を見直して、テンプレートにすべきところはテンプレートに。これはあくまで自分の管理が楽になるということで。

CSSの見直し

改修前改修後
2468950

 CSSはセレクタの書き方を見直しておよそ3分の1に軽減。スマートフォンやタブレットを軸にしたサイトに切り替え、メディアクエリも縦長(portrait)/横広(landscape)の2系統での切り替えにとどめています。正方形デバイスとか出てきたらどうすんだろ?(機種ごとに画面サイズが違うのでもはやどうしたらいいのかわからなかったための対応とも言う)

ちなみに過去のCSSではPC、タブレット、スマホでそれぞれ表示が変わったので、ある意味では機能の削減とも言えます。

 もっとも変化したのは、ダークモードへの対応で、CSSの変数を使ってカラー管理を簡略化したところです。CSSの初めの方で明るい版、暗い版に分けてカラースキームを決めておいて、要素ごとにその色を再利用する、という流れです。

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

外部スクリプトの削減

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

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

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

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

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

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

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

サイトの見た目に関して

 見た目もシンプルに見えるよう大幅に変え、「色のついているものはイラストだけ」を目指して改修。直近のバージョンではヘッダーが大きくヒーローイメージもありましたが、画面占有率が高すぎて個々の記事があるか見えないので削除。

 ロゴもスッキリしたものに変更。「描いてる」雰囲気を出すために手書き風文字+ペン・インクに。これはダークモードでの色変えに対応しないといけなかったので、インラインSVGで挿入。

 各イラストのタイトルやカテゴリー名も削除。そもそもサムネイルの見た目が良くなければ名前も何もないので画像を並べておくのみに。

サイトデザインやロゴのビフォーアフター

従来のと比べるとだいぶ変わりました。しかし最初のはダサいなぁ…

最初のはダサい

おわりに

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

などの「自分が必要と思い込んでいるもの」と「本当に必要であろうもの」を分けた上で、簡潔にマークマップもしないといけませんでした。結果サイト全体を手直ししてシェイプアップすることに。

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

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

宣伝

 出版系のDTPを生業のひとつとしておりますので、書籍、同人誌等ページもののデザインやイラストが必要な場合はお声掛けください。予算に合わせてお見積りします。まずはご相談からどうぞ。
お問い合わせフォーム | skskSketch 〜スケスケスケッチ〜

いやー100点取るのなんて何年ぶりだろう…

広告