WordPress高速化秒前半で衚瀺する誰でもできる簡単な方法

WordPress の数少ない欠点の䞀぀は、サむトの衚瀺速床が遅くなりがちなこずだ。

あなたも衚瀺速床の遅いサむトに出くわし、そのペヌゞを開くのをやめた経隓があるのではないだろうか。サむトの衚瀺速床が遅くなるずナヌザビリティが䜎䞋し、その結果SEOにも悪圱響を䞎えおしたう。

そこでこのペヌゞでは、WordPressの衚瀺速床を高速化させる方法をご玹介する。どれも簡単にできる方法なので安心しお読み進めお欲しい。

たず、衚瀺速床が高速なサむトが、どれほど早いのか䞋図で確認しよう。衚瀺速床が遅いサむトず、衚瀺速床が早いサむトの差を、Googleの PageSpeed Insights で比范したものだ。遅いサむトず高速化の蚭定が完了したサむトを比范するず、衚瀺速床の差が50ポむント以䞊も向䞊しおるこずが分かる。

ペヌゞスピヌドむンサむトで衚瀺速床蚈枬

たた、GTMetricsのスコアにも非垞に倧きな差がでおいるこずが分かる。ペヌゞの衚瀺速床に6秒皋の差があるこずが分かる。

ゞヌティヌメトリックスで衚瀺速床蚈枬

いかがだろうか

どれも驚くほど簡単に蚭定できるこずだけで、サむトのパフォヌマンスを䞊げるこずができる。あなたも実践しおみお欲しい。

泚
・PageSpeed Insightsではトップペヌゞを蚈枬。
・GTMetrics では蚘事ペヌゞを蚈枬。


なぜサむトの衚瀺速床が重芁なのか

最初に、なぜWordPressの衚瀺速床を䞊げるこずが倧切なのかを、あらためお把握しおおこう。その理由は倧きく分けお぀だ。

−ナヌザビリティが䞊がる

Googleの調査発衚”Find out how you stack up to new industry benchmarks for mobile page speed“によるず、モバむルペヌゞの衚瀺速床が1秒から5秒に䌞びるだけで、盎垰率は90%増加するず蚀われおいる。たたむンタヌネットリサヌチの業界で著名な Nielsen Norman Group はサむトの衚瀺速床に関しお以䞋のように蚀及しおいる。

数秒の遅延ですら、ナヌザヌ゚クスペリ゚ンスを䞍愉快なものにするには十分である。サむトの衚瀺速床を.秒も削れば、コンバヌゞョンレヌトは倧いに䞊がる。
” Website Response Times英語 “


あなた自身も、衚瀺の遅いサむトに倚少いらいらした経隓はあるこずだろう。そしお、あたりにも衚瀺が遅いず、そのペヌゞを開くこずを諊めるはずだ。

実際に、衚瀺スピヌドが秒を超えるず、ナヌザヌの泚意力が散挫になり、どれだけ良いコンテンツを䜜っおいたずしおも、それがじっくり読たれる可胜性が倧きく䞋がる。そしお秒を超えるず、ナヌザヌはほが確実にサむトから離れおしたう。

−SEOに奜圱響を䞎える

Google は” Using site speed in web search ranking 英語“で、サむトの衚瀺速床が怜玢順䜍を決める重芁な芁玠の぀であるこずを明蚀しおいる。䞋蚘は䞀郚抜粋である。

Webサむトの高速化は、サむトの所有者だけでなく、すべおのむンタヌネットナヌザヌにずっお重芁です。より速いサむトは幞せなナヌザヌを䜜成し、サむトの反応が遅い堎合、蚪問者がそこで過ごす時間が少なくなるこずが内郚調査で確認されおいたす。しかし、より高速なサむトはナヌザヌ゚クスペリ゚ンスを向䞊させるだけではありたせん。最近のデヌタは、サむトの速床を向䞊させるこずで運甚コストも削枛されるこずを瀺しおいたす。私たちず同様に、ナヌザヌは速床に倚くの䟡倀を眮いおいたす。そのため、私たちは怜玢ランキングでサむトの速床を考慮に入れるこずにしたした。

たた2018幎には、“Use page load speed as a mobile search ranking factor”で、サむトの衚瀺速床がモバむル怜玢順䜍を決める重芁な芁玠であるこずを明蚀し、これをスピヌドアップデヌトず呌んでいる。䞋蚘は䞀郚抜粋である。

怜玢ナヌザヌはできるだけ早く質問に察する回答を芋぀けたいず考えおいたす。研究英語では、ナヌザヌはペヌゞの読み蟌み速床を非垞に気にかけおいるこずがわかっおいたす。 読み蟌み速床はこれたでもランキング シグナルずしお䜿甚されおいたしたが、それはデスクトップ怜玢を察象ずしおいたした。 そこで 2018 幎 7 月よりペヌゞの読み蟌み速床をモバむル怜玢のランキング芁玠ずしお䜿甚するこずを本日みなさんにお䌝えしたいず思いたす。

぀たりサむトの衚瀺速床を早くするこずがナヌザビリティを高め、その結果SEOに奜圱響を䞎える。そのためサむトオヌナヌに衚瀺速床の早いサむトを䜜るこずを求めおいるのだ。

泚
ここたでの説明でWordPressの衚瀺速床を高速化するこずが、SEOに圱響を䞎えるこずはわかった。しかし高速化するこずは、SEO察策の枝葉の郚分にすぎない。ナヌザヌの満足床を高めるこずこそが本質だ。「SEOずは怜玢ナヌザヌに120%の䟡倀ず満足を提䟛するこず」を参考にしお本質的な理解をしおおこう。


サむトの衚瀺速床を巊右する䞉倧芁玠

それでは、サむトの衚瀺速床は䜕に圱響されおいるのだろうかそれは以䞋の぀だ。

  • 画像の読み蟌み
  • ゜ヌスの蚘述内容
  • キャッシュ

この぀の芁玠を芚えおおくこずで、高速化のために䜕をすれば良いのかが明確になる。

それでは、これらの䞀぀ひず぀の芁玠が、サむトの衚瀺速床に圱響を䞎える理由ず、それぞれの最適化のために誰にでもできる方法を䞀぀ず぀ご玹介する。


画像サむズの最適化による高速化

画像サむズを最適化するこずで、結果的にWordPressの衚瀺が高速になる。最適化する方法は2぀ある。

  • 画像のファむルサむズそのものを圧瞮する方法
  • ペヌゞのテキストの衚瀺を最優先しお、画像の読み蟌みを埌回しにする方法

たず画像に぀いお分かりやすく単玔にお䌝えするず、WEBペヌゞのコンテンツはテキストず画像で出来おいる。䞇文字のテキストのサむズは、30KBキロバむトほどにしかならないが、画像は、500 × 500 px 皋床のものでも、JPG圢匏なら数十KB、PNG圢匏なら数癟KBほどのサむズになる。

このように、画像䞀枚だけでも、コンテンツの容量が倧きく増えおしたうのだ。これを最適化する方法は぀ある。

  • 画像のファむルサむズそのものを圧瞮する方法
  • ペヌゞのテキストの衚瀺を最優先しお、画像の読み蟌みを埌回しにする方法

たずは前者の方法から芋おいこう。

−画像のファむルサむズの圧瞮

画像のサむズを節玄しおアップするようにするず、結果的に、䞀぀ひず぀のペヌゞの容量を倧きく削枛するこずに぀ながる。そしお、それだけでペヌゞの衚瀺速床を䞊げるこずができる。

そのためにできるこずは぀ある。

−−EWWW Image Optimizer の導入

コンテンツに䜿甚する画像を䞀枚ず぀、いちいち圧瞮しおいるず効率が悪い。そこで、自動的に画像サむズを圧瞮しおくれるのが、EWWW Image Optimizer ずいうプラグむンだ。

これを䜿うず、JPGファむルでは平均15%、PNGファむルでは平均50%ほどサむズを圧瞮するこずができる。たた、これからアップロヌドする画像だけではなく、過去にアップロヌドした画像もたずめお圧瞮するこずができるので非垞に䟿利だ。

『EWWW Image Optimizer の蚭定方法ず䜿い方』で有効な䜿い方を分かりやすく解説しおいるので参考にしお欲しい。

−−画像の質を保ったたた圧瞮しおくれるオススメサヌビス

通垞は、EWWW Image Optimizerで十分だが、ずにかく画像の質にこだわりたい方向けに、画像の質をできるだけ高く保ったたたサむズを圧瞮するサヌビスがある。

それが以䞋の぀だ。

  • JPEGminiJPG圢匏の画像を高品質な状態で圧瞮できる。” Try It Now ” のボタンをクリックしお、圧瞮したい画像をドラッグ&ドロップするだけで利甚可胜。画面右䞊の SIGN UP から登録するず200MBたで無料で䜿うこずができる。気に入ったら有料のサヌビスを賌入すれば良い。
  • TinyPNGPNG圢匏の画像を高品質な状態で圧瞮できる。こちらも、” Drop your .png files here ! ” ず曞かれおいる郚分に、圧瞮したい画像をドラッグ&ドロップするこずで利甚できる。枚たでなら䞀括で圧瞮できるので䟿利だ。

−画像の読み蟌みを埌回しにする

通垞は、画像の読み蟌みが完了しおからペヌゞが衚瀺される。しかし、ペヌゞを衚瀺しおから画像を読み蟌むようにすれば、それだけで衚瀺速床を倧きく改善するこずができる。

これを簡単に実珟するこずができるのが、Lazy Load ずいうプラグむンで、これを導入するだけでもPageSpeed Insights の評䟡が倧きく䞊がる。

むンストヌルしお有効化するだけなので蚭定も簡単だ。


゜ヌスの蚘述内容の最適化による高速化

「Head Cleaner」 ずいうプラグむンを䜿うこずで、゜ヌスの蚘述内容を最適化するこずができる。その結果WordPresの衚瀺を高速化できる。

゜ヌスずは、WEBペヌゞを構成するコヌドのこずだ。通垞、WEBペヌゞ䞊で右クリックしお「ペヌゞの゜ヌスを衚瀺する」ボタンを抌すず芋るこずができる。

Webペヌゞの゜ヌスを構成する倧芁玠は以䞋の通りだ。

  • テキストデヌタ
    文字通りテキストのデヌタ。前述の通りテキストの容量は党䜓から芋るず非垞に小さいので特に気にする必芁はない。
  • CSS
    デザむンやレむアりトを指定する蚀語。別名スタむルシヌト。
  • JavaScript
    画像にカヌ゜ルを合わせるず自動的に拡倧させたり、アニメヌションを取り入れる時などに䜿うプログラム。

このうち、CSSずJavaScriptは、テキストデヌタず比べお、遥かに倚くの読み蟌み時間が必芁になる。通垞、CSSずJavaScriptを、たずめお゜ヌスのタグ内に蚘述する堎合が倚い。

しかし、たずめお蚘述するず、ペヌゞを開く時にJavaScriptを先に読み蟌もうずする。そのため読み蟌みが終わるたで、サむトの衚瀺に関する凊理が䞀旊ストップしおしたう。結果的に衚瀺速床が遅くなる。

そこで䞋図のようにJavaScript はタグ内ではなく、タグの盎前に配眮するこずで、凊理時間のタむムラグを回避するこずができる。

source

少々難しく聞こえるかもしれないが、WordPressは、 Head Cleaner ずいうプラグむンを䜿うこずで䞊蚘の蚭定を簡単に実珟するこずができる。

『 Head Cleaner の最も理想的な蚭定方法』を参考に蚭定しおみお欲しい。

※最初からCSSやJavaScriptの蚘述方匏が最適化されおいるテンプレヌトを䜿っおいる堎合は、Head Cleaner を導入する必芁はない。


キャッシュの䜿甚による高速化

キャッシュを䜿うこずでサむト衚瀺の高速化を実珟するこずが可胜だ。具䜓的には2぀の方法で実珟できる。

  • プラグむン「W3 Total Cache」を䜿甚する方法 
  • 「CDNサヌビス」を䜿甚する方法

2぀の詳しい方法は埌述する。いきなり蚀われおも、分からないず思うので、たずキャッシュの仕組みを簡朔にご説明する。

Webサむトには静的ペヌゞず動的ペヌゞの皮類がある。

静的ペヌゞずは、テキストず画像を甚いおHTML蚀語でたずめたファむルのこず。動的ペヌゞは、ナヌザヌがブラりザで「このペヌゞを芋たい」ずアクセスする床にHTML蚀語で郜床䜜られるファむルのこずだ。※WordPressは動的なペヌゞに該圓する。

䞋の図のように、動的ペヌゞの方が、サむトを衚瀺させるたでのステップが倚い。

sitespeed-11

このように、動的ペヌゞでは、いちいちデヌタベヌスを読みにいっおデヌタを取り出すずいう工皋が存圚する。その工皋を効率良く凊理するために生たれたのがキャッシュだ。キャッシュずは、䞀時的に保存するデヌタずいう意味で、その䞀時保存デヌタを衚瀺するようにするこずで、わざわざデヌタベヌスたで読み取りにいく手間を省くずいうものだ。

次のフロヌ図を芋るず、キャッシュの働きがわかりやすい。

sitespeed-12

あるナヌザヌがWebペヌゞを閲芧した時に、そのペヌゞのファむルを䞀時的に保存する。そしお、別のナヌザヌが同じペヌゞを芋たいず芁求した際、この䞀時的に保存したファむルが衚瀺される仕組みだ。

これだず、ナヌザヌから芁求があるごずに発生するプログラムの皌働やデヌタベヌスぞのアクセスが䞍芁ずなり、その分だけWebペヌゞの衚瀺速床が倧きく向䞊する。

さお、WordPressでキャッシュを䜿った高速化のアプロヌチは぀ある。

  • キャッシュを導入する
  • CDNサヌビスを䜿う

たず前者からご玹介しよう。

−WordPressのキャッシュの導入方法

WordPressには、この仕組みを簡単に導入できるプラグむンがある。それが W3 Total Cache だ。今たで、キャッシュによる高速化をやったこずがない方は、これを導入するだけでサむト衚瀺スピヌドの劇的な高速化を実感できるだろう。

詳现な蚭定方法は、『W3 Total Cache の䜿い方ず蚭定方法』で説明しおいるのでこの通りに進めおみお欲しい。

−CDNサヌビスを䜿う

CDNサヌビスずは、コンテンツ・デリバリヌ・ネットワヌクの略で、キャッシュを耇数のサヌバヌで所有し、ナヌザヌがペヌゞにアクセスした時は、そのナヌザヌにずっお最も物理的な距離が近いサヌバヌが応答するシステムだ。

これを䜿うこずで、アクセスによる負荷を広く分散するこずができる。

぀たり、サむトぞのアクセスを耇数のサヌバヌで凊理するので、負担が枛り、高速化に奜圱響を䞎えるこずができるずいうものだ。そしお、Cloud Flare ずいうサヌビスが、このサヌビスを無料で提䟛しおくれおいる。

『Cloud Flare の蚭定方法』で利甚方法ず蚭定方法を詳しく解説しおいるので参考にしお欲しい。


たずめ

このペヌゞでお䌝えしたこずを党お実践するず、サむトの衚瀺速床を倧きく改善するこずができる。

もう䞀床たずめるず以䞋の通りだ。

  • 画像サむズを小さくする
  • ゜ヌスを工倫する
  • キャッシュを工倫する

これらを手動で行うこずができればベストだが、そのためには劎力も䜿うし専門的な知識も必芁になる。しかし、WordPressでは、プラグむンを䜿うこずで、初心者の方でも簡単に行うこずができる。

サむトの衚瀺速床は、ナヌザビリティにもSEO的にも倧きな圱響を䞎える。ぜひ、しっかりず理解しお、察凊するようにしおおこう。

無料eBookバズ郚匏マヌケティング
広告費を1/10にしお売䞊を倍増させる党手法

広告に頌り切ったマヌケティングの打開策ずしおコンテンツマヌケティングに぀いお調べおいるけれど、よく分からないず悩んでいたせんか

本曞は匊瀟やクラむアント様がコンテンツマヌケティングに取り組み

  • ・SEOのみで月間100侇PV集めた方法
  • ・平均6.92%のコンバヌゞョン率が出た新芏顧客獲埗法
  • ・CPLやCPAを倧幅に改善した方法ずそのからくり

など、コンテンツマヌケティングの効果ず、具䜓的な斜策内容を党94ペヌゞに枡っお詳现に解説しおいるものです。

ぜひ、貎瀟のWEBマヌケティングにもご掻甚ください。

eBookをダりンロヌド

コメントはこちらから

  1. 初めたしお。
    バズ郚さんのサむトで基瀎から勉匷しおいるものです。

    レンタルサヌバヌが倜間のアクセスが増加した時にサヌバヌダりンするようになりたした。
    改善するためにこの蚘事で玹介頂いたプラグむン

    EWWW Image Optimizer Lazy Load  W3 Total Cache

    CDNサヌビスのPhotonをJetpack by WordPress.comで導入しお衚瀺速床は高速化したのですが、䟝然ずしお倜間は重くなっおダりンしおしたいたす。

    䞀日蟺りのサヌバヌぞのhit数が蚱容範囲を超えおおり、それが原因で重くなっおいるらしいのですが、hit数を削枛する他の方法をご教授しおいだだけないでしょうか

    サヌバヌに䞍芁なファむルが溜たっおいるのかよくわかりたせん。
    容量やPVに関しおは問題はないかず思いたす。

    よろしくお願い臎したす。

    1. 仲村 暢明

      レンタルサヌバヌはどこのをお䜿いでしょうか

      サヌバヌダりンではなく、レンタルサヌバヌ偎からデヌタ転送量を超えた制限を受けおいるかず掚枬したした。
      良いコンテンツを提䟛しおいるので、アクセス数が倚いのでしょうね、玠晎らしいです。

      デヌタファむルの圧瞮を考えるより、安定したサヌバヌに移行されおはいかがでしょうか
      理由は次の぀です。

      ・あたりにサヌバヌ゚ラヌが頻発するずナヌザヌからのサむトの信頌床が䜎䞋しおいく
      ・今埌、コンテンツを増やしおいく際、いずれにしおもデヌタファむルの増加はたぬがれない

      バズ郚でぱックスサヌバヌ以䞊のサヌバヌを掚奚しおいたす。詳しくは『おすすめサヌバヌ』をご芧ください。

  2. スパヌダ

    はじめたしお、こんにちは。
    珟圚wordpress4.3.1でブログを曞いおいたす。

    こちらの蚘事で「Lazy Load」の玹介がありむンストヌルした所
    テキストから衚瀺できるようになったのはいいのですが、
    「Wptouch」でレスポンシブ衚瀺ができなくなりたした。

    どこか倉曎されおいるずは思うのですが、わからずどうしたらよいか
    アドバむスを頂けたら幞いです。

    珟圚䜿甚しおいるテヌマのphpファむルずかを
    デフォルトからコピペで元に戻すほうがよいでしょうか

    1. 仲村 暢明

      スパヌダさん、コメントありがずうございたす。

      恐れ入りたすが「Wptouch」はバズ郚で掚奚しおおらず、回答臎しかねたす。
      よろしければ本家サむトの

      http://ja.forums.wordpress.org/

      でご質問いただくのはいかがでしょうか
      WordPressはオヌプン゜ヌスで開発が進められおいたす。
      ご質問するこずでWordPress開発に貢献できるかず思いたす。

コメントは停止䞭です。