ブログ(WordPress)を高速化しませんか?

  • このエントリーをはてなブックマークに追加

「皆さんのブログ 表示遅くないですか?」
ということで、今回は 技術ブログ的なことを書きます。

画像のモデルは 知る人ぞ知るの 茜さやちゃんです。

こんな可愛い彼女の画像が フリーで使えるのだから ホント良い時代です。
今回は ふんだんに使ってみようと思います。

 

PageSpeed Insights の点数 皆さん 気にしてますか?

自分は、スピード狂なので、無駄に気にしてます。

このサイト(asaage.com) 、結構 ページの表示速度早くありません?

いちおエンジニアなので、
PageSpeed insightsの得点をあげるべく、いろいろ高速化処理をやっているのです。

ということで、今回は、このサイトで行っている高速化処理 公開します。

サーバー設定自体を いじらないといけない箇所が多々あるので、
敷居は結構高いですが、皆さんのお役に立てたら嬉しいです。

もし、こんなん 難しいし、面倒だから、自分じゃできないという方 相談にのりますので 一報ください。

圧縮を有効にする

mod_deflateの設定を .htaccessに追記。

 

ブラウザのキャッシュを活用する

mod_expiresの設定を.htaccessに追記。

 

画像を最適化する

jpegoptimでjpegを最適化

jpegoptimをインストール

画像フォルダに移動して、以下コマンドで一括で最適化

まだ圧縮できるとPageSpeed Insightsでアラートが出る場合は、品質を90%にして圧縮。

 

optipngでpngを最適化

optipngをインストール

画像フォルダに移動して、以下コマンドで一括で最適化

 

サーバーの応答時間を短縮する

php6の方は php7へのアップデートがおすすめ。
php7+ opcache で 相当高速化されます。

 

mod-pagespeedの導入

apacheでのinstall
https://www.modpagespeed.com/doc/download

mod-pagespeed設定を変更。

mod-pagespeedの導入により、ページ表示速度UPと、[CSS を縮小する][JavaScript を縮小する]のエラーが消えます。

※mod_pagespeedを導入すると、高速化されますが、
CSS,変更した画像の反映が遅くなり、ブログの修正作業に支障をきたすことがあります。
そんな時は、以下のコマンドでキャッシュ削除。
touch /var/cache/mod_pagespeed/cache.flush

またはURLに ?PageSpeed=off
を付与すると、一時的に無効化されますので覚えておくと便利です。

WordPressサイト

使用しないWordPressのデフォルト javascriptを外す

絵文字は使わない場合、
WordPress絵文字対応「wp-emoji」を外す。

テーマフォルダにあるfunctions.phpに以下を追加。

 

ページによって使わないcss,javascriptを外す

テーマフォルダにあるfunctions.phpに以下を追加。
例は、contact-form-7プラグインを contactページにしか使わない場合。

 

まとめ

サーバー設定ばかりで、慣れてない人にはむずかしいですね・・
では、ブログがんばりましょう!

 

ちなみに、このサイトの PageSpeed Insightsの点数は、
モバイル:93点 PC:97点 です。

 


  • このエントリーをはてなブックマークに追加
ランキング参加中
にほんブログ村 その他生活ブログ マネー(お金)へ



関連記事

アクセスアップになるか検証、アメブロはじめました

こんばんわ、今日もやる気に満ち溢れている倫太郎です。 元々、このブログ「朝と金」は、 アメブロで書こ …

ブログを無料でSSL対応(https)しました。

今回も ブログ(WordPress)を高速化しませんか? に引き続き、エンジニア視点な事を書きますね …

feedlyのFollowボタンでエラーが発生してるサイトが結構多いかも。

いろんなサイトをクロールしてる最中、 お気に入りのサイトが 「Follow on feedly」のボ …

サイト開設から3週間、icon作成とロゴを整えてみました

今日は最高の天気ですね、倫太郎です。 サイト開設(2017/11/11)から、早3週間が経ち、ブログ …