サイト表示を高速化してユーザービリティ向上とSEO対策

1-fighter-jet-f-15-strike-eagle-fighter-aircraft

競合調査のつもりで有料アダルトサイト比較サイトや紹介サイトをいくつか見てみるのは非常に勉強になる。

コンテンツ、デザインなど、何をどう配置するかという情報はもちろん、ソースも見つつ自分だったらそのサイトをどう改善するかという視点で眺めてみる

そんな作業をしつつ感じたこと、多くのサイトが表示が遅くイライラさせられた。
広告や画像を貼りたいのは重々承知だが、表示が遅いと確かに印象がマイナスだと思った。

翻って自分の作成中のサイトを見てみると、これもまた表示が遅かった。

アダルトサイトは素材に恵まれていることもあって、ついつい画像コンテンツが多めになってしまうが、それにしても遅い。

ということで、サイトの高速化を行った。

WORDPRESSサイト表示の高速化手順

サイト表示の高速化はSEO対策にもなるそうだが、それ以上にユーザビリティの向上につながるのでサイトの第一印象を少しでも良くすべくwordpress高速化チューンの方法を調べてみた。

自分の備忘録として、そしてこれを見た同業者の人の参考になるように、記事にまとめてみる。

現状把握のために表示速度をチェック

まずは現状を把握しないと改善活動は始まらない。

客観的で比較可能なデータを得るために以下の2つのサイトを使用する。

webサイト表示速度測定ツール

探すと色々あるけど、この2個を使用した。

PageSpeed Insightsはgoogle製のチェックツール。モバイルとPCの両方での速度チェックと改善提案、そしてモバイルでのユーザービリティの改善点などを提案してくれる。

GTmetrixはGoogle Page SpeedとYahoo!!のYSlowに基づいて分析してくれる。

改善前の状態(類似サイト)

今回改善に取り組んだサイトの、改善前のデータが残っていなかったので、代わりに他の自分の持っているサイト(WordPress、対象とほぼ同じ条件のコンテンツ)の測定結果を挙げる。

  • PageSpeed Insights モバイル:44/PC:60
  • GTmetrix PageSpeed Score:C(74%)/YSlow Score:D(67%)

ページのロード時間は6.8秒だった。

実際の表示速度はもう少し早い(ファーストビューは)が、それにしても遅い。

早く何とかしないと

表示高速化のためのコンテンツの最適化

ファイルサイズの大きい画像データや広告バナーについて圧縮したり、掲載枚数を減らす。

とはいえ、ASP(アフィリエイト会社)から提供される画像バナーは圧縮済みのものが多いのでそのままでも良いし、サンプル動画も再生ボタン押すまではダウンロードされないので、ここでは数を減らす程度にする。

iframeの広告(スライダーとか自動再生のものとか)はできれば無くす。

画像データの圧縮にはEWWW Image Optimizerというwordpressプラグインを使用するが、tinyPNGとかでもOK。

EWWW Image Optimizerの使い方はバズ部がわかりやすいので、こちらを参照のこと。
EWWW Image Optimizer の設定方法と使い方|バズ部

各紹介先サイトへのリンクとして、以前はASP提供の小型のバナーを使用していたが、全てCSSで作ったボタンに変更。

ASPのバナーはサイト内に保存すべきか

ぶっちゃけ直リンになるので、バナー(画像)は自分のサーバーに保存して使用すべきなんですが、アダルト系のASPでは禁止されているものの暗黙の了解としてそのまま直リンさせているような感じがしています。

現実としては、多くのサイトが画像は直リンで使用していますよね。

表示速度的には僕が試したASP(DTI、SBS、GC、出会い系各社)は、直リンではなくサーバーに保存して使用した方が体感速度もチェックツールのスコアも、どちらもスピードアップ(スコア改善)に繋がりました。

Lazy LoadとCDNを設定しておけば、サーバーの負担も減らせますし。

画像の掲載枚数については、ページごとの役割をはっきりさせて、不要な個所ではおもいっきり画像数を減らしました。

特に、最も多く表示されるトップページ(比較コンテンツ)は極端に画像を減らしています。

表示高速化のためのソースの最適化

ソースに関してはまず大前提として、CSS(デザイン指示がまとめられたファイル)とJavaScript(プログラムファイル)についての2つのポイントがあります。

  • CSS、JavaScriptは読み込みに時間が掛かる(ファイルサイズによる)
  • CSS、JavaScriptの読み込み中はサイト表示がストップする(遅くなる)

ソースの最適化による表示高速化は、これらCSS、JavaScriptの読み込みの最適化でもあります。

ソースで読み込むファイルを減らす

例えば、Wordpressで言うと、jquery.jsやテーマのstyle.cssなどのように必ず読み込まなければならないもの、あるいはjqueryに関してはなるべく他のJavaScriptより先に読み込まなければいけないといった制約があります。

一方で、必ずしも必要でないものの、使用するプラグインによって毎回読み込まれているファイルも存在します。

たとえば、Jetpackを使用していると、 devicepx.jsやjetpack.cssであったり、その他プラグイン固有のものであったり。

プラグイン関係は、本当に必要か否か、そのページで必要か否かを見極めて選択と集中を行うなどのダイエットが必要です。
つまり、まず最初に手をつけるべきことは不要なプラグインを削除することです。

サイトごとに状況が違うと思いますが、個人的に助かったモノを紹介しておきます。

※以下は子テーマのfunction.phpに記述するコードです。

※管理人葵はPHPもJavaScriptもさっぱりです。何か間違いを犯している可能性もあります。引用元を記載してあるので、そちらをご精読下さい。

1.jetpackのdevicepxを読み込まなくする

PageSpeed Insghts対策 Simplicityより

function.phpに記述

その他、応用として、プラグインごとに読み込まれるファイルから不要なものを取り除きたい時は、こちらを参照してみてください。

WordPressでhead内に自動で読み込まれるCSSとJavaScriptファイルを読み込ませない3つの方法 | 経験知

2.scriptタグにdefer追加

JavaScriptの読み込みでサイトの表示が止まってしまう(レンダリングブロック)のを避けるために、遅延読み込み(defer)や非同期読み込み(async)を利用する方法。

Simplicityを少し改造してみた 番外編 part5 スクリプトのレンダリングブロックを解消する blazechariot -Xdomain-より

function.phpに記述

ただし、JavaScriptには読み込み順序が変わると機能しなくなるものがあるので、blazechariotさん参考にしてみてください。

追記:2016年1月16日

nendのオーバーレイ広告のタグはdeferやasync入れると表示されなくなるので注意して下さい。

3.GoogleのCDNのjQueryを利用する

WordPressには自前のjQueryが入っていますが、それをGoogleのCDNに変更するコードです。

jQueryなどの表示に関しまして Simplicityより

function.phpに記述

使用するjQueryはGoogleのCDNから

2.と3.は重複するんで、両方使うなら3.の”async defer src”からdeferをとっちゃって下さい。

以上の方法で不要なソースを削除したり遅延/非同期読み込みにして、ソースで読み込むファイルを減らします。

4.wordpressの絵文字機能関連のJS、CSSを読み込まなくする

絵文字使いたい人はやめておいてくださいね。

function.phpに記述

5. .htaccessで文字コード指定

GTmetrixの”Avoid a character set in the meta tag”対策です。

.htaccessへの記述は、これと後述のキャッシュ対策のコードを追記すればOK

.htaccessの編集は「念のためバックアップとってからやる」のと「既存の記述は触らずに文末に追記」するように気をつけること。

プラグインによるソースの最適化

ソースを必要なものだけに絞り込んだら、これらの読み込み方法をプラグインで調整します。

以下は、表示速度は上がるものの、CSSの読み込みに不具合が発生して表示が崩れたり、JavaScriptの読み込みに不具合が発生して動作不良を起こす可能性があります。慎重に動作確認をしながら調整してみてください。

  • ヘッダー内で読み込むJavaScriptを最小限にし、残りをフッターに移行する
  • html、CSS、JavaScriptを圧縮して各1つずつにする

前者については、既にテンプレートで最適化されている事もあるので、そういう場合は不要です。
というかテンプレートによっては非推奨です。

後者はCSSの不具合による表示崩れがよく発生しますし、コードが最適化されすぎて可読性がわるくなったり、jqueryなどを対象外にする必要があります。

大切なことなので先に書いておきました。

Head Cleaner:ヘッダー内のJavaScriptを必要最低限にする

Head Cleaner

※テンプレートによっては既に最適化済みの場合もあるので、先に確認しておいて下さい。

Head Cleanerの使い方については、バズ部が詳しいです。

Head Cleaner の最も理想的な設定方法|バズ部

正直言って、前述の方法でJavaScriptのタグにdefer付けるだけで十分な気もしますが、詳しくないので判断できません(笑)。

Autoptimize:html、CSS、JavaScriptを圧縮する

Autoptimize

Autoptimizeはソースの可読性が著しく悪くなるので、現在作成中のサイト、CSSなどを日々改善中のサイトでは使用しないほうが良いかもしれません。

あと、CSSやJavaScriptをひとまとめに圧縮してしまうので、テンプレートやプラグインによってはエラーが発生することもあります。

除外設定などもできるので、慎重に動作確認をしながら調整してみてください。

Autoptimizeについては以下のURAKOTA BLOGがわかりやすいです。

Simplicityテーマでブログを高速化した時のメモ|URAKOTA BLOG

なお、上記リンク先への補足として、Javascriptの除外設定をする場合は、Autoptimizeの設定画面の左上、Show advanced settingをクリックしてExclude scripts from Autoptimize欄に除外するJavascriptを追記して下さい。
(例)jQueryを対象外にするなら”jquery?”と記述する。

以上でソースの最適化ができますが、Head CleanerやAutoptimizeといったプラグインを使用する方法については、スピードチェックの修正提案内容から採用するか否かを判断し、不要だと思えば無理にやる必要はないと思います。

表示高速化のためのキャッシュの利用

WordPressのようなCMS(コンテンツ・マネジメント・システム)では、ユーザーがサイトにアクセスする度に、データベースから必要なデータを読み込んでページを作成し、完成したページをユーザーに送り返しています。

いわゆる動的ページというやつなのですが、この動的ページというのはその仕組み上、毎回ページを作成してユーザーに返すという手間がかかるため時間もかかるし、サーバーにも負担を掛けてしまいます。

キャッシュ(一時保存データ)を利用する方法というのは、サーバー上に予め完成したページを保存しておき、それをユーザーに返すことで、動的ページ作成のための行程を省略して、素早く楽に(サーバー的に)サイトを表示することを言います。

WordPressには優れたキャッシュ系プラグインがありますが、ここではW3 Total Cacheを紹介します。

ただし、サーバーやテンプレートによっては不具合が発生したり、返って遅延が発生したり、そもそも使用できなかったりする場合があります。

各々の環境を踏まえたうえで利用を検討して下さい。

ちなみに、管理人がいつもお世話になっているテンプレート”Simplicity”ではキャッシュ系プラグインは非推奨でした(配信元にそれでもキャッシュ系プラグインを使用する方法が記載されていますが)。

以下のSimplicity製作者のわいひらさんのサイト、寝ログを参考にしてみてください。

PCとスマホを分けて綺麗に高速表示してくれるWPキャッシュプラグイン「W3 Total Cache」の簡単設定方法|寝ログ

管理人葵の環境では、サーバーの応答時間(読み込みが始まるまでの時間)が圧倒的に早くなりました。

ただし、環境に依る部分もあるみたいなので、都度改善方法を検討してみてください。

アダルトサイト比較サイト高速化計画の結果

最後に、あえて今回の計画の初心に変えるべく、これらの高速化チューンが『アダルト動画サイト比較サイト』のためのものだということを強調してみます(笑)

管理人のアダルトアフィリエイトへの本気度が良く伝わったかと

もちろん、アダルトアフィリエイトサイトだけでなく、仕事で関与しているサイトにも高速化チューンをしましたけどね。

高速化チューンの結果

ちなみに、改善前はこんな感じでした。

  • PageSpeed Insights モバイル:44/PC:60
  • GTmetrix PageSpeed Score:C(74%)/YSlow Score:D(67%)

高速化後は…

  • PageSpeed Insights モバイル:88/PC:95
  • GTmetrix PageSpeed Score:A(94%)/YSlow Score:B(86%)

PageSpeed Insights

after-speedup-google

GTmetrix

after-speedup-GTM

フハハハ 圧倒的じゃないか、我が軍は!

読み込み時間も1.0秒に短縮。
もっとも、回線状況やサーバーの状況にも左右されますけど、これだけ出れば十分です。

httpリクエストも100件超えていたのが、17件まで縮小しています。

サイトの状態としては自動更新バナー×2枚と動画本数取得Scriptがあるため、もう少し高速化の余地はあるのですが、流石に味気なくなりすぎてしまうのでこのままで行こうと考えています。

バナー広告や動画サンプル、iframe貼りまくりの個別投稿ページではPageSpeed Insightsが82/76、GTmetrixがB85/C74と悪化してしまいますが、コンテンツ的に考えればしかたのないことです。

それでも読み込み時間は2.5秒だったので、かなり快適になっていると思われます。

これで、少しでもコンバージョンが改善すれば良いのですが…

ちなみにこのサイトは??

このサイトも、前述のアダルトサイト比較サイトと同じFC2サーバーを使用しております。

当サイトは余計なプラグインを極力使ってない上、ほぼデフォルトのWordpress付属のテンプレート『Twentysixteen』を使用しているためかかなり速いです。

特に、今では高速化チューンもしているため、かなりのスピードです。

Before-speedup-google
Before-speedup-GTM

管理人の使用しているサーバーについて

管理人の使用しているサーバーは、FC2サーバーです。

アダルトOKかつ、国外のサーバーで日本語サポートも充実しているところはココぐらいなので本当におすすめです。

実は管理人は、FC2サーバー登録の際、誤って会社のクレジットカードで登録してしまって、青ざめながらサポートに連絡をとったのですが、結論から言うと特別に対応して頂けて数日後には、再登録し直すことができました。

本当に助かりましたし、FC2のサポートの迅速かつ柔軟な対応に大変感謝しております。




(追記:2016年1月16日)

NENDのタグはdeferやasyncしちゃダメっぽい

スマホ向け広告のNENDですが、オーバーレイ広告のタグのJavaScriptはdeferやasyncにすると機能しないみたいです。

久々にレポートチェックしたらインプレッションが一桁になってました。

すこし検証してみましたが、deferやasyncを外すと普通に表示されるようになりました。

Autoptimizeも影響あるかもしれないんで、除外設定にしておきます。

コメントを残す

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