内容一覧
こんにちわ！
ひでゆきです^^(dehichan0728)
今日はブログやウェブサイトを運営している誰もが気になるサイトの高速化に役立つプラグインを紹介します！！
その前にPageSpeed Insightsを紹介しよう
私が、サイトの高速化を気にしたきっかけを話してみます。
短くいくから読んでなー！笑
先日ネットサーフィンしているときに、サイトの表示速度を計測するサイトを見つけたのでやってみました！
Googleさんが提供しているサイトのダメ出しをしてくれるサイトです。笑
PageSpeed Insights について
PageSpeed Insights は、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案します。詳細
ん、なんか真っ赤で60点…
合格点じゃなさそうなので、調べてHead Cleanerなどの高速化プラグインを導入することにしたんです。
さて、どうなることでしょう！
WordPressプラグイン「Head Cleaner」とは
Head Cleaner とは、WordPressのソース（サイトを表示させる為のファイル）を最適化し、サイトの表示速度を高速化してくれるプラグインです。
特にCSSとJavaScriptをいう容量の大きいソースを整理してくれます！
CSS：ブログやウェブサイトのデザインやレイアウトについて
JavaScript：ブログやウェブサイトに動きをつけたりとかについて
自分でCSSやJavaScriptをいじって高速化するのは難しいことです、少なくとも私には…
WordPressプラグインのHead Cleanerがやってくれるので使わない手はないです！
では、サイトを高速化することでどんな良いことがあるのでしょうか。
Head Cleanerで得られる効果
サイト高速化プラグイン「EWWW Image Optimizer」
この記事でも紹介していますが、ブログやウェブサイトの表示速度を上げることで、読者の方とGoogleさんに対しての評価アップを見込めます。
読者の方はサイトの表示が早いことで、直帰率を下げることができますし、Googleさんはサイトの表示速度を検索順位に反映しているといっています。
このHead Cleanerも同じようにサイトの高速化に協力してくれるWordPressのプラグインなので、併せて使っていきたいですね。
Head CleanerをWordPressへインストール
プラグイン名「Head Cleaner」と入力
検索するとHead Cleanerが出現しますので、今すぐインストール
有効化しましょう！！
Head Cleanerの設定方法
WordPressダッシュボードの設定のHead Cleanerをクリック！
「CSS と JavaScript を、サーバ上にキャッシュする」をクリック
項目が追加されます！
以下の項目にチェックをいれましょう！！
- 複数の CSS を結合する
- CSS を最適化する
- 複数の JavaScript を結合する
- JavaScript を小さくする
- フッタ領域の JavaScript も対象にする
- <head> 内の JavaScript を、フッタ領域に移動
- Google Ajax Libraries を利用する
- メタタグ “generator” を削除
- リンクタグ “RSD” を削除
- リンクタグ “wlwmanifest” を削除
以下のフィルタに関しては、不具合等がないのであればチェックは不要です。
他の項目で不具合の時の対処を紹介しています！
こちらも無視してOK
すべてチェックできたら更新！！！
キャッシュファイル削除
プラグインやテーマが最新バージョンに更新された場合、Head Cleaner のキャッシュを削除しましょう！！
その場合は、Head Cleaner 設定ページの下部に「削除」ボタンがあるのでクリック。
他のキャッシュプラグインを使っているのならそちらのキャッシュ削除もやってください。
Head Cleanerでの不具合例と対処方法
私がHead Cleanerを使い始めたらいくつかの不具合が発生しました。
その紹介と対処法を書きます！
SNSボタンが表示されない
本来はTwitter・Facebook・はてぶ・Google＋なんですが、Head Cleanerを使い始めたらFacebookとGoogle＋が表示されなくなりました。
そこで、Head Cleanerの設定の中の「wp_print_head_scripts」というフィルタを設定しました。
「wp_print_head_scripts」にチェックを入れて更新したことでSNSボタンがすべて表示されました！！
ページ上部まで移動するボタンが表示されなくなった
スマホでウェブページを見ているときに、下の方にスクロールしていくと、トップページまで戻るボタンが出現するのだが、それも表示されなくなった。
その問題も「wp_print_head_scripts」にチェックを入れることで解消されました！
有効なフィルタのどれをチェックしたらいいかは一概に言えません。
不具合があった時は1つ1つチェックしていってください…
WordPressプラグイン「Head Cleaner」まとめ
63点になりました。笑
パソコンが79点なんですが詳しいこと調べて対策したら記事にしますね！！
サイトの内部を最適化することで、読者の方の滞在時間に繋がったり、Googleに評価されたりといいことあり。
やらないといけないこと多いなー。
では！
[…] このブログでも紹介しているHead Cleanerというプラグインとぶつかってうまく動かないことがありますが、記事内で紹介している方法で設定してもらえれば動作します。Head Cleanerを使うのであれば、この記事を読んで設定してみてください「Head Cleaner」でページの表示速度を向上させる！ […]