• 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をはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

この記事と関連する記事

かんたんにできるページ表示速度を軽くするためのオンライン画像圧縮ツール
2021年4月12日
タグ: Webサイト高速化, ツール
カテゴリー: ホームページ制作
静的化したWordPressは本当に早くなるのか?表示速度やパフォーマンスの検証と比較
2020年6月20日
タグ: Webサイト高速化
カテゴリー: WordPress
PageSpeed Insightsで99点!WordPressサイトの表示速度とパフォーマンスをプラグインで改善
2019年10月31日
タグ: Webサイト高速化, 保守管理
カテゴリー: WordPress

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • サイト制作の要件定義書に普段書いている内容(ダウンロード可)
  • かんたんにできるページ表示速度を軽くするためのオンライン画像圧縮ツール
  • フィードバックはテキストでもらうことを明記しておいた方がいい理由
  • クラウドソーシングにたまにいる依頼したくないこんな人
  • 小規模な企業がメールサーバーをGoogle Workspaceに乗り換えてGmailを使用することのメリット・デメリット

カテゴリー

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

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.