MENU
カテゴリー
アーカイブ

【SWELL超高速化】「表示速度が遅い」と思ったらやるべき設定方法

URLをコピーする
URLをコピーしました!
悩む人

SWELLに移行したけど、遅い。表示速度が改善しない。

どうすれば速くなるの?

こんな悩みを解決します。

この記事で分かること
  • SWELLを超高速化する設定方法まとめ
  • SWELLを超高速化する設定方法【テーマ側】
  • SWELLを超高速化する設定方法【サーバー側】
  • ページ表示速度を測定する方法

この記事を書いている人

ため(@tame3_tame3

「SWELLを導入したけど、表示速度が速くならない」ってことがありますよね。

僕の場合、導入直後はサイト表示速度が向上。

モバイルの表示速度
PCの表示速度

しかし、これ以上速くなりませんでした。

ため

これ以上は無理かな...

と思いつつ、何から何まで全部試しました。

ため

10日ほど粘ったら、こんな数字が...

モバイル表示速度
PC表示即

そこで今回は、僕が10日掛けて身に着けた

【SWELL超高速化】「表示速度が遅い」と思った時の設定方法

についてお伝えします。

ため

この記事に沿って設定すれば、1~2時間後には爆速になりますよ。

それでは、見ていきましょう。

目次

\ みんな使い始めてる /

WordPressテーマSWELL【あなたのブログ生活を180度変える魔法のテーマ】

HTMLの操作不要!やるべきことは記事を書くだけ!

・1/2の労力でライバルに圧倒的な差を付けられる!

・Google検索1ページ目はあなたのものです!

人気ブロガーになるのも時間次第です!

参考【満足度4.5】SWELLを使った感想レビュー|デメリット4つ・メリット7つを解説

SWELLを超高速化する設定方法まとめ

SWELLを超高速化するには、以下を行う必要があります。

  1. フォントを変える
  2. 余計なものを削除する
  3. SWELLの高速化設定を使う
  4. 「EWWW Image Optimizer」を入れる

というのは、

  • テーマ側の設定方法
    • SWELLを最適化できる
  • サーバー側の設定方法
    • WordPress自体のファイルサイズを小さくできる
    • ブラウザとサーバー間のやり取りを速くできる

からです。

ため

同時にやることで、爆速になりますよ。

という訳で、テーマ側とサーバー側の設定方法についてお伝えしますね。

SWELLを超高速化する設定方法【テーマ側】

まずはテーマ側の設定方法です。

SWELLを超高速化する設定方法【テーマ側】
  1. フォントを変える
  2. 余計なものを削除する
  3. SWELLの高速化機能を使う
  4. 「EWWW Image Optimizer」を入れる

一つずつ説明しますね。

フォントを変える

SWELLのデフォルトフォントは「Noto sant JP」。これはファイルサイズが大きいので、読み込みに時間が掛かります。

ため

実際に「Noto sant JP」を設定したら、遅くなりました。

モバイル速度
PC表示速度

游ゴシックに変更

なので、フォントを変えます。

「ダッシュボード」→「外観」→「カスタマイズ」→「サイト全体設定」→「基本デザイン」と進んでください。

デフォルトの設定
ため

これを変更します。「Noto Sans JP」以外なら、何でも構いません。


僕は「游ゴシック」が好きなので、「游ゴシック」にしています。

「游ゴシック」→「公開」

表示速度の変化

フォント変更後の表示速度です。

モバイル表示速度
PC表示速度
ため

モバイルは17、PCは18改善しました。

このように、フォントを変えるだけで表示速度が速くなります。

余計なものを削除する

以下はWordPressの容量を取ります。

  • 利用停止中のウィジェット
  • 使っていないブログパーツ
  • 使っていない広告タグ
  • ごみ箱の記事
ため

「容量を取る=ファイルサイズが大きくなる」

ので、必然的に処理スピードが下がります。

だから、余計なものを削除しましょう。

そうすればファイルサイズが小さくなるので、処理スピードが上がります。

ため

それにより、サイト表示速度が速くなりますよ。

SWELLの高速化機能を使う

SWELLの高速化機能は以下のとおり。

  • キャッシュ機能
    • 観覧データを一定期間保持する
  • 遅延読み込み機能
    • スクロールに合わせて画像を表示する
  • ファイルの読み込み
    • ソースコードをHTMLの一部にする
  • ページ遷移高速化
    • 画面が切り替わるスピードを速くする
ため

上記を使います。

「ダッシュボード」→「SWELL設定」→「高速化」と進んでください。

キャッシュ機能

まずは「キャッシュ機能」。全てにチェックを入れます。

全てにチェック
チェックを入れる項目
  • 動的なCSSをキャッシュする
  • ヘッダーをキャッシュする
  • サイドバーをキャッシュする
  • 下部固定メニューをキャッシュする
  • スマホ開閉メニューをキャッシュする
  • トップページコンテンツをキャッシュする
  • 内部リンクのブログカードをキャッシュする
  • 外部リンクのブログカードをキャッシュする
ため

ブログカードのキャッシュ期間は、「30日」のままでOKです。

遅延読み込み機能

次は「遅延読み込み機能」。以下のとおりに設定してください。

チェックを入れる項目
  • 記事下コンテンツを遅延読み込みさせる
  • フッターを遅延読み込みさせる
  • スクリプト(lazysizes.js)を使って遅延読み込みさせる

フッターを遅延読み込みさせた場合の注意点

フッターの表示・非表示機能が使えなくなることがあります。

ファイルの読み込み

その次は「ファイルの読み込み」。このように設定してください。

「SWELLのCSSをインラインで読み込む」にチェック

インライン・・・ソースコードをHTMLの一部にすることです。

ため

インライン化すると余計なものを処理しなくて済みます。

なので、サーバーの読み込みスピードが向上。それによって、サイト表示速度が速くなるのです。

ページ遷移高速化

最後は「ページ遷移高速化」です。「Prefetch」にチェックを入れてください。

「Prefetch」にチェック

Pjaxによる遷移を選ぶと、アドセンスが表示されないことがあります。

ため

終わったら、下部の「変更を保存」をクリックしてください。

「変更を保存」をクリック

「EWWW Image Optimizer」を入れる

EWWW Image Optimizer

画像を圧縮するプラグインです。画像ファイルを小さくします。

画像ですが、一枚一枚のファイルサイズは微々たるものです。

しかし、画像が増えるとファイルサイズが大きくなります。それによって、処理スピードが落ちることに...

ため

結果、サイト表示速度が遅くなります。

そうならないためにも、「EWWW Image Optimizer」を使って圧縮しましょう。

「ダッシュボード」→「プラグイン」→「新規追加」と進んでください。

検索窓に「EWWW Image Optimizer」と入力 → 「今すぐインストール」

検索窓に「EWWW Image Optimizer」と入力 → 「今すぐインストール」をクリック。

検索窓に「EWWW Image Optimizer」と入力 → 「今すぐインストール」

「有効化」をクリック

「有効化」をクリックします。

「有効化」をクリック
ため

インストールしたら、一括最適化をします。

「ダッシュボード」→「メディア」→「一括最適化」→「最適化されていない画像をスキャンする」→「〇点の画像を最適化」

と進めばOKです。

これでテーマ側は終わりました。

ため

次は、サーバー側の設定方法をお伝えします。

SWELLを超高速化する設定方法【サーバー側】

サーバー側の設定方法は以下のとおりです。

SWELLを超高速化する設定方法【サーバー編】
  • gzip圧縮をする
  • 画像をWebP変換する

一つずつ説明しますね。

gzip圧縮

gzip圧縮とは、ファイルサイズを小さくする方法の一つです。

gzip圧縮をするメリット

ブラウザとサーバー間を行き来するデータ量を削減。その結果、ブラウザとサーバー間のやり取りが速くなります。

ため

つまり、ファイルサイズを小さくすることで表示速度が上がるってことです。

そんなgzip圧縮は2つあります。

  • PHP圧縮
  • mod_deflate圧縮

一つずつ説明しますね。

PHP圧縮

PHP圧縮とは、PHPファイルを小さくする方法です。

ため

これをやると、WordPressのPHPファイルサイズが小さくなります。

その結果、ブラウザとサーバー間のやり取りが速くなるのです。

「サーバーのコントロールパネル」→「php.ini」と進んでください。

「php.ini」を開いたら、「zlib.output_compression」の値を"On"にします。

php.ini

zlib.output_compression = On

ため

終わったら、「Save」をしてください。

mod_deflate圧縮

「mod_deflate圧縮」とは、モジュールを使ってファイルを小さくする方法です。

モジュール・・・Webアプリケーション。

ため

設定をすれば、モジュールが全部圧縮してくれますよ。

ただ、サーバーのCPUの負荷が上がります。なので、サーバー会社に確認しましょう。

「サーバーのコントロールパネル」→「.htaccess」と進んでください。

# END WordPress上に、以下のコードを記入します。

.htaccess

<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#画像は圧縮しない GIF、JPEG、PNG、ICO
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary#圧縮するファイル
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/js
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
</IfModule>

# END WordPress

ため

こうなったのを確認したら、「Save」してください。

WebP変換

WebP変換とは、画像をWebPフォーマットに変えることです。

WebP

Googleが開発した次世代画像フォーマットの一つ。

ため

圧縮率が高く軽量化が図れます。

なので、変換しましょう。

悩む人

どうやってやるの??

ため

これからお伝えしますね。

「ダッシュボード」→「設定」→「EWWW Image Optimizer」と進んでください。

「WebP 変換」にチェックを入れる

画面をスクロールし、「WebP 変換」にチェックを入れます。

「画面をスクロール」→「WebP変換」

コードをコピー

すると下記が表示されます。

コードをコピー
<IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteCond %{HTTP_ACCEPT} image/webp
     RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
     RewriteCond %{REQUEST_FILENAME}\.webp -f
     RewriteCond %{QUERY_STRING} !type=original
     RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
     <FilesMatch "\.(jpe?g|png|gif)$">
         Header append Vary Accept
     </FilesMatch>
</IfModule>
AddType image/webp .webp
ため

表示されたら、コードをコピーしてください。

サーバーの「.htaccess」に貼り付け

お使いのサーバーの「.htaccess」を開きます。

「サーバーのコントロールパネル」→「.htaccess」と進んでください。

開いたら、# BEGIN WordPressの下にコードを貼り付けます。

.htaccess
# BEGIN WordPress

<IfModule mod_rewrite.c>
     RewriteEngine On
     RewriteCond %{HTTP_ACCEPT} image/webp
     RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$
     RewriteCond %{REQUEST_FILENAME}\.webp -f
     RewriteCond %{QUERY_STRING} !type=original
     RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L]
</IfModule>
<IfModule mod_headers.c>
     <FilesMatch "\.(jpe?g|png|gif)$">
         Header append Vary Accept
     </FilesMatch>
</IfModule>
AddType image/webp .webp

# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
ため

こうなったのを確認したら、「Save」してください。

変換されているか確かめる

お使いのWordPressにログインします。

「ダッシュボード」→「設定」→「EWWW Image Optimizer」と進んでください。

ため

下記の表示が出ていればOKです。

こうなればOK

表示されない場合、F5を押してみてください。

キャッシュを削除する

最後は、以前のデータを消すためにキャッシュを削除します。

「ダッシュボード」→「SWELL設定」→「リセット」→「キャッシュを削除する」

ため

これで完了です!

PageSpeed Insightsで速度を確認する

では、表示速度を確認してみましょう。

>>PageSpeed Insights

(リンクをクリックするとページが移動します)

ため

変わりましたか?

少しは速くなったのではないでしょうか。

【SWELL超高速化】「表示速度が遅い」と思ったらやるべき設定方法:まとめ

今回は、【SWELL超高速化】「表示速度が遅い」と思った時の設定方法についてお伝えしました。

リンクをクリックするとページがスキップします

ファイルを小さくして処理スピードを上げれば、表示速度が速くなります。

ため

なので、余分なものは圧縮しましょう!

あとは、余計なプラグインを削除すると良いです。削除できるプラグインについては、以下をご覧ください。

参考記事

今回は以上です。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメント一覧 (2件)

コメントする

目次
閉じる