WordPressの表示スピード改善方法決定版2021年

webあれこれ
A男
A男

サイトが遅い…

なんで…⁉

ポムちゃん
ポムちゃん

遅いには理由があるよ!

一つ一つ見ていこう!

HTMLサイトのような静的サイトとは違って、WordPressは動的サイトのためリアルタイムにページを更新していきます。よって構成されているファイルも異なりますし、データが重くなりがちです。※HTMLサイトの方が、データは軽いです。

この記事は、WordPressの勉強をしている方WordPressのテーマを作成・カスタマイズしている方、向けの記事です。初心者については一部対応していません。

画像の容量の圧縮

サイト表示の速度遅延の原因としては、画像の容量が非常に影響を及ぼしています。

ホームページのデザインなどにもよりますが、1,000px以上の大きさの画像は絶対に圧縮したほうがよいです!自分のパソコンで、載せたい画像の容量を見てみよう!

※下記の画像の「サイズ」は容量(KB)のことです!
画像の横×縦(px)の大きさではありません。

基本的にWEB上では画像の拡張子は.jpgや.pngを使用します。
最近では、Googleが開発したWEB軽量化のための.wepPも主流になってきているが、未対応のブラウザ(safari・IE)があるのでやはり.jpgが無難です。

Safariは、今後対応予定とのことです。

ちゃいてぃ
ちゃいてぃ

ことごとく未対応…

IEのことですよ…

画像の拡張子の簡単な説明

.jpg・・・サイズの大きな画像でファイルサイズを小さくするには、JPGが一番良い。しかしJPGは保存する度に画像が劣化することには気をつける必要があります。

.png・・・透過する。可逆圧縮(圧縮しても劣化しない)。

・webP・・・圧縮性に優れて軽量化もアップさせた新しい拡張子。非可逆圧縮(データの一部は破損するが、目立たないところをうまく削減し最適な形で圧縮可能なもの)

基本的には.jpgを使用するが、ブラウザによっては.webPも使用できるのでブラウザによって使い分けができるようにしておくことが望ましい。

画像圧縮プラグインをいれよう

EWWW Image Optimizer・・・設定が簡単!一括で圧縮可能。圧縮率は低いが、画像は綺麗なまま。.webP自動生成機能あり。

Compress JPEG & PNG images・・・圧縮率はやや高め。だが枚数制限あり。無料なのは500枚の圧縮まで。

↓オンラインで下記のサイトもあるので、無料の範囲で試したいかたは下記のサイトで圧縮してから画像のアップロードをしたほうが良いです!

TinyJPG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyJPG is the best automatic WEBP, JPEG and PNG optimizer and compresses your WEBP, JPEG and PNG images by 40-60%!

cssやJavaScriptファイルの圧縮

CSSやJavaScriptファイルの圧縮をして、ファイルの読み込みを早くします。

functions.phpで読み込むファイルを逐一、ミニファイしてもよいのですが、ここでは最もシンプルかつ簡単なやり方をします!

エディターのVisual Studio Codeの拡張機能である「JS & CSS Minifier (Minify)」を使用します!

Minifyボタン一つで、○○.min.cssのような圧縮したファイルを自動生成してくれます。
読み込みは、minがついた方のファイルを読み込むようにしてください。

ファイルを修正した後は、必ずMinifyボタンを押すようにしてください。

JavaScriptをフッターで読み込む

ウェブサイトは、構造上、上から順番に読み込まれていきます。
ページの表示を早くしたいので、装飾に関係のないJavaScriptなどはボディタグの最下部、フッターで読み込ませるようにしてください。

表示スピード高速にするプラグイン Automatize を使用する

ブログ型サイトや、複雑なアニメーションがないサイトは、プラグインのAutomatizeを使用すれば一気にコードを最適化できます。

プラグイン Automatize を使用しない場合

Automatizeを使用したものの、画面がおかしい・装飾が崩れた場合は、プラグインを使用しなくても表示スピードを上げることが可能です。

私自身、トップに複雑なアニメーションを加えている場合は、Automatizeは使用しません。便利だけど、アップデートにともなう不具合もありますし、一番に装飾が変になります。
最適化しないファイルも除外できるとのことですが、バグなのか除外できませんでした。

Automatize事態、大量のコードが詰まっているので、Automatizeのcssがレンダリングブロックをしている…ということも発生します。フロントエンドに詳しい人はあえてプラグインを使用しなくてもよいと思います。

プラグインを使用しない場合は、無効化してアンインストールしたほうがデータも軽くなります。

cssやJavaScriptファイルのレンダリングブロックを解決

方法は、こちらの記事に詳しく記載しています。

ファーストビューをインライン化する

CSSやJavaScriptのレンダリングブロックを解決したあと、ファーストビューになる部分のcssをインライン化しておきます。

<!-- wp:code -->
<pre class="wp-block-code"><code>add_action( 'wp_enqueue_scripts', function() {
    $handle = 'wp-block-library';
    $src = get_theme_file_path( 'css/style-inline.min.css' );
    $styles = file_get_contents( $src );
    if ( $styles ) {
        wp_add_inline_style( $handle, $styles );
    }
}, 11 );</code></pre>
<!-- /wp:code -->

‘wp-block-library’の後ろに、インラインで出力するよ!っていうコードです。
10がデフォルトなので11を選択しています。

$handleを指定しないと、うまくできませんでした。ハンドル名はどれでもよいです。
※wp-block-libraryはブロックエディタ(Gutenberg)のcssとなります。

参考文献
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/add_action
https://developer.wordpress.org/reference/functions/add_action/

画像を配置する部分の高さを設定する

メインビジュアルの表示が崩れる場合は、画像の高さをきっちりcssで設定しておきましょう。
画像がちらつきなどを防止します。

キャッシュの設定をする

キャッシュを設定することで、一度訪れたことのあるサイトはすぐにデータを呼ぶことができます。よってページの表示も早くなります。

キャッシュは.htaccessやプラグインで設定可能です。
効果については個人的にはどちらでも大差ないかと思いました。プラグインについても目立つ不具合は今のところありません。

↓(リニューアルなどした時)キャッシュ削除についての記事はこちらです。

.htaccessでキャッシュの設定をする

1week などの期間は変更可能です。

<IfModule mod_expires.c>
    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> 

参考文献
https://j-cloud-service.jp/tec/htaccess

プラグインでキャッシュの設定を行う

WP Fastest Cache ・・・設定が簡単。初心者に優しい。

W3 Total Cache ・・・設定が複雑のため初心者では難しい。細部にこだわって設定が可能。

レンタルサーバーを見直す

そもそも、WordPress自体のテータ量が、サーバーに合っていない場合もあります。
スピード表示に特化したサーバープランもあるので、これを機会に見直すのも手です。

ロリポップのハイスピードプラン

Xサーバー
https://www.xserver.ne.jp/

YouTubeを埋め込んでいる

ブロックエディタ(Gutenberg)がかなり使いやすくなったので、YouTubeもかなり簡単に埋め込みできるようになりましたが、サイトが遅くて悩んでいる人は、埋め込みは使用しないほうが良いです!

YouTubeを埋め込まず、画像にリンク付けをする

サイトに最も負担のないように動画そのものを埋め込むのではなく、画像にリンクをつけます。


①通常のやり方で、まずは埋め込みを行う。
(ブロックメニューの埋め込みグループのYouTubeを選択し、埋め込みたいurlをコピペする。

②①で埋め込んだYouTubeのタイトル画像をスクショします。スクショしたものをそのまま貼り付け。

③①で埋め込んだものは削除する。

④②で貼り付けた画像にYouTubeのurlのリンク付けを行う。

●範囲を指定してスクリーンショットのショートカットキー
Windows・・・windowsキー + shift + s

Mac・・・shift+command+4

●貼り付け

ctr + v

↓↓動画を埋め込んだみたいに見えますが、ただの画像です。
※リンクはまだつけてない状態です。

ローディングアニメを入れる

B男
B男

前よりも良くなったけど…
もっと早くならないかな…

上記のこともやったけどサイトのスピードが遅い場合は、そもそも記事数が多い場合や、画像の枚数が多い場合があります。

その場合は、ローディングアニメを入れて、ユーザーを退屈させないようにしましょう!

サイトにアクセスして、真っ白い画面からなかなかページの表示が行われない…こんな状況だとイライラしちゃいますよね。その状況をローディングアニメを入れることで真っ白い画面をカバーできます。

要は、ユーザー(視聴者)を退屈させずにサイトの離脱を防ぐことがポイントとなります!

ちゃいてぃ
ちゃいてぃ

一番大事なのは、そもそも記事の内容だけどね…

やることをやってまだスピードが遅いかな…という場合はローディングアニメを入れて、ユーザーが退屈しないよう工夫する!

タイトルとURLをコピーしました