このwordpressブログを軽くするためにやったこと6選

2018年8月28日

みなさんはwordpressでコンテンツ更新しているときなんか自分のサイト重いな、と思うことってありませんか?

そう思った方は一度以下のブラウザツールでサイトのスピードを測ってみましょう。

PageSpeed Insights

どちらも80点以上ならいい感じですがそれ以下の人は対策が必要そうです。

wordpressで軽くするためにやること

簡単にできることからちょっと上級者向けまでサイトを軽くするためにできることをまとめました。

下の項目ほど難しいので最初は簡単なものから紹介します。

とりあえず重い画像はやめよう&とりあえず画像は圧縮してみよう

ブログのサムネイルなどに重い画像をのせるのはやめましょう。

画像だけでサイトのローディングが長引いてしまいます。

また、最近のスマホはカメラの性能が良くそのままブログに貼り付けてしまうととんでもない容量の画像があります。

僕の場合画像を一回以下のツールに通して圧縮します。

image-compressor

使い方は左のqualityの欄を0.6~0.8くらいにして一番上のファイルを選択で投稿する画像を選んでください。

あとは出来上がった画像をダウンロード&ブログへ投稿しましょう。

あまりqualityの欄を下げてしまうと画質が悪くなってしまうのでそこだけ注意してください。

プラグインの数を減らす

かなり便利なプラグインですが入れすぎには注意です。

後述しますがいらないcssやjsが読み込まれページが表示される前に読み込みに時間がかかってしまいます。

個人ブログの場合多くても10個くらいを目安に考えて運用してみましょう。

Twitter,FaceBookなどSNSのリンクをそのままブログに張らない

SNS公式から持ってきたコードをそのまま張り付けてブログやサイトに張るのは確実にローディングを遅くします。

特にツイートを見せるようなデザインのものはスピードがガクッと落ちます。

「○○さんをフォローする」といった類のものであれば自分で画像を用意してリンクに自分のtwitterを張ればいいだけなので重くなる可能性は小さくなります。

ブログでツイートのタイムラインを見せるのは正直悪手だと思います。

ブログやサイトのコンテンツが少なければありかなと思いますが。

jQueryをgoogleのCDNから読み込む

いい感じのアニメーション効果などをサイトに追加する際によく使われるjQuery。

ですが自分のフォルダにjQueryを置いてると若干サイトが重く感じられます。

そんなときはgoogleのCDNを使わせてもらいましょう。

Google Hosted Libraries

上記のサイトに例が書いてありますのでそこからjQueryのスクリプトコードの例をサイトに埋め込みます。

[html]
//例
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
[/html]

これで自分のフォルダにjQueryのフォルダを入れなくてもjQueryが使えてかつ軽くなります。

css,jsを圧縮

css,jsは圧縮できます。

具体的に言うとcss,jsのファイルにコメントや隙間があるとその分容量が必要になり重くなります。

そのコメントや隙間を消すことによって圧縮できます。

可読性が悪くなるので自己責任でお願いします。

前述のgoogleinsightで圧縮されたファイルをもらえるのですぐ適用できると思います。

apacheをいじってキャッシュの記憶期間を延ばしたりする

apacheがいじれる方はぜひこちらに挑戦してみましょう。

.htaccess の書き方(スピードアップ編)

バックアップをとってから変更作業をしましょう

変更作業はうまくいかないときもあるので絶対にバックアップを取ってから作業しましょう。

僕は過去にファイルをいじりすぎて復旧までに時間がかかったことがありました。

[blogcard url="https://tanakaryo.net/memo/pagespeedinsights-not-work"]

特にwordpressはphpで出来ているのでミスすると画面に明確なエラーが出ずに苦労します。

注意してカスタマイズしましょう!