エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


ブラウザのキャッシュを活用するの対策!広告バナーを消して表示を高速化

      2017/03/12

広告バナーを減らせばページ表示スピードは向上する

 
広告バナーを減らせばページ表示スピードは向上する!
 
このことに触れているブログはほとんどありませんが、あなたのブログに貼っているそのアフィリエイトの広告バナーが表示スピードに悪影響を与えています!
 
それを消すだけでページの表示スピードは向上します!
 
 
「Page Speed Insights」に出ている「ブラウザのキャッシュを活用する」「画像を最適化する」の未対応のリストも広告バナーが原因です!
 
 
万に一つでもクリックされれば……なんて期待してはいるものの、何の収益も上げていないバナーはきれいさっぱり消してしまいましょう。
(正確には、バリューコマースのバナーが原因です。違うアフィリエイトに変えるか、消してしまいましょう!)
 
 

mod_deflateと mod_expiresを設定しても消えない修正の指摘

 

Page Speed Insightsの指摘

 
SEO対策!.htaccessのmod_deflateでファイル圧縮送信で高速化」と「SEO対策!.htaccessのmod_expiresでブラウザキャッシュで高速化」の記事に書いた mod_deflateと mod_expiresを使って処理を使って「ファイルを圧縮する処理」「ブラウザにキャッシュさせる処理」の対応を行っても「Page Speed Insights」でチェックすると「ブラウザのキャッシュを活用する」「画像を最適化する」の項目がまだまだ残っていました。
 
20150413_web_01
 
これはなんだろうと思って「修正方法を表示」をクリックして表示される内容をよくよく見てみると、下記の様に書いてあるのです。
 
「ブラウザのキャッシュを活用する」では
http://ad.jp.ap.valuecommerce.com/vc/images/**/**/**/**.gif(有効期限が指定されていません)
 
「画像を最適化する」では
http://ad.jp.ap.valuecommerce.com/vc/images/**/**/**/**.gif をロスレス圧縮すると 4.4 KB(22%)削減できます。
 
これが今回の記事の主目的である画面表示の高速化を妨げる元凶の広告バナーなのです。
 
 

キャッシュと最適化が反映されない原因

 
.htaccessに mod_deflateと mod_expiresの設定を行って、ファイルを圧縮してブラウザに送る処理、送ったファイルをブラウザにキャッシュさせる処理は、自分のサーバにおいてあるファイルに対しては有効なのですが、外部ファイルを直リンクで読み込んでいる場合は mod_deflateと mod_expiresの設定が有効にならないのです。
 
そのため、mod_deflateと mod_expiresの設定を行っても、「Page Speed Insights」でチェックをすると、ブラウザキャッシュされていない、画像が最適化されていない、との表示が残ってしまうのです。
よくよく確認をしてみると、それで表示されているものは、外部ファイルから読み込みをしている広告バナーや、Googleの JavaScriptや Analyticsのタグの JavaScriptなどであることが分かるでしょう。
 
 

外部に直リンクで設定しているファイルへの対応方法

 
自サーバにファイルがなく、直リンクで読み込んでいるファイルのうち、Googleの JavaScriptなどはダウンロードしてきて自分のサーバに置き直すことで圧縮して送信され、ブラウザにキャッシュされるようになります。
(JavaScriptへのリンクのパスなどの修正は必要です。)
 
ですが、それらのファイルが更新された際にはその都度ダウンロードしてくる作業が必要ですし、広告バナーや Analyticsのタグはそれらの対応ができません。
 
 
そこで、対応する簡単な方法として、
  役に立たない広告は消してしまいましょう!
となるのです。
 
 

広告バナーを消してみた効果

 
元々このエス技研ブログには 9枚のバリューコマースのバナーが貼ってありました。
それを消したときに「Page Speed Insights」の値がどうなったかが下記の数値です。
 
  PC 71 → 75  SP 59 → 61
 
何と、mod_deflateと mod_expiresで対策をしたより効果が高いのです!
 
実際に「Page Speed Insights」で指摘があった「ブラウザのキャッシュを活用する」「画像を最適化する」の項目が「修正が必要」から消えているのです。
 
20150413_web_02
 
すごいですねぇ。
今すぐバリューコマースのバナーを外したくなったでしょ?
 
 
ちなみに、いつもは貼っていない Amazonとリンクシェアのバナーを同じように 9個ずつ貼って試してみたところ、「Page Speed Insights」の表示スピードには影響をしませんでした。
つまり、表示スピードが遅くなるのはバリューコマースだけの特有の問題のようです。
(バリューコマースは技術力が足りていないか、ユーザへの配慮が足りていないと言うことでしょうか?)
 
つまりは、バリューコマースの広告を貼るのは止めて、Amazonかリンクシェアのバナーにすべき!と言うことですね。
 
 
ちなみに、Google AdSenseを貼ると、
「ブラウザのキャッシュを活用する」で下記が
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
http://pagead2.googlesyndication.com/pagead/osd.js (60 分)

 
「画像を最適化する」で下記が
http://pagead2.googlesyndication.com/simgad/******** をロスレス圧縮すると 861 バイト(3%)削減できます。
表示されます。
 
つまり、Google自体もその辺しっかり対応できてねーって言うことでしょうか???
 
ただ、そもそも大した額ではありませんが、このブログの広告収入のほぼ 100%が Google AdSenseからの収入なわけなので、外すわけには行かないのでそのままです。
 
 


 

広告を外すと表示スピードが速くなると考えたきっかけ

 

BJ Lazy Loadを設置している際の出来事

 
広告を消すと速くなるんじゃないか、と考えたのは「SEO効果絶大!PVもアップするWordPressの高速化プラグインBJ Lazy Load」で記事を書いている Lazy Load系プラグインを試しているときでした。
 
 
Lazy Load系のプラグインの中の「BJ Lazy Load」は、画像だけではなく iframeなども含めて事後読み込みをする機能が実装されています。
 
そのため、「Lazy Load」と比べて「BJ Lazy Load」が好調な結果を出したときは、「好調な理由は iframeの処理にあるんじゃないか?」と考えてたわけです。
広告や SNSのメッセージボックスなどは iframeの仕組みを使って利用して編集しているものが多々ありますので。
 
ですが、「iframeへの適用」を「No」にしてみましたが結果は変わりませんでした(「Yes」の状態と変わらず好調な結果を出していました)。
(「BJ Lazy Load」の設定方法については「SEO効果絶大!PVもアップするWordPressの高速化プラグインBJ Lazy Load」に記事を書いていますので参考にしてください。)
 
ですが、じゃぁ実際に広告を消してみたらどうなのだろう?と、「iframeへの適用」を「No」の状態で、右側のウィジェットに編集していたアフィリエイト(バリューコマース)のバナー 9点を削除して「Page Speed Insights」でスピードを計測してみたところ、上記に書いたように明らかな違いが見て取れたのです。
 
 
そんなわけで、当たり前のことながら外部サービスから情報を取得する仕組みは極力排除することをお勧めします。
特に、アフィリエイトバナーは貼っていても収益につながっていないなら、スピードアップのボトルネックになっていますので、思い切って外してしまいましょう!
 
バリューコマースのアフィリエイトから多くの収益を得ているサイトを運営している方は悩みどころだと思いますが、数を絞り込んでいくことも必要かもしれませんね。
(このことが世間に広まっていくと、バリューコマースは何かしらの対応をするんでしょうけども。)
 
 
また、このエス技研ブログには Facebookのウィジェットを貼っていませんので実験はできませんでしたが、「ブラウザのキャッシュを活用する」には Twitter関連と思われる JavaScriptがリストアップされていますし、Facebookや Twitterや Google+のウィジェットや、「いいね!」の SNSボタンなどもスピードに影響する可能性がありますので、スピードに影響しない設定の方法を試してみる必要がありそうです。
(実験する機会があれば、改めてレポートしたいと思います。)
 
 

広告を外すことのその他のメリット

 
実は、バナーを消すことで、画面表示が早くなること以外にもメリットがあるのです。
 
上記のサイトの「原則 #5: 多くの余白を設ける」がそれになります。
 http://www.seojapan.com/blog/eye-tracking
 
 
空白があるととにかくそこにはバナーなどで埋めたくなりますが、空白があることで余裕が生まれ、落ち着いて記事を最後まで読んでもらえることが分かっています。
 
そんなわけで、バナーを外すことを躊躇してはいけませんね。
 
 
最後に、ページ表示の高速化施策としては「WordPressの高速化でSEO対策!広告費も削減!高速化の施策のまとめ」にまとめ記事を書いていますので、あわせて参考にしてみてください。

 - プログラミング・Web関連技術

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

Selenium WebDriver、Pythonをインストールしブラウザ自動操作の環境構築手順のまとめ

ブラウザを自動操作しテストを実行するロボットをselenium WebDriver+Pythonの環境を構築し、動作確認までの手順のまとめ。初心者向けに詳細解説。サンプルソースも。

X Serverへの引越しの注意点まとめ。ロリポップとの違いと対処方法 6事例

ロリポップからX Serverに引越し。ロリポップとX Serverの違いに注目することでX Serverの設定方法を明確にします。またX Serverならではの設定ポイントなども解説。

借りてはいけないレンタルサーバ実例4社・アルファメール・WEBアリーナ

餅は餅屋。サーバはサーバ屋が提供するサービスを利用するべきという記事で、具体例 4サービスを例にこんなサーバはNGと紹介しています。

So-netのレンタルサーバHSはヤバイ・借りてはいけないレンタルサーバリスト

餅は餅屋。サーバはサーバ屋が提供するサービスを利用するべきという記事で、単独でSo-netを紹介。OEMでサービスの提供を受けているだけなので何とも残念すぎる内容。

Selenium WebDriverでFirefoxをプライベートウィンドウ/Chromeをシークレットモードで起動する方法・言語はpython

Seleniumでは初期状態でブラウザを起動する   Seleniumでブラウザ …

Beautiful Soupを利用してPythonでスクレイピングを行う環境構築方法の解説

BeautifulSoupはPythonでスクレイピングを行う際に便利なツール。インストール方法も簡単。ただ、事前にpipのインストールが必要でその解説もしてます。

SyntaxHighlighterを導入してソースコードを見やすくしてみました

PHP、HTMLなどのソースコードをブログで紹介するとき、SyntaxHighlighterを利用することで見やすく提供することが出来ます。

WordPress、Webサイトの表示高速化!画像を軽くする基本的な考え方

画面表示の高速化には画像のファイル容量を小さくする方法があります。ツールを使わなくても小さくするための基本的な考え方を解説します。

PythonでUTF-8など日本語(全角文字)を使う方法。コメントにも必要。

Pythonの標準では日本語(全角文字)を利用できないので、利用する際は文字コードを宣言する必要がある。「# coding: utf-8」の様に記述すればOK。

.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策!

Page Speed Insightsの指摘事項のファイルのブラウザキャッシュの設定方法。解説もしてるけど、.htaccessにコピペするだけの簡単設置で効果抜群!SEOにも威力を発揮!