メンヘラ主婦がアフィリエイトで1万円稼げるか

めんしゅふ

AFFINGER

AFFINGERの高速化で出来たこと・出来なかったこと

投稿日:2017年4月23日 更新日:

こんにちは。めんしゅふちあき(@chiakinako47)です。

このブログでは、有料テーマのAFFINGER(アフィンガー)を使用しています。アドセンス・アフィリエイトだけではなく、ホームページを作る人全員にとっての課題が「ページの高速化」だと思います。実際私が使ってみて、サイトを高速化するにあたり出来たことや出来なかったことをまとめてみます。

あくまで私のブログでの話ではこうでした~という話です。ちなみにバージョンは今のところの最新版、20170410を使っています。

カスタマイズは思わぬ不具合を招く恐れもあるので、バックアップを取ってから行ってくださいね。

スポンサーリンク

高速化する前の点数

高速化する前は、「PageSpeed Insights」にて、モバイルが「60点」、PCが「70点」という結果でした。60点だと結果表示が赤くなり、危機感を感じさせます(笑)60点以下だと、Googleの検索結果(SEO)に悪影響が出ると言われています。

これはなんとかしなければ!と高速化を図ることにしました。

注意コードの書きかえやカスタマイズを行う際は、バックアップを取ってから自己責任で行うようにしてください。

AFFINGERで出来た高速化

AFFINGERのテーマを導入後試して効果があったものは6つです。1つずつ紹介していきます。

JetPackプラグインの見直し

「JetPack WordPress.com」プラグインの見直しをします。これは効果があったかというと微妙なのですが、無駄なプラグインを省くというのはサーバーの負担を軽減することにも大切です。

まず、「Photon」機能ですがこれは通常使用ならば必要ありません。「統計機能」、「関連記事表示機能」、「SNSボタン表示機能」も人によっては不要ですね。「サイトマップ送信機能」も見落としがちなのですが備わっており、「Google XML Sitemaps」というプラグインを入れていても、JetPackのサイトマップ機能が優先されてしまうので注意してください。

JetPackのサイトマップ送信機能はデフォルトでonになっています。JetPackの設定>Traffic>
Generate XML sitemapsからオフにできます。

EWWW Image Optimizerの導入

EWWW Image Optimizerというプラグインは、有効化するだけで画像を投稿するときに30%程度圧縮してくれるプラグインです。導入することで画像の読み込み速度の改善が期待できます。

デフォルト設定で、写真に付加しているEXIF(位置やカメラの詳細など)情報を削除してくれるというありがたい機能も付いています。

TinyPNGの使用

TinyPNGというサイトで、画像ファイルが50%以上圧縮できるのをご存知でしょうか。使い方としては、サイトに画像をドラック&ドロップするだけでOKです。無料は20ファイル、5MBまでという制限がありますが、5MBの画像なんてそうそう使わないので大丈夫ですし、超過したらもう一度再読み込みすれば問題ないのでOK。

TinyPNGをプラグイン化した「Compress JPEG & PNG images」というものもあるのですが、メールアドレスを登録しAPIキーを入手しなければならず、容量制限もあり、しかも圧縮にとても時間がかかるので使っていません。

Autoptimizeの導入

Autoptimizeは、HTML/JavaScript/CSSを最適化して圧縮してくれるプラグインです。例えば、改行が多いコードだとその分読み込みに時間がかかってしまいますが、Autoptimizeは改行をとにかく省略してくれるのでロード時間を短縮してくれます。

当サイトでは【HTMLオプション】の「HTML コードを最適化」と、【CSSオプション】の「
CSS コードを最適化」合計2か所にしかチェックを入れていません。
JavaScriptオプションも色々試しましたが、変わらないか遅くなるかだったので…

AutoptimizeのCSS圧縮を有効化したときにFont Awesomeが表示されなくなりました。対処方法を別記事にまとめました。

AutoptimizeでFont Awesomeが使えなくなったときの対処法

こんにちは。めんしゅふちあき(@chiakinako47)です。 Font Awesomeって便利ですよね。色々なテンプレートに使われていて、種類も豊富で小回りが利きます。ちょっとしたブログのアクセン ...

続きを見る

Speed Up - JavaScript To Footerの導入

「JavaScript To Footer」プラグインは、ヘッダーにあるJavaScriptファイルをフッターに移動させることで、JavaScriptの読み込みを遅延させることができるプラグインです。「読み込み遅延?それダメじゃん」と思うかもしれませんが、JavaScriptファイルはページの大事なテキストや画像をではないので、少しくらい読み込みを後回しにさせても大丈夫なんです。(素人なので間違っていたらごめんなさい。汗)

しかし、このプラグインは注意が必要で、jQueryというスマホ用のメニューバーなどに使われている部分のコードをフッターに移動させるので、マホ用メニューバーが動かなくなったり、PCで見たときにTOPに戻るスルスル~っとしたボタンが効かなくなったりすることがあります。使用には注意して、異常があったら停止してください。当サイトでは今の所問題なく使えていますが、別テーマ使用のサイトでは使えませんでした。

.htaccessの編集

「.htaccess」というファイルを編集することで、コピペでブラウザキャッシュについての設定が一発でできます。ただ、注意なのが「.htaccess」ファイルは少しでも間違えると画面が真っ白になってしまいます。日ごろから子テーマを使って、バックアップをして、すぐに戻せる方なら問題はありません。

「.htaccess」に記載するコードは以下のサイトからコピペさせていただいています。(Simplicityと書いてありますがAFFINGERでも大丈夫でした)

コピペ一発でSimplicityを結構高速化する方法

 

AFFINGERで出来なかった高速化の手段

WP Fastest Cacheの導入

キャッシュ系プラグインの中でも比較的安全と言われている「WP Fastest Cache」ですが、下記のようなエラーが出て、記事下のアドセンスがモバイルで縦2つ連続になってしまったためすぐに導入をとりやめました。スマホの場合2つ連続でアドセンスを表示させるのは規約違反だからです。

エラーの内容:「このプラグインを有効化する際に、214文字分の予期しない出力が生成されました。もし"headers already sent" エラーメッセージ、配信フィードの問題などが発生する場合は、プラグインを無効化または削除してください。"」

このサイトは色々カスタマイズした後だったので、別のカスタマイズ前の新サイト(すべてのプラグインを無効化した状態で、スタイルシートやfunctions.phpもデフォルトの状態で有効化にてみましたが、やはりこの症状が出てしまいました。よって、キャッシュプラグインを使用することはできませんでした…。

おそらく、この記事を書いている2週間前にプラグインの更新があったようなので、その更新のときに何らかの不具合が生じたのだろうと思います。…もともとキャッシュ系プラグインは取り扱いに気をつけなければいけないプラグインなので、何らかのエラーは想定して使わなければいけません。ですので、今回は潔く諦めることにしました。(AFFINGERの作者ENJIさんのブログでも、30万PVになったらキャッシュ系プラグインは導入を検討するべき、と書かれています)

 

高速化の結果!

高速化の結果、モバイルが60→71点に、

PCが70→86点にアップしました♪

劇的に速くなった!!と感じるわけではありませんが、キャッシュのことなどを色々調べるにあたって勉強にはなりましたね。

 

AFFINGERを高速化するためのまとめ

出来たこと、効果があったこと

  • JetPackの見直し
  • EWWW Image Optimizer
  • TinyPNG
  • Autoptimize
  • JavaScript To Footer
  • .htaccessファイルへの記述

出来なかったこと(2017年4月時点)

  • WP Fastest cacheの有効化

以上でAFFINGERを高速化するために行ったことのまとめを終わります。今回は長くなりました。最後までお読みいただき有難うございました♪

 

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

-AFFINGER

Copyright© めんしゅふ , 2017 All Rights Reserved.