大阪梅田グランフロントにあるさくらインターネット本社にて、「Webパフォーマンス改善セミナー」があるということで行ってきました。
WordPress界隈で有名なKite（カイト）さんと、Googleウェブマスターオフィスアワーの「きらきら☆あんなたん」でおなじみGoogle社の小川安奈さん、さくらインターネットの谷口さんによる「サイト高速化」がテーマのセミナーです。
セミナー開催のきっかけは、さくらクラブ（さくらインターネット）もくもく勉強会の管理人である福井洋さんご自身の運営する「エコテキブログ」のPSI（Google PageSpeed Insights）スコアが、Lighthouse導入後に激減したことがきっかけだったとのこと。
サイトの改善、サーバ側でできること、AMP技術、これら3方向からのサイトパフォーマンス改善方法を聞けて大変勉強になりました。
WordPressでも大丈夫！実例で見るウェブパフォーマンス改善
WordPressを遅くしている原因のひとつに、データを溜め込むプラグインという衝撃的な内容。このスライドを作成されるのにかかった時間は約90時間。そのうち約70時間、9人日を、プラグインの整理や検証作業に費やしてくださった貴重なスライド資料。ただただ感謝です。
そのデータを溜め込んでいたプラグインというのは、404のプラグインでした。リダイレクションエラーのログが大量に溜まるのだそうです。外部からのスパムアタックなども考えると回避するのは難しそうです。
座談会では、高速化のためのサイト静的化についても触れられていました。WordPressを静的化するには、Shifterが良さそうです。そういた場合の検索機能やフォームについては、それぞれアルゴリアやNetlifyという名称が出ていました。ダメ元でWixの静的化ジェネレータか何かご存知ないか聞いてみたところ、探してくださいましたが、なかったようです。やはり（汗）
レンタルサーバの設定でできる、WordPressの「高速化」
レンタルサーバでは、触ることのできる設定箇所が少ないため、チューニングして高速化を図るということができません。
実際、Webサイトの表示速度のボトルネック、遅くしている要因は何かというと、スマホで撮った何メガもの画像をそのままアップロードしていたりと、サーバ側ではどうしようもない部分が大多数であるとのこと。
WebサイトをPageSpeed Insightsで分析してみると、「Waiting（TTFB）」に時間がかかっていることがあります。HTMLを生成していてページが真っ白な時間です。ここを改善することで、サイトパフォーマンスの向上が見込めそうです。
このTTFBはPHPのバージョンでも大きく変わるそうで、5系から7系に変えることでたしか4倍ほど早くなっていました。そしていわゆる重いCMS（WordPress）ほど、サイトパフォーマンスに影響が大きく、静的CMS（Movable Type）などは影響が少ないとか。
ですので、WordPress使っている人はぜひ最新のPHPにバージョンアップしましょう。ただし、プラグインが対応していない場合は要注意です。さくらのステージング環境などを活用して検証するといいようです。
そして、関連投稿やアクセス解析 などのプラグインがサイトパフォーマンスを低下させる要因になることも多いようです。Kiteさんもおっしゃっていましたが、プラグインは必要最低限にすることが大事です。
また、意外ですがテーマが関わっていることもあるそうです。たとえば、ヘッダーロゴをテーマファイルに含んでいる場合、いちいちそれを見に行くので負荷になるのだとか。かといって、テーマファイルに直接コードを書くといったハードコーディングは、WordPressの良さを殺すのでしないほうが良さそうです。
サイトパフォーマンスの改善には、キャッシュを使うのが良いということで、WordPressであれば「WP Super Cache」プラグインの利用が良さそう。
「W3 Total Cache」はトラブルがおきたという情報あり。注意したいところ。通常、キャッシュのファイルは消える仕様のはずですが、古いのが溜まってしまうというプラグインもあるようです。
膨大なファイルが溜まってしまった結果、ページが真っ白になったりメールが使えなくなったり、というトラブルが起こるのだとか。まさかキャッシュのプラグインが原因だとは思いもしないでしょうね。
キャッシュの種類については「さくらのナレッジ」に情報があるので、必要に応じて参照するといいのですが、「CDN」というのが、引越し不要でサイトのパフォーマンス改善につなげることができ、使いたいときだけ使うという活用方法もできるということで、おすすめされていました。
たとえば、お正月だけアクセスの集中する神社や、合格発表の際に重いPDFを公開しなくてはならない学校のサイトなどがあてはまります。
帯域上限がなく（ 限界はあり）、ハイスペックサーバより安いのがメリット。設定がややこしいのと従量課金であること、キャッシュ事故のリスクがあることに注意すればいいでしょう（キャッシュ事故というのは、キャッシュにより他のユーザの管理画面を見せてしまうなど）。恒常的にアクセスが多いのでなければ、CDNはお得なようです。
ただし、今日申し出て明日使いたいというのはやめてくださいねとおっしゃっていました。必ず事前にテストをかねて設定する練習をしておいてくださいとのことです。
サイトパフォーマンスのボトルネックは人それぞれ。実際、早いサーバを選ぶには「試してみる」のがベストという結論でした。
自分のサイトをコピーして検証し、ネットワークの影響もありますので、時間帯を変えてTTFBを確認してみることをおすすめされていました。PSIのスコアだけを単純比較しても意味がないのですね。
また、さくらインターネットさんでは、「まりなカフェ」という対面サポートも始められたようです。電話やメールでは難しい初心者の方向けに用意されているとのことで、好評のようで満席です。利用したい人は予定をチェックして予約する必要があります。
そしてここで、さくらのドメインに対して「料金がちょっと高いんじゃないの？」という質問が出ました。しかしこれは、WixやJimdoでドメイン取った場合も、ムームードメインやお名前.comより割高になるのと同じですね。
なんと、さくらインターネットさんでは、ドメインの手続きに対するオペレーションが手動だそうです。なので、怪しいドメイン移管のトラブルについては事前に察知することができるだろうとのこと。
ちょうどタイムリーに一昨日、バリュードメインでドメイン譲渡で手数料が54,000円かかると回答されたクライアントの話に遭遇したばかりなので、さくらインターネットさんでの譲渡手数料について聞いてみました。ドメインにもよりますが、無料または数千円程度とのこと。安心しました。
Webを始めたときから愛用している、さくらインターネットさん。サポートは良いし、Wixとも相性いいですし、これからもずっと使っていきます。
Web の現状・問題点と Accelerated Mobile Pages
セミナー終盤となり、お疲れでないですか？とご配慮くださったGoogleの小川安奈さん。ウェブマスターオフィスアワーでおなじみの「きらきら☆あんなたん」あの人です！
すでに知られているように、サイトパフォーマンス、表示速度は結果として検索順位に影響を与えます。ですので、どのウェブマスターにとっても、サイトの高速化は大きな課題です。
現状分析として、PSIやLighthouseなどを使って分析すると、多くのスピード改善項目が出てきます。リソースの圧縮、キャッシュの有効化、クリティカルソースのプリロード…などなど。
これらのチューニングを自社でやろうとすると、Webフロントエンドのスペシャリストと専任の開発チームを組織する必要があります。しかしこれはなかなか難しいことです。
そこでもっと気軽にサイトパフォーマンスをあげたい、という場合にAMP（アンプ）を検討していただければということでした。
AMP（アンプ）とは
AMPは、Webサイトを作るためのオープンソースなフレームワークです。軽量で爆速なWebサイトを作るためのもので、JavaScriptを一切使わなくてもリッチなページができるといいます。
AMPと認められたページは、画像など含めさまざまなものを最適化して、高速なCDNからコンテンツを配信することができる、とても強力な取り組みとなっています。
AMPが高速な理由としては、
- すべてのJavaScriptを非同期実行
- レイアウトが崩れないようリソースのサイズを指定
- すべての3rd party JavaScriptをクリティカルパスから除外
- CSSのインライン化およびサイズ制限
- フォントは効率的に取得する
- GPUアクセラレートできるアニメーションのみを使用
- リソースの取得優先度を調整
- PreconnectおよびPrerendering
などがあげられ、これらにより1秒以下でページが表示されます。
AMPコンポーネントの提供でリッチなページ作成が可能に
1〜2年前のAMPといえば、できることが限られていてブログやニュースサイトのような一部のメディアにしか恩恵がないようなイメージでありましたが、現在のAMPは「最高のWeb体験をコモディティ化（一般的なものに）する」というミッションのもとにすすめられており、より豊富な機能性をもったAMPコンポーネントの提供により、リッチなサイトを作ることのできるプラットフォームとして進化しているとのことでした。
イメージギャラリーなら<amp-carousel>、フォームなら<amp-form>、タブ形式なら<amp-selector>、そのほか、<amp-bind>や<amp-list>などといった具合に、たくさんのコンポーネントが用意されています。また、<amp-script>でJavaScriptも使るようになってきているそうです。
なんとAMPでECサイトを作成したのが、アリババ系列の「AliExpress」。ページ表示時間が40%改善、CVRは20%増。Yahoo!台湾のヤフオクでは新規ユーザ数133%増、、売り上げ34%増という好成果を上げているとのことでした。
また、広告を表示している場合、広告の収益性も向上しているそうです。
Signed Exchangesに対応
さらに、Signed Exchangesに対応してコンテンツを配信できるようになり、これにより従来URLがGoogleのキャッシュサーバーのURL であったものが、独自ドメインの扱いになり、アクセス解析の不正確さなどが改善されそうです。
AMP for Email で動的メールを送受信
AMPの技術がメールに実装されるとこのように、メールの中で直接アクションを行えるようになります。Gmailで使いたい場合は設定で動的メールを有効にします。
AMP最新のプロジェクト、AMP Stories 登場！
リッチなビジュアルでストーリーを伝える新たな形式ということで「AMP Stories」がすすめられているとのこと。全画面で美しい画像でコンテンツを提供できるというもの。楽天レシピですでに実装されているのか、デモが紹介されていました。
気になるGoogle検索結果ですが、カルーセルとカードの2通りでAMP Storiesが表示されるとのこと。「桜 開花 AMP」で検索すると出てくるウェザーニュースのページがどうやらそれらしいです。
そして今後は、AMP Storiesだけを集めた専用のセクション「VISUAL STORIES」を実装予定で、「映画・ファッション・トラベル・テレビ番組・ゲーム・レシピ」この6つのジャンルに関するサイトが対象とのこと。まずは米国から、日本は未実装です。
AMPの情報については、4月に開催されたAMP Conf 2019や、amp.devのサイトおよび以下の動画が参考になりそうです。
PageSpeed Insights と Lighthouse
サイト改善をしてすぐPSIにかけても、速度スコアが変わらない。それもそのはず、PSIの速度スコアには、過去 30 日間のユーザー エクスペリエンス、実際にユーザからアクセスされた際のデータによる結果も含んでいますから、すぐに反映されなくて当然ということでした。
サイトに変更を加えたのですが、速度スコアや最適化スコアが変更されないのはなぜですか？
PSI に表示される速度のデータは、リアルタイムで更新されるわけではありません。レポートされる指標は過去 30 日間のユーザー エクスペリエンスを反映しており、毎週更新されます。最適化スコアについては、PageSpeed Insights では結果が短時間のみキャッシュされるため、最適化の推奨案を実装すると数分で変更が認識されます。
Wixが表示速度向上の新機能をリリースしたとき、「PSIのスコアに変化がない」とコミュニティで疑問が湧いていたのですが、そういうことです。
この場合は、Google Chromeの拡張機能「Lighthouse」を使うといいということでした。Lighthouseは、ローカル上で分析された予測値ですが、すぐ反映されるそうです。
そして、Google社員だとわかると質問したくなるのが「Google検索」の話題ですが、これについては回答できることが限られているそうで、ウェブマスターオフィスアワーに質問を投げて欲しいということでした。
http://goo.gl/IodO4y
Wixの高速化はどうすればいい？
セミナー自体はWordPressがメインの内容でしたが、さてWixユーザはどうすればいいのか。Wixの高速化については、2月に発表された「Wix Turbo」によりライブサイトの高速化がなされています。エディタについても5月頃にアップデートが行われていました。
AMPについては、ブログの設定からスイッチをオンにすることで、ブログのAMP実装が可能です。
コーディングのできないWixですので、触れる箇所はほとんどありませんが、コンテンツの構成を複雑にすることを避ける、画像を最適化する、フォントに注意する、などをWebPageTestでの分析結果を参考に行うといいでしょう。
個人的には、PSIについてのかねてからの疑問が解決されて本当にスッキリしました。また、さくらインターネットさんはやっぱり好きだなあと再認識したのでした。
登壇された、Kiteさん、谷口さん、小川さん、そして企画くださった福井さん、さくらインターネット社の皆さん、本当にありがとうございました！
［追記］Webパフォーマンス改善セミナー みんなのつぶやき togetter
［追記］さくらクラブ「Webパフォーマンス改善セミナー」（2019年6月15日）で紹介された関連資料まとめ #さくらクラブ #さくらインターネット
セミナーの様子・紹介されたスライド・チュートリアル・GitHubのコードなど
