読者です 読者をやめる 読者になる 読者になる

e-mono

日々の出来事や新しく購入したアイテムの紹介などを書いてます。

WordPressの動作を早く(軽く)するために行った3つの方法

WordPressを使っていると、どうしてもプラグインCSSやらJSやら色々なファイルを読み込んでしまうので動作が重くなりがちなところはあると思います。

そこで自分で試した方法を3つご紹介しようと思います。

まず、作業を始める前に今の状態のページはPageSpeed Insightsで何点なのかチェックしておきます。 Googleのサービスで、テストすると改善ポイントなんかも指摘してくれますので、やったことない人はぜひ試してみてください。 一応85点以上取れれば良いサイト的な基準らしいですよ。

ちょっとメモするの忘れてしまったのですが、開始前の点数は71点でした。 まずは結果から

Google PageSpeed Insights モバイル 51→66 パソコン 71→79

ここまで改善しました

スクリーンショット 2016-05-11 9.00.06

では行った作業をまとめていきたいと思います。

  • 画像のサイズを軽くする
  • プラグインにセットでつくてくるCSSで不要なものを読み込まないようにする
  • キャッシュを利用する(これが一番効果あり)

です。

 

画像のサイズを軽くする

これはプラグインを使って作業を行いました。

EWWW Image Optimizer というプラグインです。これは画像を投稿する時に自動的に圧縮してくれて、さらにすでに登録されている画像も圧縮してくれるという嬉しいツールです。 つまり!何もしなくても良いということですねw

スクリーンショット 2016-05-11 9.08.07

この画面のOptimize Media LibraryのStartですでに登録されている画像も圧縮してくれます。

ただ、アップロードと同時に圧縮をかけるので、ちょっとアップまで時間かかります。

まずはこの作業ですべての画像を圧縮しました。この時点で先程のテストを行ってみると1点だったかな?改善されたかどうかです。 まぁ、ブログ自体が開設して間もなかったので、画像もそんなに無いですからね。。。動作に響くほどのものではなかったということでしょう。

 

プラグインにセットでつくてくるCSSで不要なものを読み込まないようにする

自信のBlogでソースを見てみるとpluginフォルダから読み込みを行っているCSSが幾つかあると思います。

プラグインの数によって当然CSSの読み込み数は変わると思いますが、不要なCSSは削除というか読み込まないようにWordPressのfunction.phpに記述を行います。

//CSSを読み込まないようにする
function my_dequeue_styles() {
    wp_dequeue_style( 'crayon-font-monaco' );  
    wp_dequeue_style( 'jetpack_css' );     
}
add_action( 'wp_print_styles', 'my_dequeue_styles' );

この記述を真似してもらえればOKかなと思います。

wp_dequeue_styleの中にCSSのID名を入れるだけです。ID名に-cssと入っていると思うのですが、これは外します。 上を例にしますとcrayon-font-monaco-cssだったのですが、-cssは外してます。最初うまく行かなかったのですが、どこかの記事を見たら-cssを外すと出来たと書いてたので、真似しました。

これもCSSの外せる数は限られます(外すことにより当然レイアウト崩れる場合もあるので)、このサイトの場合外せたのは2つだけ。 結論から言いますと点数変わらず。Google先生の評価は厳しいですね。。。。

 

キャッシュを利用する(これが一番効果あり)

これが効果ありました。一気に6〜7点位アップしたと思います。

キャッシュを読み込んで使うようにする。僕の場合はWordPressをインストールしているフォルダに.htaccessがありましたので、その.htaccessに以下を一番上にペタッとコピペするだけです。

 

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

ただ、この設定については合う合わないがあります。

僕も最初他ブログさんで書いていた設定を貼り付けたらページエラーを起こしてページが開かなくなりました。

皆さん色々な書き方をしていますので、何種類か試して上手く動いたものを使用すると良いのかなと思います。

ページキャッシュは、Wordpressにて、動的に生成された「HTMLページ」を丸ごとキャッシュして、サーバー側で保持します。

こうすることで、1度「ページキャッシュ」を作っておけば、次回以降のユーザーからのリクエスト時には、キャッシュされたHTML(静的ページ)を表示することができます。

これによって、動的にページ生成する工程が無くなるので、高速化になるわけですね。

キャッシュについては、w3 Total Cacheと呼ばれる、キャッシュ系の人気プラグインも有りますので、そのへんも試してみようかなと思います。

もっと点数アップ出来たらまたご報告しようと思います。

それでは快適なWordPressライフを

スポンサーリンク