> 【チート級】ChatGPTでブログ執筆を超効率化へ!10倍速で書く方法
PR

WordPress高速化|モバイル表示速度「98点」にした方法

WordPressを高速化!モバイル表示速度を劇的に改善させた方法を完全解説!

ページの表示速度が遅くって・・・
色々やってみたけどなかなか改善しません。

こんなお悩みを解決します!

サイトの表示速度については、Google検索順位のランキング指標に採用されており、とても重要性が高いものです。

また、速度が遅くなればなるほどユーザーの直帰率が高まり、大きな機会損失となってしまいます。

というわけで今回は、WordPressの表示スピードをほぼMAX(モバイル98・PC100)まで爆上げさせた僕が、実際にサイトの高速化につながった方法をすべてお話します!

ヒナキラ

では、前置きはこの辺にして、速度アップの旅へご案内~~~!

稼ぎたい方向けのブログサービスはWordPress一択。開設方法についてはWordPressブログの開設手順をやさしく解説の記事からご覧ください。

見たいところに飛べる目次

サイト(WordPress)の表示速度とは

サイトの表示速度とは、ユーザーがサイトにアクセスしたときに、サイトのページが表示される速度のことをいいます。

表示速度を示す指標は計測ツールにもよって変わりますが、スコアや時間で示されます。

ヒナキラ

当サイトは、PageSpeed Insightsで計測すると、モバイル98、PC100でした。

WordPressの表示速度が遅いことのデメリット

WordPressの表示速度が遅いと、下記のようなデメリットが生じてしまいます。

  • 直帰率が増加する
  • SEO的にマイナス

ひとつずつ見ていきましょう。

直帰率が増加する

Think with Google

上記の画像はGoogleのもので、表示スピードが遅くなればなるほど直帰率が上昇することを示しています。

つまり、下記です。

  • 表示速度が1秒→3秒になってしまった場合、直帰率は32%増えてしまう
  • 表示速度が1秒→5秒になってしまった場合、直帰率は90%増えてしまう
  • 表示速度が1秒→6秒になってしまった場合、直帰率は106%増えてしまう
  • 表示速度が1秒→10秒になってしまった場合、直帰率は123%増えてしまう

表示スピードが遅くなるほど、直帰してしまう確率が一気に高まってしまうんですね。

直帰率が高まるということは、他のページを見てくれない可能性が高くなるということ。

ヒナキラ

大きな機会損失になってしまいますね。

SEO的にマイナス

検索ユーザーはできるだけ早く質問に対する回答を見つけたいと考えています。
研究(英語)では、ユーザーはページの読み込み速度を非常に気にかけていることがわかっています。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。
そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

ウェブマスター向け公式ブログ

上記についてもGoogleのものになります。

Googleによると、読み込み速度がランキングに影響を与えると明言していますね。

ヒナキラ

つまり、読み込み速度が遅くなれば、SEOでマイナスになるということです。

WordPressの表示速度を計測する方法

PageSpeed Insights(ページスピードインサイツ)
PageSpeed Insights

では、自分のサイトの表示スピードを測ってみましょう。

スコアが100でなければ、改善の余地ありです。

WordPressの表示速度を計測する方法として最も手軽で有名なのは、Google公式の無料ツールPageSpeed Insightsです。

計測方法は簡単で、上記サイトにアクセスしたらサイトのURLを入力して「分析」をタップするだけ。

すると、下記のように計測結果が表示されます。

ページスピードインサイツ-モバイル計測

モバイルの計測結果

ページスピードインサイツ-PC計測

PCの計測結果

ちなみに、上記は当サイト(ぶろぐ学部)の計測結果です。

モバイルのサイトでは「98」、PCのサイトでは「100」という結果になっているのが分かりますね。(たまにモバイル「99」も出ます)

ヒナキラ

僕と比べて明らかに低い方は、改善の必要ありです。

WordPressを高速化するには

では、WordPressの表示速度を改善させるには、何に気を付けるべきなのでしょう。

Google神のお告げ(情報)によると、下記に気を付ける必要があります。

  • リンク先ページでリダイレクトを使用しない
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソース(HTML、CSS、JavaScript)を圧縮する
  • 画像を最適化する
  • CSS の配信を最適化する
  • スクロールせずに見える範囲のコンテンツのサイズを削減する
  • レンダリングを妨げる JavaScript を削除する

では、これらがどういったものなのかを見ておきましょう。(Google神のお告げを引用)

闇雲に対策をするよりも、どんなことに気を付ければいいのかを分かっていた方が効果的なのは間違いないですからね。

ただ、ぶっちゃけ専門用語ばかりで分かりにくいので、「そういうものなのか」という感じで見ておけばいいかなと。

ヒナキラ

そんなことはいいから、早く効果のあった対策を教えてくれ!
という方は、ここは飛ばしちゃってください。

リンク先ページでリダイレクトを使用しない

リダイレクトとは、記事などを新しいURLに変更した際、自動的に転送をする仕組みのこと。

リダイレクトは HTTPリクエストとレスポンスのサイクルを増加させ、ページの表示が遅くなる原因となります。

最善の場合は、リダイレクトごとに追加されるラウンド トリップ(HTTP リクエストとレスポンス)は 1 回ですが、最悪の場合には、HTTPリクエストとレスポンスのサイクルの追加に加えて、DNS ルックアップ、TCP ハンドシェイク、TLSネゴシエーションを実行するために複数回のラウンドトリップが追加されることがあります。

そのため、サイトのパフォーマンスを改善するにはリダイレクトの使用を最小限に抑える必要があります。

Google Developers
HTTPリクエストとHTTPレスポンス
ヒナキラ

HTTPリクエストとレスポンスのやり取りが増えれば、ページの表示が遅くなるのは当然ですよね。

圧縮を有効にする

最新のブラウザはすべて gzip 圧縮に対応しており、すべてのHTTPリクエストで自動的に圧縮のネゴシエーションを実施します。

gzip 圧縮を有効にすると、転送されるレスポンスのサイズが最大で90%削減されるため、リソースのダウンロード時間の大幅な短縮、クライアントのデータ使用量の削減、最初のページレンダリング時間の改善といった効果があります。

詳しくは、GZIP によるテキストの圧縮をご覧ください。

Google Developers

gzip圧縮とはデータ圧縮方式のひとつ。
テキストファイルの圧縮に強力で、9 割近くサイズを減らすことが可能。

gzip圧縮が有効になっているかを調べるには、gzip圧縮チェッカーを使えば簡単。

WebサイトをホストしているWebサーバーでgzip圧縮が有効になっているかを確認出来ます。

gzip圧縮が有効になっていれば、上記のような表示になります。

サーバーの応答時間を改善する

サーバーの応答時間は、ページのレンダリングを開始するために必要な HTML をサーバーから読み込むのにかかる時間を測定したもので、Googleとサーバーの間のネットワーク遅延が差し引かれます。

測定を実行するたびに差異がありますが、違いはそれほど大きくはなりません。

サーバーの応答時間が大きく変動する場合は、根底にパフォーマンスの問題がある可能性があります。

Google Developers

ブラウザのキャッシュを活用する

ネットワークを介したリソースの取得は速度が遅く、コストもかかります。

ダウンロードにはクライアントとサーバーの間で複数回のラウンドトリップが必要となることがあり、処理が遅延しページコンテンツの表示が妨げられます。

また、訪問者のデータ費用も増大します。

クライアントが以前に取得したレスポンスを再利用してよいかどうかやその有効期限を判断できるよう、すべてのサーバー レスポンスにキャッシュ ポリシーを指定することをおすすめします。

Google Developers

リソース(HTML、CSS、JavaScript)を圧縮する

圧縮(軽量化)とは、ブラウザによるリソースの処理に影響を与えることなく、不要なデータや重複データ(コードのコメントや書式など)の削除、使用されていないコードの削除、短い変数名や関数名の使用といった処理を行うことを指します。

詳しくは、前処理とコンテキスト固有の最適化をご覧ください。

Google Developers

画像を最適化する

画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。

そのため、画像を最適化するとデータ量が大幅に減ってパフォーマンスが改善することが少なくありません。

ブラウザがダウンロードしなければならないデータ量が減るほど、クライアントの帯域幅の競合が少なくなり、ブラウザでコンテンツをダウンロードして画面に表示するまでの所要時間を短縮できます。

Google Developers

CSS の配信を最適化する

ブラウザでは、コンテンツを表示する前に、現在のページのスタイルとレイアウトの情報をすべて処理する必要があります。

このため、ブラウザは外部スタイルシートがダウンロードされて処理されるまでレンダリングをブロックします。

ダウンロードには複数のラウンド トリップが必要となることがあり、最初のレンダリング時間が遅くなります。

クリティカル レンダリング パスについて詳しくは、レンダリング ツリーの構築、レイアウト、ペイントをご覧ください。

レンダリングがブロックされないようにし、CSS の配信を改善する方法については、レンダリング ブロック CSS をご覧ください。

Google Developers

スクロールせずに見える範囲のコンテンツのサイズを削減する

リクエストされたデータの量が初期の輻輳ウィンドウ(通常は圧縮状態で 14.6 KB)を超える場合、サーバーとユーザーのブラウザとの間で追加のラウンド トリップが必要になります。

モバイル ネットワークのような遅延の多いネットワークの場合、これによってページ読み込みが大幅に遅延する可能性があります。

Google Developers

レンダリングを妨げる JavaScript を削除する

ブラウザでは、ページを表示する前に HTML マークアップを解析して DOM ツリーを構築する必要があります。

この処理の途中でスクリプトが出現するたびに、パーサーは HTML の解析を停止してスクリプトを実行してから、解析を続行する必要があります。

外部スクリプトの場合はリソースがダウンロードされるのを待つ必要もありますが、その際リソースのダウンロードによってネットワーク ラウンド トリップが発生し、ページが最初に表示されるまでの時間が長くなる可能性があります。

JavaScript がクリティカル レンダリング パスにどのように影響するかについては、JavaScript を使用してインタラクティブにするをご覧ください。

Google Developers

WordPressの高速化に必要な11のこと

実際に高速化に成功した僕が考える、「WordPressの高速化」に必要なことは下記です。

  1. 高速なサーバーを使う
  2. 高速化機能のあるWordPressテーマを使う
  3. 画像は基本すべて圧縮(TinyPNGなど)
  4. 画像フォーマットの最適化(PNG・JPG)
  5. 大きな画像、動画、ウィジェット、埋め込み等に注意
  6. リビジョンデータを制限する
  7. 重要でないJavaScriptの実行を遅らせる
  8. CSSの配信を最適化する
  9. 無駄にアドセンスを使わない(アドセンス不要な方限定)
  10. キャッシュ機能を活用する
  11. プラグインの質と量に注意する

と、こんなところですね。

ぶっちゃけ専門家でもないので、さらに改善できる部分は多々あると思いますが、実際に高速化しているので参考にはなるかなと。

では、軽くですが一つずつ解説していきますね。

【高速化①】高速なサーバー(プラン)を使う

やはり、高速なサーバーにすることは重要ではないかと考えます。

ヒナキラ

どんなに対策をしても、そもそもの読み込みスピードが遅ければ意味がありませんからね。

これは、すでにワードプレスを使っている方の場合だとサーバー移行は簡単にとはいきませんが、これからワードプレスを始める方は覚えておいた方がいいです。

それと、僕の場合はロリポップ!を使っているのですが、サーバー内のプランにも注意です。

安いプランでは、やはり速度も制限されてしまいますので…。

ロリポップ!の場合、超高速な「ハイスピードプラン」一択です。

「ハイスピードプラン」なら、エックスサーバー(X10)よりも高速で半額程度(月550円~)。

ロリポップとエックスサーバー

これからワードプレスを始める方や、新たなサーバー契約を検討している方には、ロリポップがコスパ最強なのでマジでおすすめ。

\ 充実の毎日を手に入れよう! /

※月20万円稼げました。行動したもの勝ち!

【高速化②】高速化機能のあるWordPressテーマを使う

テーマ別のスピード比較表
SWELLの表示速度はメチャクチャ早い。ダントツのスピードでした!

では、速度改善のための2つめは「高速なWordPressテーマを使う」ですね。

ぶっちゃけ、専門知識があればテーマに依存しなくても自分で対応できるんでしょうけど、ほとんどの人にとっては困難ですからね。

ちなみに、僕が使用しているテーマはSWELLですが、上記のとおり有料テーマの中でも最速レベルのテーマです。

\ オシャレを実現!初心者でもデザイン性抜群のサイトにできる /

※いま一番オススメのWordPressテーマ

WordPressテーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • とってもオシャレなサイトを作れる
  • 構造化機能も充実!SEO対策をしやすい
  • SEOにかかわるページスピードも速い
  • 時短になって記事執筆を効率化できる
  • 効率化できるから収益力が高まる
  • ブログ運営が楽しくなる
  • 楽しくなるからモチベ維持ができる
  • 複数サイトにも使い放題コスパ最強
  • アプデが頻繁でパワーアップがとまらない
デメリット
  • 高めの価格設定
  • 開発者に何かあると困る
  • 初心者がSWELLにたどり着きにくい

SWELLに標準装備されている機能として、キャッシュ機能、遅延読み込み機能(lazysizes.jsなど)、ページ遷移高速化機能(Prefetch)、CSSインライン読み込み機能、などがあります。

【高速化③】画像は基本すべて圧縮(TinyPNGなど)

画像については、基本的にすべて圧縮しましょう。

自動で圧縮してくれるプラグインもありますが、それほど効果的ではないとのことなので、地道だけどTinyPNGなどで圧縮するのがいいかなと。

記事に画像を貼り付けるまでの基本の流れとしては、下記ですね。

  1. 画像のダウンロード
  2. TinyPNGで画像圧縮
  3. WordPressに画像をアップロード
  4. 記事に貼り付け

【高速化④】画像フォーマットの最適化

画像のファイル形式にも注意しましょう。

16色以内の画像(図など)はPNGファイルに、写真などはJPEG(JPG)ファイルにします。

ヒナキラ

写真を使うことが多いので画像のファイル形式はJPGを使う場合が多いです。

【高速化⑤】大きな画像、動画、ウィジェット、埋め込み等に注意

当然ですが、大きな画像や動画はファイルサイズも大きくなるので、注意しましょう。

また、意外と見落としがちなものに「ウィジェット」や「埋め込み」があります。

必要以上のウィジェットや、SNSの埋め込みなども速度を落とす要因となりますので、気を付けたいですね。

ヒナキラ

特にSNSなどの埋め込みは影響が大きいので注意ですよ~。

【高速化⑥】リビジョンデータを制限する

何もしないと勝手にたまっていくリビジョンデータ。

ほっとくと、100以上になることも多々あります・・・。

ヒナキラ

勝手に増殖するリビジョンデータ。
ああ、おそろしや~。

これもかなり速度に影響するので、リビジョンを1クリックで削除する方法を参考にして削除しましょう。

【高速化⑦】重要でないJavaScriptの実行を遅らせる

これも、かなり大きな効果があります。

ヒナキラ

僕の場合はこれでモバイル83→98、PC97→100にまで改善しました!

対策として、Flying Scripts by WP Speed Mattersというプラグインを使って重要でないJavaScriptの実行を遅らせることで、大幅な速度改善が見込めます。

使い方、注意点は後述しますね。

【高速化⑧】CSS配信を最適化する

CSSは、サイトに表示されるスタイルやレイアウトなどのデザインを施すための言語です。

コンテンツを表示する前にCSSの情報をすべて処理する必要があるため、処理されるまでレンダリングをブロックします。

まあ、要は遅くなるということです。

CSSの最適化をプラグインで対策するには、Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】を参考にして行いましょう。

SWELLをお使いの方は、同様の機能がテーマに標準装備されているので、このプラグインは必要ないですよ~。

【高速化⑨】無駄にアドセンスを使わない

自動広告を設置するのは、速度を低下させます。かなり。

もし、アドセンスでの収益が大して見込めないのであれば・・・

設置しなくてもいいんじゃないかな?と思います。

ヒナキラ

ユーザビリティの低下・表示速度の低下と、アドセンスの収益とを天秤にかけて判断しましょう。

「いや、そうはいってもアドセンスは設置したい!でも、どうしても速度の改善もしたい!」

という方は、AdSense入れてるなら対応必須!遅延読込で表示速度爆速化しよう!を参考に、アドセンスを遅延読み込みさせる。

または、WordPressが重い原因はAdSense広告?改善策3つを紹介を参考に「自動広告ではなくユニット広告」にしたり、「広告の数を減らす」などを試してみましょう。

【高速化⑩】キャッシュ機能を活用する

キャッシュ機能を使えば、記事を開く度にHTMLファイルを動的に読み込まずに済みます。

ヒナキラ

つまり、キャッシュ機能を使えば読み込みが速くなるんですね。

テーマなどにキャッシュ機能がない場合は、WP Super Cache のおすすめの設定方法を参考にして、キャッシュプラグインWP Super Cacheの導入を検討しましょう。

SWELLにはキャッシュ機能がありますので不要です。設定方法は後述します。

【高速化⑪】プラグインの質と量に注意する

これ、一番重要かもしれないです。

基本、プラグインを追加すればするほど速度が遅くなるので。

ヒナキラ

つまり、プラグインは必要以上に入れないこと!!
これ鉄則です。

それと、質の問題もあります。

基本的に高機能なものは重い場合が多いので、機能を大して使えていないのに「とりあえず高機能なものを入れておく」というのは疑問ですね。

量・質ともに必要最小限に抑えるのがベストかな、と思います。

僕が使っているプラグイン一覧

では、ここからは実際に僕が使っているプラグインを紹介します。

当サイトと同じSWELLを使っている方は、マネするだけでも速度改善する可能性大ですね。

実際に使っているプラグインは下記です。

  • SEO SIMPLE PACK
  • Useful Blocks
  • BackWPup
  • Pochipp
  • Akismet Anti-Spam (アンチスパム)
  • Broken Link Checker
  • Contact Form 7
  • Google XML Sitemaps
  • PS Auto Sitemap
  • Simple 301 Redirects
  • WP Revisions Control
  • EWWW Image Optimizer
  • Flying Scripts by WP Speed Matters

では、一つずつ見ていきましょう。

ただし、他のプラグインやサイト構成との相性もあるので、一概にこれで改善するとは言いきれません。
また、バックアップを取るなどリスク対策を行うことを推奨します。

SEO SIMPLE PACK

SEO SIMPLE PACKは、シンプルで軽いSEO対策プラグインです。

他のSEO対策プラグインでは、「Yoast SEO」や「All in One SEO」が有名ですね。

どっちも使ったことはありますが、使わない機能もたくさんあったし、無駄な機能は速度を遅くさせるだけなので、変更しました。

ヒナキラ

SWELLの開発者が作成したプラグインなので、SWELLとの相性は抜群ですよ~。

Useful Blocks(ブロックエディター専用)

Useful Blocksは、SWELLの開発者が「ぽんひろ」さんと共同開発したプラグイン。

かわいくて、おしゃれなブロックを作成できるプラグインです。

BackWPup

BackWPupは、ワードプレスの大事なデータをバックアップしておけるプラグイン。

しかも、自動でバックアップしてくれて、時間も指定できます。(時間指定できるので、混み合う時間帯を回避可能)

ヒナキラ

バックアップのプラグインは、必須ですね。

Pochipp・Pochipp-Assist

Pochippは、Amazon・楽天市場・Yahooショッピングなどのアフィリエイトリンク作成のためのプラグインです。

しかも、Pochipp-AssistならAmazonのPA-APIがなくても商品検索が可能になるので、Amazonアソシエイトの審査に通っていなくても使える便利なプラグインです。

ヒナキラ

ちなみに、僕はAmazonアソシエイトに通ってません。(審査してません)

\Pochippの例です/

Akismet Anti-Spam (アンチスパム)

Akismet Anti-Spam (アンチスパム)は、WordPressのインストール時から入っているプラグインで、スパムコメントを自動的に排除してくれるもの。

あまりアクセスのない僕のサイトですら、ひと月に500件ほどブロックしてくれています。

ヒナキラ

スパム、自分で対応したら気が遠くなりそう。これは必須ですね。

Broken Link Checkerは、リンクが切れているものを自動で検出して、メールなどで教えてくれるプラグインです。

リンク先がエラーになっていたりとか、自分のリンクの貼り方がおかしかったりでリンク切れすることがあるので、僕には必要なプラグインですね。

ヒナキラ

SEOにマイナスになるから、リンク切れには気を付けたいですね。

Contact Form 7

Contact Form 7は、お問い合わせフォーム作成のためのプラグインです。

お問い合わせフォーム設置は必須です。

Google XML Sitemaps

Google XML Sitemapsは、コンテンツをしっかり検索エンジンに認識してもらうために必要なプラグインです。

他のプラグインにXMLサイトマップ作成機能がない場合は、必須ですね。

PS Auto Sitemap

PS Auto SitemapはHTMLサイトマップを自動生成してくれるプラグインです。

HTMLサイトマップがあることで、ユーザーはすべての記事を簡単に探すことができて、ユーザビリティ向上になります。

先ほどのXMLサイトマップがGoogleのためのサイトマップであるのに対して、HTMLサイトマップはユーザーのためのサイトマップですね。

ヒナキラ

サイトマップ、ユーザビリティ向上のためにも必要ですね。

Simple 301 Redirects

Simple 301 Redirectsは301リダイレクトを簡単に設定できるプラグインです。

301リダイレクトとは、URLが変更される場合に利用する転送処理コードになります。

たとえば、パーマリンクを変更したり、スラッグを変更したりした場合には、当然ですが旧URLからは接続不能になります。

旧URLについていた評価がなくなったり、旧URLからのアクセスがなくなるなど、リダイレクトを行わないと機会損失になることが多くあるので、注意したいところですね。

ヒナキラ

リダイレクトで、前のURLの評価を引き継げるから、忘れずにねっ!

WP Revisions Control

WP Revisions Controlは、忌々しいリビジョンデータの増殖を自動的に抑えてくれるプラグインです。

リビジョンデータがたまると表示速度も遅くなるので、自動で削除してくれる機能はありがたいですね。

ヒナキラ

定期的に手動でリビジョンデータを削除できるマメな方は必要ないですけどね。

EWWW Image Optimizer

EWWW Image Optimizerは、画像をアップしたときに自動でサイズを圧縮してくれるプラグインです。

さらに、画像を次世代フォーマットであるWebP形式に変換する機能もあります。

WebPは、米Googleが開発しているオープンな静止画像フォーマット。ファイルの拡張子は「webp」。

2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIFPNGの置き換えを意図する規格である。

Wikipedia

つまり、従来の画像フォーマットよりもファイルサイズを削減できるということです。

Flying Scripts by WP Speed Matters

Flying Scripts by WP Speed Mattersは、重要でないJavaScriptの実行を遅らせて、サイトの表示速度を改善することができるプラグインです。

僕の場合、このプラグインでも大きな改善が見られました。

使い方や、注意点について、軽く解説しておきます。

Flying Scripts by WP Speed Mattersの使い方

  1. Flying Scripts by WP Speed Mattersをインストールする
  2. PageSpeed Insightsで速度計測
  3. PageSpeed Insightsで提示された改善事項のうち、JavaScriptの実行によって速度遅延を起こさせているJSファイルを確認・特定する
  4. 遅延させているJSファイルをコピーして、Flying Scripts by WP Speed Mattersに貼り付ける
  5. 「変更内容を保存」をタップして、完了

①まずは、Flying Scripts by WP Speed Mattersをインストールしましょう。

②次に、PageSpeed Insightsで速度計測をします。

PageSpeed Insightsで速度計測したあとに提示される改善事項のうち、JavaScriptの実行によって速度遅延を起こさせているJSファイルを確認・特定する。(下記画像参照)

Flying Scripts by WP Speed Mattersと
PageSpeed Insights

④遅延させているJSファイルをコピー(上記画面の赤枠部分)して、Flying Scripts by WP Speed Mattersに貼り付ける。(貼り付け位置は下記参照)

⑤「変更内容を保存」をタップして、完了。

これだけです。簡単ですね。

Flying Scripts by WP Speed Mattersの注意点

注意点としては、JSファイルのすべてをやると不具合が起きる可能性があります。

僕の場合では「main.js」「plugins.js」を設定したときに、ページの一部が表示されなくなってしましました。

なので、一つずつ不具合が出ないか確かめながらやると良いと思いますね。

一気に全部をやると、どれが不具合を起こしているのか特定するのが困難になってしまうので・・・。

WordPressテーマSWELLを高速化する方法

最後に、当サイトと同じSWELLを使っている方向けに、SWELL独自の設定方法についても解説します。

\ オシャレを実現!初心者でもデザイン性抜群のサイトにできる /

※いま一番オススメのWordPressテーマ

やることは、大きく分けて下記の2つです。

  • SWELLの高速化機能を使う
  • フォントを設定する

では、順に見ていきましょう。

SWELLの高速化機能を使う

まずひとつ目、SWELL高速化機能の設定をしていきます。

STEP
WordPress管理画面から「SWELL設定」をタップ
SWELLサイト高速化-SWELL設定
STEP
「高速化」をタップする
SWELLサイト高速化-高速化タブをクリック
STEP
キャッシュ機能設定
SWELLサイト高速化-キャッシュ機能

上記のように、すべてにチェックを入れます。

プラグインの機能と重複するものがあれば外しましょう。

STEP
遅延読み込み機能設定
SWELLサイト高速化-遅延読み込み機能

上記のとおりに設定しましょう。

STEP
ファイルの読み込み設定
SWELLサイト高速化-ファイル読み込み機能

上記のとおり、チェックを入れておきましょう。

STEP
ページ遷移高速化設定
SWELLサイト高速化-ページ遷移高速化機能

上記のとおり、「Prefetch(プリフェッチ)」にチェックを入れましょう。

プリフェッチ (prefetch) とは、コンピュータにおいて、利用が予測されるデータをあらかじめより高速なメモリに読み込んでおき、性能と速度の向上を図る動作である。日本語では事前読込み(じぜんよみこみ)という。

Wikipedia

Prefetchに対応していないIEやSafariuでは動作しないので高速化しないブラウザには制限がありますが、Pjaxとは違ってプラグインなどで追加するスクリプトに制限がかかりません。

SWELL公式サイト
STEP
「変更を保存」をタップして設定完了

変更を保存したら完了です。

あとは、これまでの設定で表示が消えていたり不具合が起きていないか確認して、問題がなければバッチリです。

フォントの設定

次にフォントの設定です。

実はかなり速度に影響があるので、高速化したいなら下記のとおりにしましょう。

STEP
WordPress管理画面から「外観」→「カスタマイズ」をタップ
SWELL高速化-外観からカスタマイズ
STEP
サイト全体設定をタップ
SWELL高速化-サイト全体設定
STEP
基本デザインをタップ
WordPress高速化-基本デザイン
STEP
ベースとなるフォントを「遊ゴシック」にする
WordPress高速化-遊ゴシック
STEP
「公開」をタップして設定完了

以上、ここまででSWELLの高速化対策は完了です。

この記事でスピードアップした方々の嬉しい口コミ

まとめ|WordPressを高速化|モバイル表示速度も爆速に!

\当サイトの表示速度/

ぶろぐ学部サイトのページスピード

いかがでしたでしょうか。

今回は、WordPressを高速化!表示速度の改善方法を完全解説!ということで、僕が実際に上記の表示速度をたたき出すまでにしたことを全てお話したつもりです。

そして、僕と同じSWELLのサイトなら、これで間違いなく速くなるはず!

また、SWELL以外の方であっても、今回ご紹介した内容を参考にしていただければ多少、もしくはかなりの速度改善につながると思います。

もし、ここで設定もやってみたよ!という方、いますぐ下記より速度計測しちゃいましょう!

改善しましたか?

もし、速度が改善したよ!この記事が役に立ったよ!という方は、他の方にもシェアしていただけると泣いて喜びます!

ではでは、またね~。

\ 充実の毎日を手に入れよう! /

※月20万円稼げました。行動したもの勝ち!

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

コメント

コメント一覧 (2件)

  • こちらの記事、とても参考になりました!
    いまSWELLなんですが、モバイルが70くらいなので、いろいろ試してみます。
    ひとつ質問なのですが、セキュリティ系のプラグインは何を使っているのか教えていただけませんか?
    よろしくお願いいたします。

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

見たいところに飛べる目次