WordPressでPageSpeed Insightsの得点を上げる4つの方法


 ホームページがある程度仕上がってくると、その質の向上も目指したくなります。今回は、「表示速度」に目を向けていきます。

表示速度ってどうやって測るの?

 さて、この「表示速度」ですが、ストップウォッチ片手に測るものではありません。それで測れるくらい遅ければもう致命的です。多くの場合は、その僅かな差を改善しようとしているので、速度測定ツールを使っています。有名なものは、googleのウェブマスターツールにあるPageSpeed Insightsです。

何が分かるの?

 さて、PageSpeed Insightsを使うと何が分かるのでしょうか。ひとつはモバイル、パソコンを対象にして計算された「得点」が分かります。そして、得点をあげるためにすべきことを示してくれたり、圧縮された画像やCSSをダウンロードできるようにしてくれたりするなど、サイト改善のためにできることをかなり親切に教えてくれます。数値化した目安が出されますので、この得点を上げていくようにいろいろと試してみるといいのです。

実際に速度改善を試してみた

 さて、提案を受けてひとつずつ試していきました。先ずはすっぴんの状態です。wpXレンタルサーバー そのものが高速化されています。

 しかも、SEOテンプレート【賢威】 を使っていますので何もしなくても最初からまずまずの感じではあります。


 モバイルの点数は79点。私の英語の点数よりいいです。速度は不明です。パソコンの点数は61点。内閣の支持率よりは高いです。

プラグインで画像を圧縮

 さて、まずは画像の圧縮をしました。EWWW Image Optimizerというものを使って、クリックひとつです。プラグインの詳しい説明や使い方は他の記事で紹介しています。

https://elementor.misuzuya.com/elementor-plugin/

その結果、点数はこうなりました。


 モバイルの点数は79点。変わりませんね。使っている画像が少なかったのもあるかな。パソコンの点数は62点。1点だけ上がりました。大した努力もしていないのでこんなものです。

▶ スポンサードリンク

htaccessで圧縮

 次に、wpXレンタルサーバー のコントロールパネルに行き、htaccessでキャッシュの設定と、圧縮の設定をしました。

 参考になるサイトはたったひとりのIT事業部様です。ブラウザ圧縮とHTTP圧縮をしました。当サイトは、まとめてダーンとコピペしました。情報が進化しているかもしれないので、実際にやるときは参照元のページを確認してみてください。

  1. <IfModule mod_expires.c>
  2. ExpiresActive On
  3. ExpiresByType text/css “access 1 weeks”
  4. ExpiresByType image/png “access plus 1 month”
  5. ExpiresByType image/jpg “access plus 1 month”
  6. ExpiresByType image/jpeg “access plus 1 month”
  7. ExpiresByType image/gif “access plus 1 month”
  8. ExpiresByType image/x-icon “access plus 1 month”
  9. ExpiresByType text/javascript “access plus 1 month”
  10. ExpiresByType application/x-javascript “access plus 1 month”
  11. ExpiresByType application/javascript “access plus 1 month”
  12. ExpiresByType application/font-woff2 “access plus 1 year”
  13. ExpiresByType application/font-woff “access plus 1 year”
  14. ExpiresByType application/x-font-ttf “access plus 1 year”
  15. ExpiresByType application/x-font-eot “access plus 1 year”
  16. </IfModule>
  17. <IfModule mod_deflate.c>
  18. AddOutputFilterByType DEFLATE text/plain
  19. AddOutputFilterByType DEFLATE text/html
  20. AddOutputFilterByType DEFLATE text/xml
  21. AddOutputFilterByType DEFLATE text/css
  22. AddOutputFilterByType DEFLATE application/xhtml+xml
  23. AddOutputFilterByType DEFLATE application/xml
  24. AddOutputFilterByType DEFLATE application/rss+xml
  25. AddOutputFilterByType DEFLATE application/atom_xml
  26. AddOutputFilterByType DEFLATE text/javascript
  27. AddOutputFilterByType DEFLATE application/x-javascript
  28. AddOutputFilterByType DEFLATE application/javascript
  29. AddOutputFilterByType DEFLATE application/x-httpd-php
  30. AddOutputFilterByType DEFLATE image/svg+xml
  31. </IfModule>

その結果、点数はこうなりました。

    <img width="613" height="318" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-3.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-3.png 613w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-3-400x208.png 400w" sizes="(max-width: 613px) 100vw, 613px" />      
    <img width="613" height="310" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-3.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-3.png 613w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-3-400x202.png 400w" sizes="(max-width: 613px) 100vw, 613px" />      
    <p> モバイルの点数は80点。1点上がっただけですが、goodと褒められました。パソコンの点数は68点。6点上がりましたよ。</p>     
        <h3>wpXの高速化処理</h3>      
    <p> さらに、<a href="https://px.a8.net/svt/ejp?a8mat=2HUVH8+F2DWVM+CO4+ZQ80I" target="_blank" rel="nofollow noopener">wpXレンタルサーバー</a> <img src="https://www11.a8.net/0.gif?a8mat=2HUVH8+F2DWVM+CO4+ZQ80I" alt="" width="1" height="1" />の管理パネルで高速化の処理をしました。ただし、サイトのカスタマイズなどをしているときにこれにチェックを入れると変更がなかなか反映しないので、リニューアルするときなどは一時的にチェックを外します。</p>        
    <img width="750" height="186" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed6-800x198.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed6-800x198.png 800w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed6-400x99.png 400w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed6-768x190.png 768w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed6.png 1117w" sizes="(max-width: 750px) 100vw, 750px" />      
    <p>その結果、点数はこうなりました。</p>     
    <img width="608" height="322" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-4.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-4.png 608w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-4-400x212.png 400w" sizes="(max-width: 608px) 100vw, 608px" />      
    <img width="617" height="323" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-4.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-4.png 617w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-4-400x209.png 400w" sizes="(max-width: 617px) 100vw, 617px" />      
    <p> モバイルの点数は80点。かわりませんが、goodと褒められました。パソコンの点数は85点。これはすごいですね。できる子になりました。</p>      
        <h3>CSSの圧縮</h3>     
    <p> 最後にgoogleのPageSpeed Insightsが提案するCSSなどをアップロードします。一応、元のものをバックアップとしてローカルに保存しておくことをお勧めします。</p>     
    <img width="750" height="124" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed7-800x132.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed7-800x132.png 800w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed7-400x66.png 400w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed7-768x127.png 768w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed7.png 1100w" sizes="(max-width: 750px) 100vw, 750px" />      
    <p>これをFTPソフトでアップロードして上書き。その結果、点数はこうなりました。</p>       
    <img width="605" height="321" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-5.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-5.png 605w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed1-5-400x212.png 400w" sizes="(max-width: 605px) 100vw, 605px" />      
    <img width="606" height="323" src="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-5.png" alt="" srcset="https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-5.png 606w, https://elementor.misuzuya.com/wp-content/uploads/2018/02/speed2-5-400x213.png 400w" sizes="(max-width: 606px) 100vw, 606px" />      
    <p> モバイルの点数は81点。最初と比較して2点ですが上がりました。パソコンの点数は87点。最初と比較して26点アップ。

 これによりどちらもgoodになりました。なお、ちょっとしたことで評価は上下するので、参考程度ではありますが、悪いよりは良いほうがいいと思いますのでいろいろ試してみるといいと思います。

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