• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

株式会社ハイファイブクリエイト

東京都を拠点にWebサイト制作やシステム構築、WordPress保守管理やウェブコンサルティングを提供。

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / ホームページ制作 / 初心者でもわかる!Webサイトの高速化を検証しながらやってみた

初心者でもわかる!Webサイトの高速化を検証しながらやってみた

池田祐太郎 | 2013年8月10日 公開

アクセスが上がらない
申し込みが増えない

これらの理由は「記事が少ない」「充実していない」「動線が悪い」 etc…
色々と原因はありますが、一つの要因としてホームページが重すぎること、いわゆる読み込みに時間がかかっていることが原因かもしれません。

先日、出張サポートにてアドセンスからの収入があるときから落ちたという相談を受けました。
Webサイトの読み込みスピードを確認できるツールでみてみると、確かに遅くなっている要因を発見。

そこで今回はこのような状況を改善するべく僕の環境でテストしたところ、読み込みにかかっていた時間が54%ダウンし体感でもかなり早いと感じるように!

ツールの使用方法からスピードの確認、原因の突き詰めと解消方法まで実例を交えてご紹介します。

目次

  • 1 まずは現在の状況と読み込み速度を確認
  • 2 まずは読み込み時間と容量を落とす
    • 2.1 pngファイルの色数を落とす
  • 3 ブラウザのキャッシュを活用せよ
    • 3.1 キャッシュの設定
    • 3.2 .htaccessに以下のコードを足す
  • 4 体感レベルではどうか

まずは現在の状況と読み込み速度を確認

Googleが社内で使っていたページ高速化のツール、PageSpeed Insightsを使って、ウェブサイトの読み込みスピードをチェックしましょう。

PageSpeed Insights

PageSpeed Insights_after

URLを入力するとモバイルとPCの2種類のサイトの読み込みスコアが出てきます。ちょうど赤枠で囲った部分ですね。
このスコアが5,60台以下であればかなり改善の余地あります。

このツールは「どこを直せばいいか教えてくれる」ツールであって、実際にこれを見て手を動かすのはほかならぬ自分です。
そもそも英語だし、難しい用語がたくさん出てくるのですが、確認する箇所は決まっていてわかればどうってことないのでご安心ください。

では次にもう一つ測定ツールを使ってみましょう。
Website speed testという、これも測定ツールです。

Website speed test

Website speed test

このツールは読み込み速度、全体の容量、他のホームページとくらべてどのくらい遅い/速いかなどを教えてくれるツールです。
測った所で、ビフォーアフターがわかるように測定結果のページは残しておくと「どのくらい良くなったのか目で見てわかって楽しい」とおもいます 笑

まずは読み込み時間と容量を落とす

Website speed testの方からいきましょう。

結果画面を下にスクロールすると、どのファイルがどのくらいの時間をかけて読み込んでいるのかわかります。
この中で時間がかかっているものを見つけると…
Website speed test_pngfile_too_heavy
ありました。「mainVisual.png」というpngファイルでした。緑が読み込みにかかっている時間です。

これはサイトのトップにあるメインの画像です。横幅1000pxくらいの、一番大きいファイルかもしれません。これが443kbです。
このくらいの容量であればあまり気にならないかな、と思っていたんですが、この中だとダントツで時間かかっているので、これを下げることにしました。

pngファイルの色数を落とす

Photoshop等の画像ファイルで落としてもいいんですが、ここはベストなツールがあります。

TinyPNG ? Compress PNG images while preserving transparency

pngファイルの色数を下げるツールです。ファイルをアップするだけで自動的に落としてくれるというなんともありがたいツール!
早速アップします。

TinyPNG - Compress PNG images while preserving transparency

元ファイルは453KBでしたが、101KBまで落ち78%もファイル容量オフ!すごいです。

mainVisual_compare

比べてみると、やはりグラデーションがかかっている部分は目立ちますね。
このくらいであれば許容範囲なので、出来上がったファイルをアップして差し替えました。

もう一度測定します。
こちらがファイル差し替え前で
Website speed test_before

こちらが差し替え後
Website speed test_after

きました。
読み込み時間が6.3秒から2.87秒までとおもいっきり下がってます!
容量が減ったのでページサイズも880kbから535kbまで下がってますね。

“History”タブをみてみると初回とくらべてどのくらい下がったのか視覚的にわかって楽しいです。54%ダウン。
Website speed test_54down

よく見ると、測定結果のところに
「他のテストしたサイトに比べて77%遅い」と言われていたのが、「他のサイトより54%速い」という結果になったことに気づきました 笑

トップページにどのくらい情報や画像があるかによって全く変わってきますが、ここまで改善できたのは驚きです。

ブラウザのキャッシュを活用せよ

ではGoogleのPageSpeed Insightsに戻ります。

当サイトの場合、もともとモバイルの点数は90点台だったのに、PCは60点くらいでした。
原因を探っていくと、

「Leverage browser caching」

が赤くなっており、ここを重点的に調整する必要がありました。

PageSpeed Insights_leverage_browser_caching

これどういう意味かというと、「ブラウザのキャッシュを活用せよ」という意味なんです。

キャッシュを簡単に説明すると、画像やCSS、html等の今見ているファイルは一度自分のパソコンにダウンロードされ残ります。
次回同じページにアクセスしたときに同じファイルはダウンロードする必要はないので、パソコンに残っているファイルを使うとより早く表示できるようになります。これがキャッシュです。

よくある例が、

「画像をアップしたのに反映されない」
「おそらくキャッシュが残っているから、前のファイルを読み込んでいるんだよ。ブラウザの”再読み込み”を押してみて」
「表示できた!」

という感じで、キャッシュがあるから高速アクセスできるんですが、あるせいで新しいファイルを読み込んでくれない、ということがしばしば起きます。

ただ気をつけないといけないのは、ファイルを更新したら新しい方を読みに行かず古いファイルを読むことになるので、頻繁に更新するサイトは注意が必要ですね。
ファイル名のあとにはてな+数字をつけるを新しいファイルとみなされるので必要であればそのような工夫をします。

例:logo.jpg?47

こうすると同じファイルではないと判断されるので新しいファイルにアクセスしし最新の情報が読み込まれることになります。

 

話を戻します。
キャッシュを活用せよ、といわれてもよくわかりませんが、要はキャッシュを使ったほうが高速化されるよ、ということなんです。

画像ファイルやcss、jsファイルを一度ダウンロードしたら、アクセスするごとにサーバから都度ダウンロードするのではなく、一度読み込んだローカルディスクから読み込んだ設定をしたほうが早くなりますよね。

キャッシュの設定

キャッシュの対策は<meta http-equiv=”Expires” content=”日時または秒数”>や<meta http-equiv=”Cache-Control” content=””>と習ったんですが、これは日付の指定をしなければいけないので現実的ではありませんでした。

探していると、.htaccessで設定出来る模様。
但しサーバーがApacheモジュールの mod_expires が使えることが前提です。
※今では割りと使えるところが増えましたが、お使いのサーバーが対応しているかどうかは確認ください。

このサイトはさくらサーバーですが、念願かなって2012年7月に追加されたようです。

.htaccessに以下のコードを足す

<IfModule mod_expires.c>
# キャッシュの有効期限を設定
ExpiresActive On
ExpiresByType text/css “access plus 1 days”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”
</IfModule>

必要に応じてhtml、javascript等追加してください。
PageSpeed Insightsでは「少なくとも 1 週間以上先の有効期間を設定しろ」とあったので、あまり長いのも嫌なので1週間にしました。

ちなみにPageSpeed InsightsはChrome用エクステンションが日本語訳があって超便利です。インスペクタ(開発者ツール)から使えるので、かなりラクだしこの先も使えますね。

PageSpeed Insights (by Google)

pagespeed_chrome

 

では.htaccessをアップし、PageSpeed Insightsで確認してみます。

無事「Leverage browser caching」の項目がグリーンに!

PageSpeed Insights_LeverageAfter

実はいくつかのJSファイルはそのままにしました。
というのはJSファイルも同じように1週間先に設定してアップしたらスコアが逆に落ち、戻したら治ったから。
原因は不明ですが、数個しかないのでまあいいかとします。。。

体感レベルではどうか

画像を最適化したりキャッシュを活用することによりスコアもあがりWebサイトは高速化できました。

スコア上は改善されても、人間が遅いと感じていては意味がないのでは?

当サイトはもともとそこまで遅いなとは思いませんでした。
このページはワードプレスをいれてプラグインも多くはなくともいくつかいれています。

そんなサイトでも、体感レベルで早くなったと感じます!

とくにキャッシュの効果が大きいですね。
2p目、3p目と遷移しても結局同じCSSファイルやJSを読み込んでいるわけなので。
キャッシュを有効活用すれば新しく読み込むhtmlや画像がメインとなるため、明らかに読み込み速度に違いを感じました。

今回のツールでいろんなサイトを入れて結果を見てみましたが、誰しも知っているようなサイトでも高速化とはいえないような結果のサイトもたくさんありました。

個人サイトならまだしも、商用利用のホームページで遅いなと感じてしまうサイトは致命的だと考えます。

今回は主に画像とキャッシュでしたが、PageSpeed Insightsではまだまだ他にもできることがあるので、表示されたエラーを見ながらやってみると、より高速化につながるでしょう。

是非高速化を体験してください。

 

参考サイト:
さくらインターネットスタンダードプランでmod_expiresが使えるようになっていたので早速.htaccessを対応させてみた | kira-ism

PageSpeed Insights Chromeの使い方
Google開発の「PageSpeed Insights extension」の使い方を解説します。 | SEOトレンド情報

ブラウザキャッシュについて
[Web] Google Page Speedでサイトを高速化(1) | Screw-Axis

メールコンサルティング
WordPress保守管理サービス

Filed Under: ホームページ制作 関連タグ:Webサイト高速化

池田祐太郎

WordPress の構築・保守を10年以上にわたって手掛けており、主に小〜中規模のコーポレートサイト・ECサイト・ブランドサイト等の企画・開発・保守・コンサルティングなどを行ってきました。2012年にハイファイブクリエイトを創業し、現在は WordPress の保守やコンサルティング、ディレクションや開発業務などを担当しています。 プロフィール詳細

この記事と関連する記事

WordPressのパフォーマンスチームがパフォーマンス改善プラグインをリリース
2022年3月9日
タグ: Webサイト高速化, プラグイン
カテゴリー: WordPress
KUSANAGIの技術を取り入れた最新Xserverに移行後のパフォーマンス比較結果
2022年2月25日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress
Xserver 新サーバー移行時は注意。発生したエラーと対応方法
2022年2月17日
タグ: Webサイト高速化, サーバー
カテゴリー: WordPress

人気記事

  1. git pull してもエラーが出てファイルが反映されないときの対処法
  2. 同一サーバー上に構築するWordPressのテスト環境の作り方
  3. WordPressの固定ページでタグやカテゴリーを使いたいときはカスタム投稿タイプを検討する
  4. サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  5. [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  6. WordPress において PHP 8.1 に更新していいかどうか検証

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • 外部のプロフェッショナルによる WordPress サイトの保守・運用:安心と安全性を手軽に手に入れる方法
  • [便利]困難な判断を10秒で AI が客観的に導き出すツールを試してみた
  • WordPress のクロスサイト・スクリプティング被害にあった事例を共有します
  • メール作業の生産性を向上させる最低限覚えておくべき Gmail のショートカットキー
  • タブ固定とタブ一発アクセスのショートカットキーの組み合わせでブラウザ作業の生産性を向上

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • メール
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC CMS css elementor git google workspace Gutenberg HTML iPhone jQuery Mac MAMP php SEO SNS ssh SSL Sublime Text Webサイト高速化 Windows WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 WPRocket アクセス解析 アプリ クラウド クラウドソーシング サイト引っ越し サブスクリプション サーバー ショートカットキー スマホサイト スマートフォン ツール ブログ プラグイン マーケティング リニューアル 保守管理 改ざん 最適化 集客するサイト構築

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 情報セキュリティ基本方針
  • 特定商取引法に基づく表示
  • 転載/引用

© 2023 high five create All rights reserved.