初心者のためのWordPress高速化設定(2)不要なものを取り除く
公開日：
WEBサイトの高速化について調べてみると、詳細が記された技術者向けの内容から、WordPressキャッシュ系プラグインのインストールのみを説明したものまでたくさん出てきます。
レンタルサーバーで個人ブログを運営している初心者には不要な知識だったり、かといって説明不足すぎて内容を実行したら画面が真っ白になったりと、WordPressの高速化はなかなか難しい分野。
そこで今回は、WP高速化設定の第2弾としてサーバーや環境に左右されないものを中心に取り上げていきます。キーワードは「不要なものを排除する」です。
参考初心者のためのWordPress高速化設定(1)スピードアップの概要
目次
WordPressサイトが表示される仕組み
表示速度を改善するためには、まず悪いところがどこなのかを知る必要があります。
突っ込んで解説すると難しい単語ばかり並んでしまうので、WEBサイトがブラウザに表示される仕組みに関して基本を覚えておきましょう。
そのなかにスピードアップの鍵が見つかるはず。
サーバーはどのように動いているのか
HTTPステータスコードについて解説した記事でも取り上げましたが、クライアントとサーバーがお互いに通信して成功するとWEBサイトが表示されます。
これが基本形。
クライアントは「Internet Explorer」のようなブラウザと考えておいてください。
参考HTTPリクエストを減らすために【序章】HTTPリクエストは甘え
通常のHTMLサイトなら、サーバーからHTMLやCSSのファイルがポンと送られてくるだけですが、WordPressはひとつのページを生成するためにいろいろなプログラムが動きます。
流れを簡単に説明すると、こうなります。
- クライアントがサーバーにリクエスト送信
- サーバーでPHPが動き、データベースから必要なデータを取得
- データをもとにHTMLを生成してクライアントへ送信
パーツ（データ）がたくさんあって、それを必要に応じて組み替えながらHTMLを生成するため、パーツが多ければおおいほど処理速度に影響してきます。
物流関係の仕事をしているなら、イメージがつかみやすいかもしれません。発注データが送られてきて、それを見ながら倉庫内のあちこちから商品を集めてきて、ダンボールにつめて発送するアレです。
A-6にあるはずの洗剤がなかったりしてあちこち走り回り…
ん？逆にわかりづらいか。
まあ、とにかく「パーツがたくさんあると遅くなる」と覚えておいてください。
データを送信し終えたら、今度はクライアント（ブラウザ）が働く番です。
ブラウザはHTMLを上から順に読み込んでいく
生成されたHTMLは、おおむねこのような形になっています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <title>HTMLサンプル</titile> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="text/javascript" src=""></script> </head> <body> <header> <h1>ブログタイトル</h1> <h2>ブログ説明</h2> </header> <div id="main"> ここにメインコンテンツ </div> <div id="side"> ここはサイドバー </div> <footer> ©Naifix </footer> </body> </html> |
ブラウザはこれを上から順に処理していって、人が見るために整形して出力します。
「上から順に」というのがポイントで、たとえば<head>に記述されているJavaScriptの処理に時間がかかると、その下に記述されているものは処理待ちになってしまいます。
JavaScriptの処理が終わったら、再び順番に処理が行われていきます。
初心者にとってJavaScriptが鬼門になる
表示速度を上げるために、このJavaScriptをどうするか、というのが初心者にとって一番難しい部分かもしれません（僕もあれこれテストしながら調整中）。
WordPressプラグインを増やすほどJavaScriptの数も増えていき、それが表示速度を妨げてしまうからです。かと言って、外してしまうとなんだか物足りないブログになってしまったり。
これをクリアするための方法はいくつかあります。
- <head>ではなく、</body>直前に配置する
- 圧縮して最適化（Minify）する
「Head Cleaner」というプラグインで解決できますが、設定を間違えると遅くなったり、一部のプラグインが動かなくなる、という問題も出てきます。
プラグインのためにプラグインを入れるなら、不要なものを外したほうが手っ取り早いです。
ここまでのまとめ
WEBサイトが表示される仕組みを知らなくてもブログは運営できますが、高速化を考えるなら以下のことを覚えておきましょう。
- パーツがたくさんあると遅くなる
- HTMLは上から順に読まれる
- JavaScript最適化は難しい
JSに関してはまた改めて取り上げます。
まずは、不要なものを外してスッキリさせることから始めてみましょう。
不要なプラグインを外す
便利そうだからと、あれもこれもプラグインを放り込んでしまうと、表示速度がどんどん遅くなります。加えて、更新が止まっているプラグインを使っているとセキュリティ面でもよろしくないので、本当に必要なものだけ使いましょう。
たとえば、WordPress厳選プラグイン18選でご紹介しているものでも、記事でコードを紹介しないなら「Crayon Syntax Highlighter」は不要ですよね。
いつか使うかもしれない、というだけでインストールしておいても、結局使わないこともあります。いま一度プラグインを確認してみてください。
なんでもかんでもプラグインに頼らない
プラグインを使用せずに実現できることはたくさんあります。
- OGPの設定
- ページャー
- サイトマップ出力
- シェアボタン設置
今すぐすべてをプラグインに頼らず設置するのは敷居が高いため、少しずつ勉強して取り入れていきましょう。
もし、Googleアナリティクスのコードをプラグインで設置しているなら、これをheader.phpに直接挿入してみることから始めたりね。
WordPressにGoogleアナリティクスを設置する方法
［外観］－［テーマ編集］へと移ります。
最初はスタイルシート画面になっているので、右サイドバーの「ヘッダー header.php」をクリック。
</head> を探します。
</head>の上にアナリティクスで取得したコードをコピペして完了。
簡単ですね。
すぐ元に戻せるようバックアップを！
アナリティクスのコード挿入を応用すれば、記事内にシェアボタンのコードを直接記述することもできるようになります。
参考アクセス数がぐんぐん伸びる！WordPressで絶対設定しておきたい9項目
ただ、万が一のことを考えてバックアップは忘れずに。ここでは簡易的な方法をご紹介します。
該当ファイルを表示して「すべて選択」して「コピー」。
テキストエディタに「貼り付け」して適当な名前で「保存」。
Windows付属のメモ帳は保存形式（UTF-8 BOMなし）が選べないので注意してください。
参考エラーが起きた？それはUTF-8のBOMと改行コードが原因かもしれません
表示が崩れてどこをいじったかわからなくなったときは、保存しておいたファイルからコピペすれば元に戻ります。
functions.phpで記述ミスがあると管理画面にすらログインできないこともあるので、FTPソフトで上書きして対処しましょう。
キャッシュ系プラグインをすべて外してみる
「高速化が大切だよ！キャッシュ系プラグイン入れなよ！」という記事を鵜呑みにしてインストールしてみると、なぜか表示が遅くなった気がする…ということがあるかもしれません。
くどいようですが、キャッシュ系プラグインは環境によって最適な設定方法が異なるため、安易に手を出すべきではありません。『管理画面が真っ白になって元に戻すのに半日かかった orz』なんてこともありますからね。
遅くなった気がするのではなく、本当に遅くなることがあるんです。キャッシュすることで何でもかんでも速くなるわけではありません。
一部のプラグインはサーバーにものすごく負担をかけるため、サーバーの性能も関係してきます。また、WordPress専用のレンタルサーバー「wpX」ではプラグイン「W3 Total Cache」が動かないなど、相性の問題もあります。
『みんな使ってるからなんとなく入れてみた！』なら、一旦すべて外すことをお勧めします。月間1万PVぐらいだと、使わなくても影響ありません。
head内の不要な記述を排除する
WordPressは<head>内にいろいろなデータを出力します。ただし、その中には不要なものもいくつかあるため、出力しないように制御してしまいましょう。
先ほどちらっとご紹介したプラグイン「Head Cleaner」でも制御できますが、これを使わずfunctions.phpに数行追記するだけでOKです（テーマによってはすでに対策済みのものもあります）。
不要なものの例として、デフォルトでは下記のようにWordPressのバージョンが表示されます。
|
1 |
<meta name="generator" content="WordPress 3.9.1" /> |
これを消すには、functions.php に下記を記述します。
|
1 |
remove_action( 'wp_head', 'wp_generator' ); |
当ブログでは、以下のように記述しています。
|
1 2 3 4 5 6 7 8 9 |
remove_action( 'wp_head', 'feed_links_extra', 3 ); remove_action( 'wp_head', 'feed_links', 2 ); remove_action( 'wp_head', 'rsd_link' ); remove_action( 'wp_head', 'wlwmanifest_link' ); remove_action( 'wp_head', 'index_rel_link' ); remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); remove_action( 'wp_head', 'start_post_rel_link', 10, 0 ); remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 ); remove_action( 'wp_head', 'wp_generator' ); |
不要なウィジェットを削除する
この部分はWordPressに関する知識がある程度必要になります。難しい場合は飛ばしてください。
テーマによって、ウィジェットエリアがいくつか準備されていますが、頻繁に変更せず固定化しているものはウィジェットを使わずに直書きしてしまいましょう。
サイドバー上部にアドセンスを設置している場合などに有効です。
例：無料テーマGushの右上広告
無料テーマGushでは、右上に広告用のウィジェットエリア（サイド広告）を設けています。
出力先は、サイドバー sidebar.php の一番上の箇所。
|
1 2 3 4 5 |
<div class="side_ad"><!--広告ウィジェット--> <aside> <?php dynamic_sidebar( 'side-ad' ); ?> </aside> </div> |
アドセンスを常に表示するなら、下記のように変更できます。
|
1 2 3 4 5 |
<div class="side_ad"><!--広告ウィジェット--> <aside> <div>ここにアドセンスのコードを記述</div> </aside> </div> |
functions.php の該当部分も削除してかまいません。
|
1 2 3 4 5 6 7 8 9 |
//サイドバー336広告 register_sidebar( array( 'name' => __( 'サイド広告' ), 'id' => 'side-ad', 'before_widget' => '<div>', 'after_widget' => '</div>', 'before_title' => '', 'after_title' => '', ) ); |
絶大な効果を発揮するわけじゃありませんが、ご参考までに。
display:none を極力使わない
条件によってブラウザの表示を変えるのに便利なのが、CSSの「display:none」です。
同じHTMLを使ってPCとスマホの表示を変える場合、これで表示／非表示の切り替えを簡易的に行うことができます。
たとえば、<div id=”pc_only”>を切り替える場合は、CSSでこのように指定します。
|
1 2 3 4 5 6 7 8 9 |
/* PC用 */ #pc_only { PC表示用の装飾 } /* スマホ用 */ #pc_only { display: none; } |
実際にはスマホ専用のCSSに記述したり、レスポンシブデザインなら@media screen で分岐します。スマホでアクセスした場合、このDIV要素は表示されません。
この指定は、見えなくしているだけであって、裏ではHTMLを読み込んでいます。ということは、そこにめちゃくちゃ重い画像ファイルがあったら、そのぶん表示速度は遅くなります。透明なパーツを配置していると考えてください。
表示を分岐する場合はCSSで指定するのではなく、HTMLそのものを出力しない（パーツを減らす）よう制御したほうがスマートです。
参考is_homeとis_mobileを使ってカスタマイズの幅を広げよう！
分岐以外でも「display:none」を使うことがあると思いますが、極力使用を控えましょう。
SNSボタンの設置場所を考えてみよう
TwitterやFacebookの公式ボタンは、そのまま使うと読み込みにかなり時間がかかります。
オリジナルボタンに変更したり、改造してキャッシュさせる方法もありますが、デザインセンスと知識が必要になってきます。
今すぐ対応できることといえば、設置場所です。
たとえば、記事タイトル下にシェアボタンをずらっと並べているブログがありますが、その真似をする必要があるでしょうか。たくさんシェアしているなら、みんなが読んでいることをアピールできますが、ゼロばかり並んでいると、ちょっと…
各ボタンを取得するときに幅や高さもそのつど計算されて表示されますから、きちんと指定しておかないと、その下につづく本文が上下にカクカクと動いて読む人にストレスを与えてしまいます。
スピードが遅いシェアボタンを並べると、カクカクしてしまう
ブログにアクセスして最初に表示される部分（ファーストビュー）にシェアボタンを並べるのではなく、記事下に配置しておけば、記事を読み終わった頃には表示されています。
どうしてもタイトル直下に置きたいなら、もっともシェアされやすいTwitterボタンだけにするなどの対策をしましょう。このブログでは今のところはてブ数だけ表示しています。
追尾式のボタンも同様で、それは読者にとって本当にメリットがあるのか、を考えて設置すべきです。もしかすると、ただうざいだけ！と思われているかもしれません。
押し売りは嫌われますよ。
まとめ
かなり長々となってしまいましたが、今日の話をまとめてみましょう。
- パーツがたくさんあると遅くなるので、数を減らす
- キャッシュ系プラグインで逆に遅くなることもある
- CSSの「display:none」は極力使わない
- SNSボタンの設置には工夫が必要
便利だと思って使っているものは運営側にとってメリットかもしれませんが、読む側からするとデメリットになっているかもしれません。
ボタン一発でらくらく高速化！ができれば良いのですが、環境によってベストな選択が変わるためなかなかそうはいきません。まずは不要なものから外していきましょう。
それではまた、次回をお楽しみに。
Your Message