前田デザイン室公式サイトパフォーマンス改善

課題

前田デザイン室公式サイトの表示速度が遅い。

whats.maeda-design-room.net

PageSpeed Insightsの測定結果
スマホ:35
PC:68

スマホ表示の体感速度は5秒以上。とても遅い。

ゴール

PageSpeed Insightsでスマホ・PCのスコアを90以上に改善する

※最低限50あれば良いとの話があるが、せっかくなので90を目標にする

測定方法

各改善ごとに3回計測し、ベストな点数をとる

正しく結果を評価するには、何回か計測を行い、その中で最良の点数を使います。PageSpeed Insightsはサーバーに負荷をかけるので、計測回数は2~3回で良いでしょう。

PageSpeed Insightsの点数の上げ方│クロール対策│CLUSTER SEO BLOG

 

やったこと

1.フォント・CSSの遅延読み込み: 35→56(+21)
linkタグにmedia属性とonload属性を追加。
該当しないmedia属性を指定すると、非同期で読み込めるという裏ワザ。
これが一番効果が大きかった。

The Simplest Way to Load CSS Asynchronously | Filament Group, Inc.

<link rel="stylesheet"
media="print"
onload="this.media='all'"/>

 

2.画像の圧縮: 56→62(+6)
すべての画像ではなく、PageSpeed Insightsで指摘された画像のみ圧縮。

圧縮サイト

TinyPNG – Compress PNG images while preserving transparency

 

3.画像の遅延読み込み: 62→57(-5?)
初期表示でスクロールしないと見えないエリアにある画像を遅延読み込みさせる。

こうすることでページ自体の読み込みが速くなる。
使ったライブラリは「echo.js」。

GitHub - toddmotto/echo: Lazy-loading images with data-* attributes

jQuery不要の軽量レイジーロード!echo.jsの使い方

と思ったが、点数としては、下がった。
オフスクリーン画像の遅延読み込み」の項目は1.8s→0.15sまで短縮できたが、他の項目に影響が出たと思われる。

なお、遅延読み込みはlazyloadというライブラリがメジャーなようだが、今回はただシンプルに遅延読み込みができればよかったため最も軽量という理由でecho.jsを選んだ。

LP高速化のために5つの画像の遅延読み込みライブラリを比較した - Qiita


4.CSSの遅延読み込みをやめる:57→60(+3)
評価指標のひとつに、ページ読み込み後のレイアウトのズレの少なさがある(CLS)。
1でCSSを遅延読み込みさせたところ、初期表示後にレイアウトのずれが大幅に出ていたので元通り普通に読み込むようにした。

ウェブに関する主な指標レポート - Search Console ヘルプ

 

5.ダミー画像サイズの指定:60→62(+2)

3の対応にて、スクロール外の範囲はダミー画像を初期で読み込むようにしたが、そのサイズが元画像のサイズと異なっており、その影響でCLSが悪化したと考えられる。一律で同じダミー画像を当てず、元画像と同じサイズのダミー画像を複数用意したところ、若干数値が回復した。

6.jQueryほかscriptの非同期読み込み:62→65(+3)
ヘッダーとフッターを共通ファイルにし、jQueryで読み込んでいたため非同期読み込みにできていなかった。
メンテナンス性は下がるが、TOPページのみヘッダー・フッターを直書きし、jQueryの読み込みでdeferを指定するようにした。
Google AnalyticsGoogle Tag Managerなどのスクリプトは、すべてasyncを指定。
その他scriptタグには極力deferを指定。
Page Speed Insightsで0点→96点に上げるために当店がやったこと | 志木駅前のパソコン教室・キュリオステーション志木店のブログ

7.JSのminify:65→65(+0)

JSはファイル数が少なかったため個別圧縮して上書き。行数も少ないからか、数値は変わらず。

 

8.CSSのminify:65→68(+3)
SCSSを使っているため、コンパイルと同時に圧縮する方法がないか調査。
下記の記事通り、Live Sass Compilerの設定を行うだけで簡単に圧縮できた。

https://monoxa.net/2019/04/how-to-minify-sass-directly-with-vsc/

 

以降9-11を同時進行で進めた結果、1度だけスコアが74まで上がったが、そこから数回図っても60-65の間にとどまった。

 

9.フォントの同時読み込み
2種類のGoogleフォントを別々のタグで読み込んでいたが、同時に読み込む方法があった。アクセス数が減るため、若干速くなるはずだがPageSpeed Insightsの数値的変化はなし。

Google Fontsのパフォーマンスを最適化する6つの方法

 

10.必要なウェイトのみフォントを読み込み

今までどのページも一律でfont-weight 400, 500, 700を読み込んでいたが、TOPページでは700を使用していなかったため削除した。

 

11.preconnectでfonts.gstatic.comを非同期読み込み

読み込んでいるgoogleフォントのリクエスト先(↓)を見ると、内部でさらにfonts.gstatic.comを呼び出していることがわかる。
https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400

この読み込みが終わるまでほかのプロセスが止まるという話だったので、プリコネクトによってこのfonts.gstatic.comの読み込みを待たずに他の処理ができるようにした。

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Google Fontsのパフォーマンスを最適化する6つの方法


結果
11月中での最高スコアは、
PC→95点、スマホ→74点となり、PCは目標達成。

スマホで70点台が出たのは1度のみで、平均は60-65点ほどとなった。

目標達成できなかったものの、改善前よりは大分表示で待たされることがなくなった。

考察

スマホでPageSpeed Insightsのスコアを上げようと思ったら、本腰入れてスコア算出の仕組みやブラウザの表示の仕組みを理解する必要がある。理解しないまま色々な記事を手当たり次第に試しても、PCに関してはあまり苦労なく90点以上になったが、スマホでは60点台から抜け出せなかった。

・表示速度を意識した設計が大切。今回サイト内では、ヘッダー・フッターを共通化してjQueryで各HTMLに埋め込んでいたが、その方法だとjQueryを読み込まない限りファーストビューが表示されなくなる。ファーストビューに関わる部分は、jQueryを使わずに共通化する方法を考える必要がある。

・今回はサーバー側の設定は触らなかったが、ローカルと公開中のページでLCP※が500msほど異なるため、よりスコアを上げるにはサーバー側の設定を見直す必要がある。
※Largest Contentful Paintの略。ファーストビューにおいて占有率が高いコンテンツが表示されるタイミング。

・JSファイルを小分けにしているため、webpackを使うとより改善できる見込み。

 

30日バナートレース No.13 ドット・シェイプ形成ツール

f:id:shimuo:20200515075448p:plain

13日目の題材

インテリア・雑貨、ファッション、イラスト、カジュアル、かわいい、キャンペーン、スタイリッシュ・おしゃれ、セールのバナー | 20% POINT CAMPAIGN | BANNER LIBRARY

トレース結果

f:id:shimuo:20200515080102p:plain

トレース結果

フォントは今回も仮置き

Good

  • シェイプ形成ツールでアートボードからはみ出た部分を除去
  • ドットパターンをスウォッチに追加

Motto

  • ドットパターンの切れ目が中途半端

デザイン考察

  • ランダムに見えるがグリッドに沿って配置されている
  • 左のピンクの丸と右上のロゴは正円という共通点がある
  • 横書きの日付を縦にすることで、グリッドラインを強調する効果がある

f:id:shimuo:20200515080754p:plain

ランダムに見えるがテキストは隠れた四角形の内部に配置されている

学んだこと

基本の図形を一つ作ってスウォッチパネルに追加するという方法を使えば、ドットに限らず色々なパターンが作れる。ドット以外も作ってみたい。

adlive.co

おわりに

今まで規則性がないと思っていたデザインは、よく見ると規則性があるかもしれない。

30日バナートレース No.12 ギンガムチェック・かすれ加工

f:id:shimuo:20200514083209p:plain

12日目の題材

飲料・食品、カジュアル、ポップのバナー | MY BEER SELECTION | BANNER LIBRARY

トレース結果

f:id:shimuo:20200514083325p:plain

トレース結果

 

実績

35分

Good

f:id:shimuo:20200514213740p:plain

デフォルトのアンダースコアはベースラインよりも下がっている

Motto

  • 「応募」を「応援」と間違えた→想像で文字を読まないようにする
  • ギンガムチェックのラインごとにペンキで塗ったような感じにする

ギンガムチェックスウォッチパネルから塗りで作らず、はじめからブラシで線を引けば良かった

 

デザイン考察

  • 黄色はビール色、水色は何だろう?
  • 手書き感があり、「自分でつくる」のイメージとマッチ
  • 文字の太さ・色の濃さから、「こだわり」を感じる
  • なぜチェックにしたのかはわからない

学んだこと

webkcampus.com

sassamahha.me

課題

  • 手頃な難易度かつ新しいテクニックを使うお題を探すのに時間がかかる。

バナートレース集でもあったらいいのかも・・・

おわりに

ブラシ加工は楽しい!

30日バナートレース No.11 フォント選定

f:id:shimuo:20200513070835p:plain

11日目の題材

メディア・イベント、飲料・食品、イラスト、シンプル、ポップ、文字組み・文字だけのバナー | おいしいはなしを聞きに行く | BANNER LIBRARY

トレース結果

断念!

実績

60分

 

あまりにもフォント探しが難航したため、調査のみに振り切った。

f:id:shimuo:20200513083115p:plain

フォント調査結果
  • 中ゴBBB:モリサワフォント。Illustrator単体プランでは使えず。。
  • 平成丸ゴシック:標準でインストール済み。
  • アルファベット・数字のフォントはドンピシャなものが見つからず。。

f:id:shimuo:20200513083542p:plain

どれもちょっとずつ違う

デザイン考察

  • 左側の弧を描いているテキストから、手のイラストを通じ、右側の登壇者へ視線を誘導している
  • TALK SHOWを左のテキストとは逆の弧にすることで、動きを出している
  • 助詞の「を」と「に」を他の文字よりも小さくしている
  • フォントを4種類使うことで、少ない色使いの中で面白みを出している

学んだこと

  • フォントを見る目は1日にしてならず

www.amazon.co.jp

知識を得るために購入。

フォントに関してはバナートレースの30分で身につけようとせず、毎日少しずつ見慣れていこうと思う。

課題

  • 都度フォント検索していると時間がかかるため、当たりをつけられるようになる。
  • フォントがわかったところで、インストールされていない・フリーでないものもある

→フォントについては今後のバナートレースではこだわらず、別途強化する場を作ることにする。

おわりに

ついにトレースできない回がでてしまったが、トレースを試みたことで課題がわかり、今後のトレースで注力するポイントが明確になったという点で価値があった。

30日バナートレース No.10 フォント選定

f:id:shimuo:20200512082134p:plain

10日目の題材

インテリア・雑貨、ファッション、イラスト、カジュアル、シンプル、スタイリッシュ・おしゃれ、メンズライク、父の日のバナー | Father’s Day 2019 by SHIPS | BANNER LIBRARY

トレース結果

f:id:shimuo:20200512082502p:plain

トレース結果

実績

35分

Good

  • バッグの四角と取っ手の手描き感を個別に調整(パスの変形>ラフ)

Motto

  • 字間調整を文字ごとに行う
  • 同じフォントを探す
  • 取っ手の線がバッグの四角にはみ出ている
  • バッグの取っ手の左側の線幅を細く

f:id:shimuo:20200512215554p:plain

見本では個別に字間調整していることがわかる

デザイン考察

  • ひげとバッグのイラストと落ち着いた3色使いで「父の日の買い物」を表す
  • ゴシックと四角いバッグで男性感を出しつつ、手描きのような線・丸みのあるフォントを使い、柔らかさを出している
  • イラストの高さがテキストよりも大きいが、テキストがBoldで、ある程度幅もあるのでバランスがとれている

学んだこと

  • 均等に字間調整したあと、さらに個別に調整する必要がある
  • Boldでもフォントによって太さが違う
  • パスの変形>ラフは、曲線と直線で個別に調整する必要がある

f:id:shimuo:20200512215038p:plain

取っ手の手描き感に合わせて「丸く」を選択すると、四角の角が丸くなる

f:id:shimuo:20200512215224p:plain

四角の手書き感に合わせて「ギザギザ」を選択すると、取っ手がガタガタになる

課題

  • フォントの種類が多く、同じものを探すのに時間がかかる。数字は特に。

おわりに

10日経って最低限のツールの使い方には慣れてきたが、新しい手法を学ばないと次に作れる題材がなくなってしまう。今後は極力1日1つ新しい機能を試す。

30日バナートレース No.9 写真の埋め込み

f:id:shimuo:20200511083114p:plain

9日目の題材

アウトドア・スポーツ、インテリア・雑貨、ファッション、カジュアル、シンプル、スタイリッシュ・おしゃれ、メンズライクのバナー | CHOOSE YOU, CHOSEN ME. | BANNER LIBRARY

トレース結果

f:id:shimuo:20200511083311p:plain

トレース結果

実績

30分

Good

  • 長方形を4分割して写真を埋め込んだ
  • 見出しのフォントを調べた(Futura BQ Lightっぽい)

Motto

  • 枠の色が見本よりも暗い
  • 右下のテキストのフォントをあわせる

デザイン考察

  • 写真の中の人物が左右二人ずつ外側を向いておりバランスがとれている
  • すべての写真の中に光があり統一感がある
  • 細身のテキスト・細身の線によりすっきり・風通しがよい

学んだこと

  • あらかじめ配置が決まっているときは、枠を作ってから写真を流し込むと良い。枠を作成→「内側描画モード」→写真の配置で完成。

hitori-koho.com

課題

  • スポイトツールで見本から色をとってもなぜか暗い。JPEG画像からとる位置によって若干色が違うせいなのか、他に原因があるのか不明。次は拡大して、一番近い色をとってみる。

おわりに

30分だと新しいことを一つ試すのでギリギリ。まだ要素数が多いものは避けているので、もう少し手が速くなるように練習してチャレンジする。

30日バナートレース No.8 ラフ線・ざらざら感

f:id:shimuo:20200510170306p:plain

8日目の題材

インテリア・雑貨、ファッション、イラスト、カジュアル、かわいい、スタイリッシュ・おしゃれ、文字組み・文字だけのバナー | LINE配信登録のお願い | BANNER LIBRARY

トレース結果

f:id:shimuo:20200510170215p:plain

トレース結果

実績

40分

Good

  • ざらざらの画像でマスクを作成
  • 手描きのようなラフな線
  • NEWSのフォントを似せた(でもまだ違う)

Motto

  • 吹き出しの中の線をラフにし忘れた
  • 見出し以外のフォントも合わせる

デザイン考察

  • 吹き出しとブランドカラーを使った配色でひと目でLINEとわかる
  • 丸みのある文字・手描きのような線で親しみを感じる

学んだこと

  • 手描きのような線にするには、パスの変形>ラフを使う
  • フォントを選ぶときは「round」「bold」などの特徴をキーワードに絞り込むと似たフォントを探せる

f:id:shimuo:20200510171527p:plain

フォントを選ぶときはキーワードでの絞り込みが便利

課題

  • マスクに使ったざらざら素材の画像は別の練習で使ったものだが、持っていない場合はどこから探せば良いかわからない。素材の見つけ方も今後調べてみる。

おわりに

素材の加工のバリエーションが増え、表現の幅が広がってきた。
できることが増えると楽しい。