5分SHAREツイートシェアはてブLINEPocketWordPressでページ速度を改善するというのは盲点になりがちな改善点です。ページ速度を改善するためにはどのようなことを行えばよいのか、7つに分けて簡単に書いていきたいとおもいます。この記事を読めば、ページ速度の重要性と自分のサイトのページ速度の確認方法、またページ速度の簡単な改善方法が分かります。私の場合だと、ページ速度のスコアが30台→70台へ上がりました。検索結果にあなたのサイトが表示されて、クリックしたとします。そのときに、スピードが遅いと、ユーザはブラウザバックをしてしまいます。私もそんな体験をすることがあります・・・。1sや2s程度なら待ってくれるのでしょうが、それよりも時間がかかると直帰率が上昇します。googleの公式調査では、以下のように発表されています。読み込みが1秒から3秒になると、直帰率は32%上がる読み込みが1秒から5秒になると、直帰率は90%上がる読み込みが1秒から6秒になると、直帰率は106%上がる読み込みが1秒から10秒になると、直帰率は123%上がるまた、SEOの観点から言えば、ページスピードはきちんと見られていて、速いほど検索上位に入りやすいともいわれています。Insightsにアクセスして、そこでURLを入れ込むだけです。100点満点中のスコアが表示されるのでわかりやすいです。100点満点を目指す必要は全くありませんが、できるだけ高い点数が望ましいです。サイトにもよりますが、70~80点くらいあれば十分だと考えられます。モバイル側とPC側でスコアがまるで異なります。PC側では良いなのに、モバイル側では悪いでした。改善方法もいくつか出てきますのでサイトスピードが遅いのは何が原因かすぐにわかるので楽です。Sonarを使って分かりやすくページ速度を測る次に紹介する方法は、Chromeの拡張機能のSonarを入れる方法です。機能をONにした状態でページを閲覧すると、以下のような表示が出ます。このサイトのTOPページです。読み込みに2.3sほどかかっています。中央下の割合から、画像のデータが大きい(読み込みの割合が大きい)ということがわかります。画像サイズをもう少し小さくすべきということですね。3.ページ速度の改善方法ここから、ページ速度の改善方法を挙げていきます。画像を軽いものに差し替える先ほど「画像の読み込み割合が大きい」と述べましたが、サイトではちょっとした画像がかなりのデータを必要とします。ちなみに改善前では「画像は横幅700px以下に統一」のみ行っていましたが、どうやら不十分なようです。画像をもっと軽いものに差し替える・・・具体的には、png形式ではなくjpeg形式を使用したほうがデータは軽いです。png形式とjpeg形式の違い簡単にいうとpngは透明色を用いた画像や可逆圧縮(圧縮前のデータと、圧縮・展開の処理を経たデータが完全に等しくなるデータ圧縮方法)をしたい画像に適しています。jpeg形式は、出力のたびに画像が劣化しますが、サイズが軽いです。そのため編集はpng形式で、最後の出力だけjpeg形式でするという手法もあります。画像の圧縮もしましょう!TinyPNGというサイトでは、png形式かjpeg形式の画像を圧縮することができます。圧縮率は、このサイトがダントツで高いです。みんなこれを使っていますね。圧縮の前後で比較してみましょう!例えば、下の画像はjpeg形式です。次のが圧縮した画像です。138KB→28KBの圧縮です。見た目はほぼ変わらずです。旅行での写真をもっときれいに掲載したいという場面でない限り、jpeg形式の画像を圧縮すればOKです。png形式の画像を圧縮すればもっときれいな画像になるのですが、やはり圧縮したjpeg画像よりも画像サイズが大きくなってしまいます。使っていないjavascriptの読み込みをしないデザインを細かくいじっている人にしか関係しないと思います。デザインを変更するのに、CDN経由などで読み込ませたものがある→デザインを元に戻した→読み込ませるためのコードは残したままだったということが起きていれば、修正すべきです。私の場合、以前書いたコードが一部残っていまして、それがちょっとだけページ速度を遅くしていました。コピペでOK!プラグインを使わずWordPressにスライダーを作る方法この記事のコードの残骸が残っていました。デザインを変更する際には注意です。こんなドジをしている人はいないかもしれませんが、例えばある1記事だけでしか使っていないJavaScriptやjQueryのコードがあるとします。それをヘッダーで読み込んでいると、そのコードを必要としないページにとってはページ速度を遅くするだけの存在になります。そのため、記事内に直接コードを書く等の対応をしましょう。Insightsで「レンダリングを妨げるリソースの除外」が出てきたら、この欄を見れば改善できるかと思います。いう意味かといいますと、初期状態だと「HTML読み込み」→「JavaScriptダウンロード」→「JavaScript実行」→「HTML読み込み(の続き)」となっています。JavaScriptのダウンロードと実行を終えないと、続きができない状態(妨げている)ということです。これを、非同期にすることで、「Javascriptのダウンロード」と「HTML読み込み」を同時に行うことで、Javascriptのダウンロード時間分スピードを速めます。外観テーマエディターfunctions.phpやり方としては、以下のコードをfunctions.phpの最後に貼り付けるだけです。);}//非同期設定ここまで簡単にいうと、async属性を付与すれば非同期になるので、非同期にすべきではないJavaScript以外を指定(4・5行目で指定)してから、async属性(非同期にするためのもの)を付与しています。画像の遅延読み込み初期状態だと「画像を全部読み込む」→「全部表示!」という流れでページを出しています。それを、「画像を見えてる部分&見えそうな部分だけ読み込み」→「ページスクロールに合わせて順次読み込み&表示」という流れにすることで、画像の読み込みを減らし、最初の表示スピードを速くします。簡単なのはプラグインに頼る方法です。Loadというプラグインで、有効化するだけで終わりです。画像を後回しで読み込んでいくので、ユーザから見るとサイトへアクセスできる体感速度が上がります。サーバーを変更するやはり、高額なサーバーの方がスピードも速いです。アクセスが多く集まるようになるにつれてどんどん遅くなってきますし、アクセス数次第ではサーバー自体を変更したほうがいいです。アクセス数の目安もサーバーで書かれていますので、PVが何十万になってきたり、なんか遅い・・・。感じるのであればサーバー側の問題かもしれないので疑いましょう。ロリポップだと、月間30万PVほどが限界のようですね。サーバーに関してはエックスサーバーなどであれば問題ないでしょう。有料テーマに乗り換える現在無料テーマを使っているなら、有料テーマに乗り換えるだけでスピードが急に速くなるということもあります。私の場合、この「有料テーマに乗り換える」および「サーバーの変更」以外を実施してスコアは60台でした。有料テーマのSANGOに乗り換えたところ、スコアはモバイルで70台に。(PCは90超え)乗り換えたときの記事。乗り換え方も書いています。WordPressテーマをSANGO+PORIPUに乗り換え!100記事越えで大変だった点は?有料テーマは様々な部分で最適化されており、特に何もしていないけどスコアが上がるという人が大多数のようです。有料テーマでは、プラグインを必要としていない部分が多々あります。pack」が必要ありません。次に書いている「プラグインを使わない」との相乗効果もあり、一気に軽くすることができます。プラグインを使わないプラグインは色々読み込んでくるので、ものにもよりますが重くなります。何かを表示させるためのプラグインはかなり重くなる原因に。プラグインを使わずともできることは多くあります。人気記事一覧の表示もそうですし、目次もプラグインいらずでできます。プログラムのコードを綺麗に出力させるためのCrayonというプラグインをやめて、highlight.jsに切り替えることでスピードのスコアは20ほど上がりました。highlight.jsでwordpressに軽くコードを載せる方法【Crayonからの乗り換え可】highlight.jsを使用すればもっとおしゃれに軽くコードを載せることが可能です。使用されているCrayonは重く、デザインも少ししかいじることができません。highlight.jsの導入方法から、Crayonからの切り替え方法についても書いていきます。Crayonを使っているという方は必ず切り替えたほうがいいレベル。必要最低限のプラグインってどれ?という点・実はこのプラグインは不必要という観点でも記事を書いています。WordPressの必須&おすすめプラグイン9選【これだけでOK】WordPressには色々なプラグインを導入することができます。必須なプラグインって結局なんなの?プラグインの最適な個数はいくつ?今使っているプラグインなしでもコードを追加すればできそうなものはどれ?といったことについて書いていきたいと思います!4.まとめ7つ、ページ速度改善方法について書いていきました。効果があったもの順にまとめます。有料テーマへの乗り換え(10~20アップ)プラグインを使わない(人によりけり)画像を軽いものに差し替える(5ほどアップ)サーバー変更(人によりけり)使っていないJavaScriptを読み込まない(5ほどアップ)画像の遅延読み込み(3ほどアップ)JavaScriptを非同期に(2ほどアップ)せっかく検索してあなたのサイトに辿りつきそうだというのに、ページの読み込み時にブラウザバックをされてしまうと、機会損失以外の何物でもありません。ここに書いた方法を試して、少しでもユーザに優しいページを目指しましょう!特にスピードに関係するプラグインは9つでいいです。WordPressの必須&おすすめプラグイン9選【これだけでOK】WordPressには色々なプラグインを導入することができます。【Rinker】リクエスト回数が多すぎます。