WEBページの表示速度高速化のためにやったこと辞めたこと

WEB表示速度は速いほうがページの離脱防止やユーザーの満足度向上につながるというわけで、大きいことから小さいことまでやりました

WEBページ表示速度改善のためにやった7つ以上の施策

WEB表示速度高速化

WEBページ表示高速化のために、Jquery、Bootstrapを辞めて、Lazyloadを導入し、CSSの書き方を工夫しました。スピードテストの結果施策前後で30%ほど効果改善が見られたので、やったことの一覧とビフォーアフターの検証画像。

公開日:
最終更新日:

WEB表示速度高速化 関連ワード
高速化
ロリポップ
CSS
表示速度改善
  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る

WEBサイトの表示高速化のために行った7つ以上のこと

サイトの全体設計から見直しをはかり、サイトの高速表示をテーマに2019年11月3日にリニューアルをしました。
高速化のかいあって、表示速度がかなり改善されたので、そのときにやったことを書き留めておきます

アナリティクスによる速度比較

アナリティクスでの速度ビフォーアフター

リニューアル前後の比較なんですが、よくわからんですね。
オレンジがリニューアル前で、青が現在。
グラフが下にあるほど良いので、30%くらい改善されたのではないかと思います。
悪いところはイレギュラーで悪い気がするので無視。

表示速度改善にオススメな参考書

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門 プログラミング入門書 【HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門】

2,838円 (Amazon価格)

高速化のために辞めたもの

Jquery
Bootstrap

脱 Jquery

Javascriptのライブラリで便利なんですけど、WEB業界の流れも脱Jqueryに傾いてますね。

今までは全ページで読み込んで使ってたんですが、基本使わないようにしました。
どうしても使う時はそのページ限定。

脱 Bootstrap

BootstrapはCSSのフレームワークで、レスポンシブ対応のWEBサイトを作るのに重宝しますが、Jqueryに依存している点と、FlexBoxがいい仕事してくれるので、なくてもレスポンシブに作れるのでこれも廃止。

JqueryとBootstrapを辞めるってことは1から作り直しを意味しますね。

高速化のためにとりいれたもの

Lazyload 画像遅延読み込み

Lazyloadは、画像の遅延読み込みと言われるもので、画像を読み込む必要がない箇所では画像を読み込まず、表示エリアに近づいたら画像を表示させる、という技です。

使っているほぼすべての画像に data-src と class="lazy" を振り直し。そのうち標準で遅延読み込みができる日が来るでしょう。

Google タグマネージャー

アナリティクスくらいしか使ってないので、タグマネ入れてなかったんですが、タグマネージャーからアナリティクスを呼んだ方が、遅延読み込みや minify が効いて早くなるとのことで導入しました。

イベントの取得が簡単にできるようになったという副産物もGET。

PHP 7.3モジュール版

これは正確に言うとリニューアル後に導入したんですが、バージョンUPして、モジュール版に変更したら体験の表示速度が変わった気がしました。
それまではPHP7.1 CGI版

このサイトはロリポップのスタンダードプランで作られています。

表示高速化のためにやったこと

デザイン・レイアウトの変更

ブラウザ、モニターの幅に合わせてヘッダー画像などを大きくしていたんですが、デザインレイアウトを変更して横幅の最大値を設けました。
これにより画像の最大の横幅に縛りができて、画像の大きさの適正化と軽量化ができたと。

PHPプログラムの変更

このサイトは自作CMSで作っているんですが、そこの根幹にあるプログラムを変更。
ここは参考にならないので詳細は割愛。

DB連携と呼び出し方法の変更

ここも詳細は割愛。DBへのアクセス回数を減らした。

CSSの作り方と考え方を大幅に変更

CSSは今までサイト全体に適用するCSSを1枚、パーツ事のCSSなどを全ページ共通で読み込ませていたのを、共通部分のCSSだけを共有で読み込ませ、その他のCSSはページごとに書くようにしました。

共通CSSで、1st Viewのレンダリングに関わる箇所は直書きに変更

SCSSで書いたCSSをCompassで書き出し、それをコピペして、PHPのecho で<head>に直接記述(インライン化)に変更。

PHPで管理することで、変更が入った場合もこのPHPを変更するだけでOKなので、メンテナンス性を確保しつつ、スピードを上げる。

共通部分で1st Viewではない箇所は遅延読み込み

CSSの遅延読み込みという技があることを知りまして、遅延読み込みで影響のない場所はそれで対応しました。

<link rel="preload" type="text/css" href="cssのパス" as="style" onload="this.onload=null;this.rel='stylesheet'">

こんな感じで書きます。詳細は参考サイト張っておきますので興味のある方はそちらを。

読み込み中

CSSの作り方の変更

SCSSでCSS書いていますが、SCSS便利な反面、気を付けないとネストが深くなるので、深くしすぎないように注意しながら作りました。
個人的にはクラス名をなるだけ振らずに作るのが好きだったんですが、高速化にはよろしくない書き方だそうで。

クラスを振って、それを指定するのがベスト。 body h2{ CSS; } のようにセレクタを深くするのはNGと。

読み込み中

ちなみにこの事実をリニューアル完成直前に知って、色々と書き直す羽目に。

従来通り続けてた表示速度高速化対策

jpg png画像の圧縮

TinyPNGでの圧縮。これはやらないといけないやつ。
そのうち有料のプラグインを買おうかとも検討中。

画像圧縮のオンラインサービス TinyPNGはこちら

読み込み中

htaccessによるキャッシュ

適正値が良くわからないんですが、私は以下のようにしてます。

ExpiresActive On
ExpiresByType image/png "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType text/js "access plus 1 months"
ExpiresByType text/javascript "access plus 1 months"
ExpiresByType application/javascript "access plus 1 months"

画像ファイルの「PNG」「JPG」「GIF」「SVG」とCSS、JSを1ヵ月間キャッシュせよと。

CSS JS HTMLの minify

コードの圧縮、最小化ですね。
このサイトのコードの見た目が汚いのはスペースを排除して書いているからです。
効果があるのかは不明。

JavascriptのMinifyがうまくいかないときがありますが、そんなときは手動で頑張ってスペース削ってました。

Javascript、CSSのMinifyはこちらがオススメ

読み込み中

表示速度 高速化対策の結果

冒頭に書いた通り、改善されたんですが、ほかの指標も表示しますね。

ローカル環境でGoogle系のタグを入れない状態で100になるように作ったんですけどね、Googleのタグ入れると遅くなるんですよねぇ。

アナリティクスによる速度比較

PageSpeed Insightsの結果

PCは100点、モバイルは69点。
むー。モバイルの速度が課題なんだけど、改善アドバイス見ると第三者サイトのやつばかりなので、どうしたものかと。

WEBマスターツール上のスピードテスト結果

ある日突然お目見えしたWEBマスターツール上のスピードテスト結果。

アナリティクスによる速度比較

サーチコンソール結果

こっちの結果は反映されるまでにタイムラグがあるようで、低速が全然減らなくてヤキモキしてました。
PC100点なのに低速とはどういうことだ!と。

徐々に高速が増えているので、PCは大丈夫かなと思います。

SEOの順位変動を期待してたけどその他の要因のが大きいので不明

表示速度の改善をして、サーチエンジンの順位改善されないかなぁと思ってたんですけどね、2019年9月以降グーグルのアップデートが頻発して、よくわからない状態になりました。

順位だけみても高速化のおかげで順位があがった、という結果は感じられず。なんなら下がったしなぁ。

Googleサイドの発表を素直に受け取ると、表示速度が遅いサイトは悪影響があるといってたけど、早ければ好結果になるとは書いてなかったので、直接強い要因になるわけじゃななさそうですね。現時点では。

将来的にこの要素が幅を利かせてきそうな予感はビンビンしてますけどね。

サーバーのプラン変更も検討中

まだまだ改善の余地はあるけれど、一定の成果を残せた表示高速化を振り返ってみました。

正直、ロリポップのスタンダードプランだとサーバースペックで100点出すの無理なんじゃないかと少しばかり思っていたのですが、PCのみですが100点達成できました。

ロリポップが、ハイスピードプランというド直球の高速表示をうたっているプランを出してきたので、乗り換えてみようかなぁと検討しています。

もし乗り換えたらまた、こちらのブログで報告させていただきます。

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

プロフィール詳細はこちら

文中で紹介している商品

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門

HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門 プログラミング入門書 【HTMLコーダー&ウェブ担当者のためのWebページ高速化超入門】

2,838円 (Amazon価格)

WEBレンタルサーバー 関連記事はこちら すべての WEB制作 記事はこちら

ブログ人気の記事・レビュー

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 39歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

プロフィール詳細はこちら

WEB表示速度高速化関連・オススメ商品 amazon