2020など完成までの時間:2週間(40時間くらい)このたび、skskSketchを見た目含め大幅にリニューアルしました。いうのも、もともとはPCでの閲覧前提に作っていたのですが、Googleアナリティクスによるとモバイル(スマホ・タブレット)での閲覧が、全体の閲覧数比10%程度→50%強と、無視できない変化が発生していました。イラストサイトのため、トップページで画像を大量に読み込みます。Insightsでの速度評価は悪かったです。「しょうがないよなー画像多いし」と一度は諦めたものの、モバイル閲覧が多いとなれば少し本腰を入れて取り組むことに。「画像のデータサイズをコンパクトに」「コードを単純に」「画像を後に読み込む」と特殊なことではありませんが、結局サイトのほぼ全てに手を加える必要が出てきました。結果から先に書くと、11月23日現在でモバイル・PCともに100点に(!?)スコアがアップ。実際に閲覧くださるかたの感覚の方が正しいのですが、速度に関してひとまず問題ないサイトにはできたのかなと思います。Googleアドセンスを貼っていると、その広告用のスクリプトや画像によって大幅にスコアが落ちるので、そういったページは体感に任せるしかなさそうです。アニメーションやパララックス、カルーセルを盛り込んだサイトは華やかでカッコいいですが、「必須な情報を知りたい」という以外では、閲覧する方への利益となるのはやはり表示速度だろうと考え、skskSketchは「とにかく簡素に高速に」を心がけてリニューアルしました。適切なサイズの画像オフスクリーン画像の遅延読み込み画像の多いサイトなので、まず優先すべきは画像の扱い。画像の軽量化は悩むことなく「tinypng」を使うことで実現(もともと使ってたというのもある)。画像によっては7割もの容量削減をしてくれるというありがたいWebサービスです。続いて画像の遅延読み込み。これはかなりハマりました。Loadあたりです(なんてそのものズバリな名前...)。プラグインは諦め、JavaScriptで対応しました。備忘録まずは、footer.phpの終わり間際に、ダウンロードしたスクリプトのURLと、動作のタイミングについて記述。});</script>;</body>;</html>;このままではスクリプトを読み込んでいるだけで画像の遅延読み込みは実行されないため、imgタグを合うように直します。alt="画像がない場合の代替テキスト">一個ずつ変更はえらいこっちゃですが、幸いWordPressなので該当のテンプレートを修正すれば一括で完了。?><!--アイキャッチ画像のURL。?><!--対象の投稿のタイトル-->HTML、PHPの見直し画像の手入れをした段階でモバイル80点に届いたので、このまま完了でも良かったんですが、ダークモードやモバイルへのちゃんとした対応など、最近の情勢に近いところまで実装しておこうと考え、マークアップの方も手を入れました。11(340)PHPでの行数で表記。()内はHTMLになったときのもので、最終的に20行増えています。ヘッダーからのリンク先を増やした(3つ→5つ)スマホ、タブレット対応のヘッダーをつけた新旧ソート機能をつけたフッターでのタグ表示数、RSSやツイッターへのリンクを追加など情報量も増やしているので妥当なところではないかと思います。あとはWordPressテーマのファイル構成を見直して、テンプレートにすべきところはテンプレートに。これはあくまで自分の管理が楽になるということで。950CSSはセレクタの書き方を見直しておよそ3分の1に軽減。スマートフォンやタブレットを軸にしたサイトに切り替え、メディアクエリも縦長(portrait)/横広(landscape)の2系統での切り替えにとどめています。正方形デバイスとか出てきたらどうすんだろ?(機種ごとに画面サイズが違うのでもはやどうしたらいいのかわからなかったための対応とも言う)ちなみに過去のCSSではPC、タブレット、スマホでそれぞれ表示が変わったので、ある意味では機能の削減とも言えます。変化したのは、ダークモードへの対応で、CSSの変数を使ってカラー管理を簡略化したところです。CSSの初めの方で明るい版、暗い版に分けてカラースキームを決めておいて、要素ごとにその色を再利用する、という流れです。意外とサイト読み込み時間に影響を与えているのがTwitter、Webフォント、Googleアナリティクスなどの外部スクリプト。Googleアナリティクスは外せないので、まずはTwitterのシェアボタンを見直すことに。シェアボタンは、クリック/タップした際にログインの手間が発生します。そのワンステップがときに煩わしいのは確かなので、クリック/タップしたときにそのページのURLとタイトルをコピーするボタンに変更しました。クリック/タップするとアラートとともにコピーされます。SNS等にペーストしてご利用ください。Awesomeのみに。今回のリニューアル方針「とにかく簡素に高速に」からは外れるように思ったので、華やかさよりも速度重視にしました。サイトの華やかさはイラストで出そう...ということで。サイトの見た目に関して見た目もシンプルに見えるよう大幅に変え、「色のついているものはイラストだけ」を目指して改修。直近のバージョンではヘッダーが大きくヒーローイメージもありましたが、画面占有率が高すぎて個々の記事があるか見えないので削除。ロゴもスッキリしたものに変更。「描いてる」雰囲気を出すために手書き風文字+ペン・インクに。これはダークモードでの色変えに対応しないといけなかったので、インラインSVGで挿入。各イラストのタイトルやカテゴリー名も削除。そもそもサムネイルの見た目が良くなければ名前も何もないので画像を並べておくのみに。従来のと比べるとだいぶ変わりました。最初のはダサいなぁ...おわりに「画像をなんとかすればいいだろう」と始めた高速化ですが、ドキュメント構造から考えて少しずつ遅延の原因をつぶしていかないといけなかったので「高速化には魔法はない」を痛感しました。素早く表示したうえで感じの良いサイトにするには、このhover効果要る?デカく見せたいのはわかるけどここまで専有する必要ある?ロゴ目立ち過ぎじゃない?などの「自分が必要と思い込んでいるもの」と「本当に必要であろうもの」を分けた上で、簡潔にマークマップもしないといけませんでした。結果サイト全体を手直ししてシェイプアップすることに。skskSketchはイラストサイトなので、重要なのはやはり作品のクオリティです。今後とも描くものの質を向上していきます。個々のページではまだモバイルとPCでの速度に差が出ているため、それはおいおい修正を加えていきますが、まずは早くなった(であろう)サイトが、みなさんにとって使いやすいものであれば幸いです。出版系のDTPを生業のひとつとしておりますので、書籍、同人誌等ページもののデザインやイラストが必要な場合はお声掛けください。予算に合わせてお見積りします。広告2015-,よそいち。