「Webパフォーマンス改善セミナー」に行ってきのでまとめました!

久々、セミナーに参加してきました!
今回は「Webパフォーマンス改善セミナー」ということで、主にWebサイトの速さ・スピードの改善にはそうすればいいか?
特に、WordPressは重くなりがちなので、その辺り意識して勉強させていただきました。

「Webパフォーマンス改善セミナー」に行ってきのでまとめました!

WordPress でも大丈夫!実例で見るウェブパフォーマンス改善

Lighthouseのパフォーマンスを30点から95点に!(モバイル)ついでに、PWA対応もした。

PageSpeed Insights(パフォーマンスだけの改善だけならこれ、ただLighthouseより数値低くなる)。

サーバーを変更した。同時リクエストに強いNginxを使いたかったから。

不要プラグインのアンスト(1.4GBのデータ削除)。FTPより、管理画面から削除する(プラグインによっては、DB内にデータが残るかもしれないので)。

ページによってCSS・JSに読み込みを制御。

PWA / Service Worker。プラグインだけで対応しやすい(ユーザーに近いところでキャッシュする)。

画像の形式を変更した(単色系のアイキャッチが多かったのでSVG化)→さらに圧縮(SVGO)。

png、jpgは今後使われない?(SVG、webPに置き換わる?)。

WordPressでSVGはデフォルトでは使えない。

OGP画像は、SVGに未対応なので、同じ画像のものを用意する必要がある。

オフスクリーン画像の遅延読み込み(Lighthouseではスコアに影響しない)。decoding=”async”属性をつける。画像の遅延読み込みライブラリはたくさんあるが、AMPの画像表示方法を利用してみよう。(AMP JSライブラリを読み込むことで、AMPの高速化機能を利用できる)。

レンダリングを妨げるリソースの削除(asyncよりdefer推奨)。WordPressのscriptにdeferをつける。

Google Fontsも非同期的に読み込む。

Resource Hints(WordPressでdns-prefetchを追記するなど)。

全てのサイトのパフォーマンスを上げるのは難しい(サイトの目的・コンテンツによって変わる)。

リダイレクト処理するプラグインがめちゃくちゃ重かった。あとは、ログを残す系、レコメンド系(アクセス数をログとして残す)が思いプラグインになりうる。

写真素材などはSVGでは逆に重くなる。その場合は、webPとjpgで切り替える。webPはsafari非対応なので、切り分ける。

ファーストビュー周りのCSSをインライン化するのは効果があるかもしれない。全部インライン化すると重くなる可能性がある。

昔はJSもCSSも1つにまとめるのはセオリーだったが、http/2通信の発達で、そこまでパフォーマンスに影響しない。

レンタルサーバの設定でできるWebサイトの高速化

PHPバージョン7.1から7.2でも10%上がる?(Wordpressで)ただし、WordPressに限る。

PHPバージョンはプラグインの動作に影響出やすい。

アクセス解析系のプラグインは重い(関連投稿、ショートコードなども)。

全ページに影響あるプラグインは重くなりやすい。

テーマでも負荷がかかるケースがある。

キャッシュしよう!→WP Super Cacheだけでも格段にスピードアップ!

それでも速さを求めるならCDNキャッシュもおすすめ(アクセス集中時期がわかってるなら利用しやすい)

ステージング機能はさくらサーバだけの機能。テスト環境を簡単に構築できる。

「Webパフォーマンス改善セミナー」に行ってきのでまとめました!

Webの現状・問題点とAccelerated Mobile Pages

多様なデバイス、あらゆる環境が登場していることで、Webの閲覧がおかしくなるケースが増えている(ロードが遅かったり、レスポンシブじゃなかったり)。

Lighthouseはローカルで、PageSpeed InsightsはChromeのユーザーデータも使用する。

53%の訪問者はページ表示が3秒遅れるだけで離脱する。79%のユーザーはパフォーマンスが悪いサイトには戻らない。20%ものコンバージョン率が1秒表示が遅れるごとに減る。

自社でパフォーマンスチューニングする場合、Webフロントエンドのスペシャリストと専任の開発チームを組織する必要性がある。

AMPによって、ページ表示時間を40%改善・CVR20%増。新規ユーザー数133%・売上34%増。

AMP Stories(インスタのストーリーズみたいな)を実装。

決して気軽に実装できるわけではないので、Googleではスモールスタートからを推奨している。

LighthouseのSEO項目はかなり表層的。今後増えていく可能性もある。

まとめ

今回、Webサイトの高速化に特化したセミナーで、知らないことも多く、まだ手付かずの部分まで多く学びがありました。 具体的には、下記施策に取り組みたいと考えています(年内には!!)。

  • プラグインなしの実装(リンクカード、関連記事等)
  • 画像の形式変更(webPかな・・・?)
  • オフスクリーン画像の遅延読み込み(つまりAMP-img)
  • レンダリングを妨げるリソースの削除
  • Google Fontsも非同期的に読み込む
  • AMP化(実績のとこはカルーセルにしたいなっと)

Webサイトの高速化ってのは、どこまでやるか?どこまでこだわるかがすごく大きいと感じました。
もちろん、手軽にやれるキャッシュ系などもプラグインを入れるところから、CDNのキャッシュまで極めると奥が深いし、費用もかかる部分があります。終わりがない作業になりますが、せっかくこんな良いセミナーに参加させていただけたので、これを良い機会に上記の施策から手をつけていきたいなと考えてます。行動しないと意味がないですからね!

そんなきっかけを与えていただいたセミナーでした。ありがとうございました!

Menu