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

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

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

#100 WEB表示速度高速化

WEB制作

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

公開日:
最終更新日:

サイトマップサイトマップ

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

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

アナリティクスによる速度比較
アナリティクスでの速度ビフォーアフター

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

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

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

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

2,838円 (税込)(Amazon参考価格)

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

Jquery
Bootstrap

脱 Jquery

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

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

脱 Bootstrap

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

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

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

Lazyload 画像遅延読み込み

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

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

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点達成できました。

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

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

ロリポップサーバーをハイスピードプランに変更しました

ロリポップのレンタルサーバーをプランアップしてハイスピードプランに変更しました。
詳細はこちら!

記事内で紹介している商品リスト
(価格はAmazon参考価格)

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

2,838円(税込)

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

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

2,948円(税込)

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

HTML5 & CSS3 デザインレシピ集

3,025円(税込)

HTML5 & CSS3 デザインレシピ集

HTML&CSSとWebデザインが 1冊できちんと身につく本

2,508円(税込)

HTML&CSSとWebデザインが 1冊できちんと身につく本

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

2,486円(税込)

【Amazon.co.jp 限定】1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

3,800円(税込)

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

1,958円(税込)

今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)

イラスト図解式 この一冊で全部わかるWeb技術の基本

1,848円(税込)

イラスト図解式 この一冊で全部わかるWeb技術の基本

WEB表示速度高速化の関連ページ

ロリポッププラン比較

ロリポップのプランの選び方を各プランと比較して解説

ロリポップのレンタルサーバーのプランからライトプラン、スタンダードプラン、ハイスピードプランの3つの違いをレビューしました

WEB表示高速化

WEB高速化のためのPHP&MySQL改善とサーバーのプランアップ

WEBサイトの高速表示をするために、サイトで使っているサーバー、PHPプログラム、SQLの書き方、画像の縮小をしました。

ロリポップサーバー設定

ロリポップサーバーを契約したらやっておきたい5つの設定

ロリポップサーバーのアクセラレーターの設定方法やPHPのバージョン変更などの簡単にできるサーバ設定5つを解説!

ロリポップサーバーの安定感

急なアクセス増加でも抜群の安定感 ロリポップハイスピードプラン

ロリポップハイスピードプランは価格も安く、表示速度も速い。 しかもアクセス耐性も高いとなるとほんと選んでよかったと思います

ハイスピードプラン

ロリポップ ハイスピードプランを半年使ってみた感想とレビュー

ロリポップのハイスピードプランを使って約半年。 気づいた事やオススメポイントをスタンダードプランと比較して記事にしました

ロリポップサーバー

初めてのレンタルサーバーならライトプランがオススメ

ロリポップのライトプランを14年間ずっと使っていました。 月額料金が安くて特に困ったこともなかったのでオススメです!

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

SEO titleとh

SEOで重要なtitleタグとhタグの使い方

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

GTM イベントトラッキング

GTMを使ってイベント計測を簡単に行う方法

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

構造化データとパンくずリスト

構造化データで作るパンくずリストとSEO

SEO上必須ともいえる構造化データ化されたパンくずリストの解説と、ユーザー目線で考えるパンくずリストの価値について

CPC改善策

アドセンスのアクティブビュー視認可能率をUPさせたらCPC改善

Google Adsenseの収益最大化施策として、CPCの改善に取り組みました。 CPCの大幅改善に成功!やったぜ!

アドセンスの収益構造

アドセンス広告の収益最大化のために収益構造を考える

Googleアドセンス広告の収益化を逆算して考えて、KPIを洗い出し、何をすれば良いかを設計しました。

レポート活用

アドセンスの4つのレポートを活用して効果測定

アドセンスの管理画面から使えるレポート画面をカスタマイズしたり、効果測定に使えるように広告ユニットを設定したりする方法!

クリック率改善

アドセンスのCTRをUPさせる方法とクリック率の高い広告種類

Googleアドセンスのクリック率の一番高い広告はモバイル全画面広告でした。 他にも効果の高い掲載位置などを解説

ブログ デイリーアクセスランキング

WEBフォント設定
1位

WEBフォント設定

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

ランダム表示バナー
2位

ランダム表示バナー

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

机上台
3位

机上台

机上台という机の上に設置し、モニターを置きデッドスペースになるモニターの下に空間を生み出す悪魔的発想の商品を使ってみました。

ノートPCスタンド
4位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

CZUR
5位

CZUR

面倒な領収書のスキャニングが超簡単に完了できるLens Proのレビューです。 テクノロジーの進化を体感してびっくりしました。

ここひえ
6位

ここひえ

ショップジャパンのパーソナルクーラー「ここひえ」を購入して使った感想と気づいたこと。 風を正面に受けると涼しいです

PHPの覚え方
7位

PHPの覚え方

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

CLS対策上級編
8位

CLS対策上級編

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

ミトラ
9位

ミトラ

肩こりは普段の姿勢と肩甲骨の稼働範囲の狭さが原因なので、肩甲骨のストレッチと正しい睡眠姿勢は大事だなと感じました。

GTMの導入
10位

GTMの導入

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなどを書いていきます。

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

レンタルサーバーならロリポップがオススメ!
10日間の無料体験はコチラ