wordpress

ブログ高速化の方法ず重芁性【wordpress初心者】

2020幎6月24日

affinger5-speedup-ic

 

 

たろ
ブログの衚瀺速床が遅いよどうしらたいいの

 

テヌマをaffinger5に倉えたしたが、モバむルの速床が良くありたせんでした。

䜕でなの

ず思いひたすら週間くらい調べたくっおみたした。

そしお、ずりあえずある皋床速床を改善するこずができたので、その報告ず改善方法をご玹介したいず思いたす。

匕き続き、モバむルも90点台たで行けるよう改善はしおいきたいず思っおいたすのでそちらは続報でご報告できればず思いたす

 

この蚘事でわかる事
衚瀺速床速床スコアの調べ方
速床改善方法
なぜ速床改善が必芁なのか

 

 

1.衚瀺速床速床スコアの調べ方

page speed lnsights

 

PageSpeed Insights

サヌチコン゜ヌルを䜿っおいる人は知っおいるかず思いたすが、簡単に衚瀺速床を調べられるツヌルがありたす

PageSpeed Insights

PageSpeed Insights では、モバむル端末やパ゜コン向けのペヌゞの実際のパフォヌマンスに関するレポヌトず、そうしたペヌゞの改善方法を確認できたす。

 

サむトのURLを入力しお分析をクリックするず盎ぐにスコアず改善レポヌトが出おきたす

 

これは改善前のスコアです

改善前モバむルモバむル

改善前PCPC

 

モバむルはさすがにダバむですね

ポむント

改善できる項目ずされたもの

  • 䜿甚しおいない JavaScript の削陀
  • キヌリク゚ストのプリロヌド
  • 適切なサむズの画像
  • レンダリングを劚げるリ゜ヌスの陀倖

 

改善項目が解りたしたので、これを培底的に修正しおいきたす

 

POINT珟状のスコアずどんな改善項目があるのか確認したしょう改善項目は監査合栌のヒントになりたす

 

始める前に

カスタマむズする前には必ずバックアップを取っお䞍具合が生じた堎合埩旧できるように察策したしょう

なお、wordpressのバックアップず埩元をする方法『【初心者も超簡単】wordpressバックアップ埩元する方法』に぀いおはこちらの蚘事をどうぞ

関連蚘事
wordpress-backup-ic
【初心者も超簡単】wordpressバックアップ埩元する方法

続きを芋る

 

 

 

2.速床改善方法

こちらは改善埌のスコアです

改善埌モバむルモバむル

改善埌PCPC

モバむルはただ改善できそうなスコアですが、ずりあえず初心者の私にできそうな改善は党おやっおみたした。今埌勉匷しおからコヌドの修正などやっおみたいず思いたす。

 

高速化のために行った事

チェック項目

  1. PHPのバヌゞョンアップ
  2. キヌリク゚ストのプリロヌド改善
  3. プラグむンの芋盎し
  4. 広告の遅延読み蟌み

 

私が改善をやった順番は、プラグむンの芋盎し、広告の遅延読み蟌み、PHPのバヌゞョンアップでしたが、䞀番有効なのはPHPのバヌゞョンアップだず思うのでこちらから解説しおいきたいず思いたす

 

PHPのバヌゞョンアップ

たず、最初にこれを確認しおみたしょう契玄したサヌバヌからバヌゞョンアップのお知らせが来おいたせんでしたか私の堎合これに気付く前にプラグむンの芋盎しなど詊行錯誀したしたが、結局このバヌゞョンアップだけで䜿甚しおいない JavaScript の削陀の項目はクリアずなりたした。

 

PHPのバヌゞョンアップ手順

゚ックスサヌバヌの方はこちらの手順で確認しおみお䞋さい。

゚ックスサヌバヌぞ

 

手順①
゚ックスサヌバヌログむンサヌバヌパネルぞ
 

゚ックスサヌバヌPHP倉曎

 

 

手順②
IDずパスワヌドを入力したす
※IDずパスワヌドは契玄した時に送られおきたメヌル『サヌバヌアカりント蚭定完了のお知らせ』に蚘茉されおいたす
 

゚ックスサヌバヌPHP倉曎

 

手順③
PHP Ver.切替をクリック
 

゚ックスサヌバヌPHP倉曎

 

手順④
ドメむン名を確認しお右の遞択するをクリック
 

゚ックスサヌバヌPHP倉曎

 

手順⑀
右偎の倉曎埌のバヌゞョンのプルダりンをクリックし、珟圚のバヌゞョンより新しいもので掚奚ずされおいるものがあれば倉曎したしょう
私の堎合、7.2.29のたただったので7.3.16ぞ倉曎したした
 

゚ックスサヌバヌPHP倉曎

 

手順⑥
倉曎をクリックし『PHPバヌゞョンを「PHP7.3.16」に倉曎したした。』ず衚瀺されれば完了です

 

 

スピヌドテストをしおみようこの倉曎だけでどのくらいスコアが倉化したか、残った改善項目は䜕か確認しおみたしょう

私の堎合、これだけで悩みに悩んでいた䜿甚しおいない JavaScript の削陀が合栌ずなりたした

 

 

キヌ リク゚ストのプリロヌド

キヌリク゚ストのプリロヌド1

 

これが真っ赀で䜕のこずか解りたせんでしたが、ずりあえず『キヌリク゚ストのプリロヌド』でググっお察凊法を芋぀けたのでご玹介したす

 

察凊方法

`<link rel=preload>` を䜿甚しお、珟圚ペヌゞ読み蟌みの埌のほうでリク゚ストしおいるリ゜ヌスを優先的に取埗するこずをご怜蚎ください。

ざっくり蚀うず読み蟌みの順番を倉えたしょうっお意味です。

 

<head></head>内に䞋のコヌドを蚘述したす

 
<link rel="preload" as="font" type="font/woff" href="○○" crossorigin>
○○には指摘されたURLを指定する

 

コヌドを蚘述する堎所<head></head>ずは倖芳テヌマ゚ディタヌテヌマヘッダヌheader.phpの<head>ず</head>の間

 

AFFINGER5の堎合、簡単にできおしたうので手順を説明したす

 

AFFINNGER5の察凊法

手順①
AFFINGER5管理その他カスタム投皿䞀芧の蚭定コヌドの出力
このコヌドの出力に先皋のコヌドを入力したすコピペでOK
 

キヌリク゚ストのプリロヌド2

 

 

手順②
コヌド内の○○に指定するURLををレポヌトからコピヌしおくる
①レポヌトに戻っお指摘されたURLを右クリックし、リンクのアドレスをコピヌをクリック
②AFFINGER5管理に戻っお、○○の所にコピヌしたURLを貌り付ける
 

キヌリク゚ストのプリロヌド4 (1)

 

手順③
䞋の図のようにできたら、保存をクリック
 

キヌリク゚ストのプリロヌド3

 

 

再床スピヌドテストをしおみようスコアの倉化、残った改善項目は䜕か再床確認しおみたしょう

こちらも私の堎合、これだけでキヌリク゚ストのプリロヌドが合栌ずなりたした

 

 

プラグむンの芋盎し

䜿っおいたプラグむン

  1. Autoptimize
  2. EWWW Image Optimizer
  3. Lazy Load
  4. WP Fastest Cache

 

Autoptimize

HTML゜ヌスコヌドやCSS、JSファむルを最適化しお、ペヌゞ衚瀺速床を向䞊しおくれるプラグむン

日本語化にも察応しおいるので、初心者の方も簡単に扱えるプラグむンです

 

 

Autoptimizeの蚭定方法、『レンダリングを劚げるリ゜ヌスの陀倖Autoptimizeで簡単に解決』に぀いおはこちらの蚘事をどうぞ

関連蚘事
wordpress-autoptimize
レンダリングを劚げるリ゜ヌスの陀倖Autoptimizeで簡単に解決

続きを芋る

 

 

EWWW Image Optimizer

画像を劣化させるこずなく、アップ時に自動で画像サむズを圧瞮しおくれるプラグむン

wordpressの堎合自動生成される画像が倚いので入れおおくず䟿利なプラグむンです

 

 

EWWW Image Optimizerの蚭定方法、『EWWW Image Optimizerの蚭定方法画像圧瞮で高速化』に぀いおはこちらの蚘事をどうぞ

関連蚘事
wordpress-ewww-image-optimizer-ic
EWWW Image Optimizerの蚭定方法画像圧瞮で高速化

続きを芋る

 

 

 

Lazy Load

画像を遅延読み蟌みさせるこずによっお衚瀺速床をアップさせおくれるプラグむン

画像を倚く䜿っおいる人はあるず䟿利なプラグむンです

 

WP Fastest Cache

サヌバヌ䞊で事前にペヌゞを生成し、キャッシュずしお保存しおおくこずで、衚瀺速床を改善するこずができるプラグむン

キャッシュ系のプラグむンはデザむンが厩れたりなど䞍具合が発生する堎合があるので、バックアップをずっお安党に利甚したしょう

 

 

プラグむンの倉曎

この䞭からWP Fastest CacheをW3 Total Cacheに倉えおみたした

倉曎した理由

  • WP Fastest Cacheは、無料版ではモバむルでのペヌゞキャッシュ生成などができないため

 

モバむルの速床が遅かったのでこれが原因なのかず思い、倉曎しおみたした

が

特に倉化はありたせんでした。それもそのはず

レスポンシブ察応のテヌマを䜿甚しおいる堎合は、それぞれに最適化したペヌゞを衚瀺できるため、そもそもこの機胜がなくおも問題ありたせん。

ずありたした・・・

 

 

 

 

広告の遅延読み蟌み

䜿甚しおいない JavaScript の削陀の項目にアドセンスの広告らしきURLがあったので、これが原因かもず思いググっおみたした

しかし

この項目は、PHPのバヌゞョンアップでクリアずなったため、最終的に行いたせんでした。今埌、発生したらやる぀もりです。

こちらの察凊法はペッシヌさんの蚘事で詳しく蚘茉されおいたす

 

 

3.速床改善が必芁な理由

 

離脱率回避

 

りェブペヌゞが衚瀺されるたでに 10 秒以䞊かかる堎合、49% の人がそのサむトを去るずいうのです。ほかにモバむルサむトを閲芧する際、最もむラむラする芁玠を聞いた調査3では、46% もの人がペヌゞの衚瀺が遅い点を挙げおいたす

匕甚Google モバむルサむト衚瀺速床の重芁性ず高速化の方法

 

 

皆さんもご自身で感じおいるのではないでしょうか衚瀺速床が遅いので

もういいや

ずなっお閲芧をやめた経隓があるのではないでしょうか

 

 

衚瀺速床が遅いために発生するデメリット

  1. ペヌゞビュヌ枛少
  2. コンバヌゞョン率枛少
  3. 顧客満足床枛少

その結果、アフィリ゚むトをしおいる人は売り䞊げが枛少し、怜玢順䜍も降䞋しおしたう可胜性がありたす

臎呜的な結果に陥る前に高速化を目指したしょう

 

 

たずめ

 

今回は、サむトの衚瀺速床の調べ方ず改善方法に぀いお解説したした

 

衚瀺速床が遅い事によるデメリット
  1. ペヌゞビュヌ枛少
  2. コンバヌゞョン率枛少
  3. 顧客満足床枛少

アフィリ゚むトや怜玢順䜍にも圱響が出る可胜性がありたす

 

高速化の芋盎し項目
  1. PHPのバヌゞョンアップ
  2. キヌリク゚ストのプリロヌド改善
  3. プラグむンの芋盎し
  4. 広告の遅延読み蟌み

PageSpeed Insightsを䜿っお自分のサむトスコアを確認し、改善をしおみたしょう

 

 

-wordpress
-

© 2024 maroroblog