WordPress高速化の備忘録

この記事は最終更新日から309日経過しています。

WordPressの読み込みに時間がかかるようになって来ましたので、高速化を図りました。

まだまだ改善できる箇所はあるかと思いますが、第一弾の備忘録として実践した方法を残したいと思います。

スポンサーリンク




スピードを確かめる

GTMetrixPageSpeed Insightsでどれくらい遅いのかを確かめます。

キャプチャを取っていなかったのですが、GTMetrixのスコアが、PageSpeed Score「C」、YSlow Score「C」でした。

PageSpeed ScoreとYSlow Scoreの違いが分かっていませんが、読み込みに時間がかかっていることが分かります。

PageSpeed Insightsは、モバイルの速度が「58」、パソコンの速度が「72」くらいでした。

スコアが60以下だと、修正が必要ということで、すぐに高速化の方法を調べます。

参考)「ブログが重い!」WordPressを高速化させるための8つの方法とおすすめプラグイン

.htaccessを編集

WordPressのテーマは、Simplicityを使用しているため、まずはテーマで高速化する方法を調べました。

テーマ作成者の方のブログで高速化の方法が紹介されていました。
コピペ一発でSimplicityを結構高速化する方法

ルート下の.htaccessに以下のコードをコピーします。

# ETags(Configure entity tags) を無視する設定
<IfModule mod_headers.c>
    Header unset ETag
</IfModule>
FileETag None
 
# Enable Keep-Alive を設定
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>
 
# MIME Type 追加
<IfModule mime_module>
    AddType image/x-icon .ico
    AddType image/svg+xml .svg
    AddType application/x-font-ttf .ttf
    AddType application/x-font-woff .woff
    AddType application/x-font-opentype .otf
    AddType application/vnd.ms-fontobject .eot
</IfModule>
 
# プロクシキャッシュの設定(画像とフォントをキャッシュ)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|otf|eot)$">
    Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>
 
# ブラウザキャッシュの設定
<IfModule mod_headers.c>
<IfModule mod_expires.c>
    ExpiresActive On
 
    # キャッシュ初期化(1秒に設定)
    ExpiresDefault "access plus 1 seconds"
 
    # MIME Type ごとの設定
    ExpiresByType text/css "access plus 1 weeks"
    ExpiresByType text/js "access plus 1 weeks"
    ExpiresByType text/javascript "access plus 1 weeks"
    ExpiresByType image/gif "access plus 1 weeks"
    ExpiresByType image/jpeg "access plus 1 weeks"
    ExpiresByType image/png "access plus 1 weeks"
    ExpiresByType image/svg+xml "access plus 1 year"
    ExpiresByType application/pdf "access plus 1 weeks"
    ExpiresByType application/javascript "access plus 1 weeks"
    ExpiresByType application/x-javascript "access plus 1 weeks"
    ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
    ExpiresByType application/x-font-ttf "access plus 1 year"
    ExpiresByType application/x-font-woff "access plus 1 year"
    ExpiresByType application/x-font-opentype "access plus 1 year"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>
</IfModule>
 
# Gzip圧縮の設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
 
    # 古いブラウザでは無効
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
 
    # 画像など圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
    # プロクシサーバーが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary
 
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-woff
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>

コードを、# END WordPressの下に貼り付けます。
参考)Simplicityテーマでブログを高速化した時のメモ

これで、かなりスコアが改善しました。

画像をロスレス圧縮する

サイズの大きい画像を、圧縮してもデータの欠落が起こらない方法で圧縮します。

圧縮は、kraken.ioを使用しました。
参考)画像を最適化(ロスレス圧縮)してWordPressブログを高速化する方法

「2.Choose optimization mode」をLOSSLESSに切り替えてファイルをアップロードします。

圧縮処理は自動で行われ、圧縮後の画像をダウンロードできるようになります。

これをGTMetrixとPageSpped Insightsが修正を提案していた画像全てで行いました。

この作業でGTMetrixのスコアが数パーセント改善しました。

画像のimgタグにwidthとheightを明示する

Simplicityテーマでは、アイキャッチなどを設定しない時にサムネイルとして表示される「No image」画像があります。

私がこれを変更していたためか、サムネイルを表示させる際のimgタグにwidthとheightが設定されていないことが、GTMetrix上でのスコアを減少させる要因となっていました。

そこで、該当箇所全てに、widthとheightを記述しました。

CSSのコメントを削除する

CSSのコメントが本当にWordpressの読み込み速度に影響を与えているのかは不明ですが、CSSに詳細にコメントを残した後に読み込みの速度が遅くなった気がしたことと、どこかでCSSの最適化にはコメントの削除も含まれるという記述を見た気がしたため、CSSに記述したコメントを全て削除しました。

結果

PageSpeed Insightsのスコアが、モバイル「72」、パソコン「88」まで改善しました(ドヤ

GTMetrixのスコアが、PageSpeed Score「A」、YSlow Score「B」まで改善しました(ドヤ

まだ改善できる箇所があるような気がしますが、とりあえず第一弾はこれで様子を見たいと思います。

次のレッスンへ【Wordpress】リビジョンの削除とリビジョン機能の停止

「WordPress初心者入門」のトップへ

WordPressの基礎を体系的に学びたい方のために

WordPressの基礎を体系的に学習したい方向けの著書が発売になります。

本書の手順に沿ってサイトを作成していただくだけで、WordPressの操作方法やサイト作成の基礎を学べる構成になっています。

これからWordPressでサイト作成を始めようと考えているけど、何から始めれば良いか迷っている。

本書はそんな方のための一冊です。

ぜひお手にとってご覧いただければ嬉しく思います。

スポンサーリンク




シェアする

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

フォローする

スポンサーリンク