相互リンク詳細へ

WordPressを高速化!表示速度を上げる事の重要性と方法について

使い方高速化

高速化の重要性

ページの表示速度は、ユーザビリティにおいても、SEOにおいても重要です。

Googleもページスピードを重視し、検索順位に影響すると明言しています。

Webサイトを高速化することは、サイトの所有者だけでなく、すべてのインターネットユーザーにとって重要です。より速いサイトは幸せなユーザーを生み出します、そして我々が内部の調査でサイトがゆっくり反応するとき、訪問者はそこでより少ない時間を費やすことを見ました。しかし、より速いサイトはユーザーエクスペリエンスを向上させるだけではありません。最近のデータによると、サイトの速度を向上させることで運用コストも削減されます。。私たちと同様、私たちのユーザーはスピードを重視しています – それが私たちが検索のランキングでサイトのスピードを考慮に入れることにした理由です。

Googleより引用(ブラウザ翻訳したので日本語がおかしいところあり)

 

ページの表示速度を高速化する為には、以下の点を改善する事で、ある程度可能です。
環境によっては、劇的に速くなる可能性もあります。

画像のサイズ最適化、遅延読み込み
CSS・Javascriptソース等の内容を圧縮
キャッシュを利用する

 

上記を実現するための方法やプラグインなどを紹介していきます。

 

ルクセリタスをお使いの方へ

ルクセリタスには標準で以下の機能が設定できます。

  • HTMLの圧縮
  • CSSの最適化
  • Javascriptの最適化
  • キャッシュ有効化
  • 画像遅延読み込み(LazyRoad)
キャッシュ系プラグイン、コード圧縮系プラグインは入れない事!

 

ルクセリタスの高速化設定については以下をご覧ください。

 

 

画像の最適化

最近は、スマホのカメラ性能が格段に良くなっている為、スマホで撮った写真をブログなどで利用する際には、サイズを圧縮する必要があります。

そのままサイトにアップして使っても、レイアウト上は縮小表示されるので気づきませんが、読み込みに何倍も通信量がかかります。

表示速度が遅いと、ユーザーはイライラする、Googleからは「遅い」と評価される と、いい事なしです。

 

そもそも大きすぎる画像(スマホで撮影したままの2~3Mbとか、それ以上のサイズ)は、ワードプレスへのアップロード時にエラーとなってしまう事もありますので、プラグインで圧縮出来るとは言え、小さくしてからアップしましょう。

 

 

アップロード前にサイズダウン

画像圧縮サイトを利用する

ファイルは20個まで(合計5Mbまで)一度に圧縮、ダウンロード可能

TinyPNG

 

ツールを使う

一度に大量の画像ファイルを圧縮したい際などには、それに対応したツールを使う手もあります。

“画像圧縮 フリー” などと検索するとたくさんありますので使いやすそうなものを使ってみて下さい。

ツール例

 

ペイントでサイズダウンする

 ペイントで開き「サイズ変更」で縮小します。

4486_01

 

 「ピクセル」表示にするとサイズ(幅×高さ)がわかります。

4486_02

 

私の場合は、大きな画像の場合、ピクセルで600~800pxくらいのサイズになるよう縮小しています。(当サイトではスマホ撮影の画像使用はほとんどないので、そもそも小さい)

このくらいのサイズであれば、%指定なら20~25%でOKです。

 

アップロード後の最適化

EWWW Image Optimizerプラグインによる圧縮

EWWW Image Optimizer

画像のアップロード時に自動圧縮が出来る為、非常に便利な必須プラグインです。既にアップロード済みのメディアファイルも圧縮可能です。

使い方等は以下をご覧ください。

 

画像の遅延読み込み(LazyRoad)

 

ページの読み込みの際に、今表示している画面外の画像読み込みを遅延させる事で、表示速度を速めます。

つまり、一度にページ内すべての画像を読み込むと時間がかかる事がある為、見えている画面より下にある画像は、最初に読み込まず、スクロールしていく都度、画像が読み込まれるようにする機能です。

 

テーマによっては、プラグインを使わなくても機能として備わっている場合がありますので、お使いのテーマをご確認の上、重複して利用しないようお気をつけ下さい。

 

プラグインを使う

画像の遅延読み込みを行うプラグインは多数あります。

  • Lazy Load
  • BJ Lazy Load
  • a3 Lazy Load
  • Lazy Load by WP Rocket
  • Lazy Load Optimizer
  • など・・

どれも画像とインラインフレームなどが遅延読み込み可能です。

他の管理サイトで利用しているのは「BJ Lazy Load」です。

BJ Lazy Load

BJ Lazy Load

遅延できる設定項目

  • コンテンツ
  • テキストウィジェット
  • 投稿サムネイル
  • グラバター
  • 画像
  • iframe

シンプルな設定で使いやすいです。

 

ソースファイルの圧縮

WordPressは、初心者でも簡単にWebサイトを構築ができますが、HTML、CSS、JavaScriptのソースコードが複雑になってしまい、サーバーとのやり取りに時間がかかり読み込みスピードが遅くなってしまいます。

 

膨大な複数のCSS記述を結合したり、JavaSctiptの記述位置を考慮したりすることで、読み込み時間を速くすることが出来ます。

テーマによっては、プラグインを使わなくても機能として備わっている場合がありますので、お使いのテーマをご確認の上、重複して利用しないようお気をつけ下さい。

 

コード圧縮、Javascriptの扱い等で不具合が出ないとも限りませんので、以下のプラグインを利用する際はバックアップを取っておくことをお勧めします。

 

 

プラグインを使う

Head Cleaner

Head Cleaner

ブラウザとWebサーバのやり取りの回数やデータ量を減らせる設定が可能で日本語対応されたプラグインです。

このプラグインの設定により、以下の事が可能です。

  • 複数のCSSを結合
  • 複数のJavaSctiptを結合
  • <head>内のJavaSctiptをフッターに移動
  • CSSの最適化
  • Javascriptを縮小

 

Autoptimize

Autoptimize

有名なプラグインですが、CSS結合や最適化によってデザインが崩れる事もあるようですので、必ずバックアップを取ってから行って下さい。

このプラグインの設定により、以下の事が可能です。

  • HTML最適化
  • Javascriptの最適化
  • インラインのjsを連結
  • CSS最適化
  • など

 

キャッシュを有効に利用

ページキャッシュ

ページキャッシュ系プラグインは多数あります。有名なプラグインは以下です。

  • WP Super Cache
  • Simple Cache
  • WP Fastest Cache

WP Fastest Cacheは、ソースコードの圧縮機能、ブラウザキャッシュ機能もありますので、このプラグインひとつでソース圧縮、結合、ブラウザキャッシュ、ページキャッシュがすべて可能ですが、圧縮については圧縮専用のプラグインほどの効果はなさそうです。

 

ブラウザキャッシュ・フォントキャッシュ

.htaccessに追記

 

.htaccessファイルはサーバーのワードプレスがインストールされている場所にあります。

4486_03

FTPでダウンロードし、編集してアップロードします。

FTPについては以下も参考にして下さい。

サーバーによっては、コントロールパネル等から「.htaccessファイル」を直接編集可能ですが、その際にもFTPでダウンロードしてバックアップを取っておくようにして下さい。

レンタルサーバーでの.htaccess編集については以下にヘルプがあります。
エックスサーバー
さくらレンタルサーバー
ロリポップ

 

.htaccess に以下の記述を “追記" します。上書きはしないようにご注意下さい。

 

#フォントのcontent-typeの追加
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# ブラウザキャッシュ
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 2 days"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType text/css "access plus 1 days"
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/x-icon "access plus 1 weeks"
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 216000 seconds"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
</ifModule>
# フォントキャッシュ
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

 

14 days や 1 month の部分は日数の指定ですので、お使いの状況に合わせて変更して下さい。

以下のような指定が可能です。

14 days
1 weeks
1 month

 

Gzip圧縮

Gzip圧縮は、サーバからのデータを読み込む際に転送するデータに対して圧縮をかけます。テキスト、HTML、CSS、JavaScript、画像、フォントに対して圧縮をかけられ、データ量を大幅に軽減できるので、処理速度が上がります。

.htaccessに追記

ブラウザキャッシュ同様、.htaccessに追記します。

 

.htaccess に以下の記述を “追記" します。上書きはしないようにご注意下さい。

 



AddType image/x-icon .ico

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE

# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Mozilla4系などの古いブラウザで無効、しかしMSIEは除外

# 画像など圧縮済みのコンテンツは再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4

# 有効な圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/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
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
</IfModule>

# セキュリティ上、ETagを消す
FileETag none