Catchpointによる表示速度検査を受けました

遅くなって申し訳ありませんでした。Webパフォーマンス Advent Calendar 2019 – Qiitaの記事です

AdventCarendarに参加するということで、Catchpointでの計測を行って頂きました。

計測して頂くのはどのページにしようかと考えたんですが、弊社内で、アプリの紹介ページが重いという意見があり、せっかくの機会なのでそのページをということになりました。

で、竹洞さんに連絡したら、「そのページまでの動線で計測したほうが良い」と言って頂き、動線の中で一番ボリュームが多い、ログイン→マイページ→アプリ紹介ページという動線で計測して頂きました。この導線で見るというのが、当初とは別の課題の発見につながったので、なるほど、流石だと感動しました。

Catchpointのありがたいところ

定時のチェックを行うのはPSIのスコアレベルなら行えますが(弊社は、定期的にPSIのAPIを利用してスコアを取得しています)この精度で見ることができないのでとてもありがたいです。

下は、First Contentful Paintの統計。実際の回線(今回はDoCoMo)やエミュレートした回線(ノイズが少ない)でのデータが見れています。

このようなウォーターフォールも15分ごとに見ることができます。

制作時にDevToolsでも確認できることはありますが、このように定期的に取れるのはこういうサービスでこそということですね。

竹洞さんにいろいろ指摘をいただく

ありがたいことに、ご意見頂きました。ざっとまとめると。

  • DNS
    • Route53を利用することで出てくるレイテンシ
    • その場合のレイテンシは最低で約100ms以上
  • サーバー返答時間(TTFB)
    • 改善の必要あり
    • プログラムのチューニングが主になる
  • HTTP/2
    • 利用している
    • いわゆる「つまり」は確認できた
  • サードパーティー
    • Googleタグマネージャー
    • Karte
    • 改善の要求をすべき

Catchpointでわかったこと

冒頭に書いたようにページに到達する導線で計測してもらって気づけた課題があります。

それは、ログイン→マイページの動線でのサーバー待機時間についてでした。

  1. ログインの判定
  2. リダイレクト
  3. マイページのサーバー待機

という流れが1.5秒近くかかっていました。

言われてみれば確かにという問題ではあるんですが、改善ポイントとしてピックアップすべき事象ですね。

これからの改善ポイント

  • サーバー返答時間
    • 現状、ページにより1000ms近く、またはそれ以上になっているので改善ポイントを探して対応していく
  • サードパーティー
    • 改善の依頼を継続して行う
    • 使い方を確認していく
  • フロントエンド
    • 効率的なHTML/CSS/JavaScriptの記述
    • 画像などのコンテンツの読み込み順を考えていく
  • DNS/CDNなど
    • AWS以外の選択肢(Cloudflareなど)も「あと100ms」ぐらいになった段階で検討していく
    • CDNは静的ファイルだけでなく、コンテンツキャッシュでも利用しているので、そのあたりも含めた検討が必要
  • スピード監視
    • 本気で検討したい
    • 社内の議論に改めて上げていく

最後に

普段から竹洞さんの情報を見ている立場ですが、このような形でやりとりさせて頂きありがとうございました。これからも参考にさせていただいて、少しずつでもサービスの改善に努めていきます。

第50回 岡山WEBクリエイターズ 開催に寄せて

大都会岡山 Advent Calendar 2019 – Adventarの11日分です。遅れてすんません。

今週の土曜日、2019年12月14日に『第50回 岡山WEBクリエイターズ「年末スペシャル2019」』が開催されます。書いてあるとおりで50回目なんですね。これは素直に大したものだと思っていますので、お祝いと宣伝を兼ねて投稿します。

ま、私も登壇するのですが。

岡山WEBクリエイターズの歴史

私が細々と言わなくても、ちゃんと開催実績のページがあるのでそちらを。

開催一覧 – 岡山WEBクリエイターズ -okaweb-

2010年の4月が初開催なんですね。もうすぐ10周年じゃないですか。私も勉強会の主催を行うこともありますが、継続して長く続けることって本当に難しいんですよね。それを成し遂げているだけでも拍手を送りたいです。

西日本のなかでもそれなりに歴史と実績のあるコミュニティとなっていて、岡山以外の人も参加しているのもとてもすごいことだと思います。

後藤誠さん

主催しているのは後藤さんです。後藤さんあってこその岡山WEBクリエイターズです。

後藤さん自身、「継続は力なり」とよく口にしていますが、岡山WEBクリエイターズがこれだけ続いていることを見ても見事に「継続は力なり」を実践しているんだなと思います。

小さいことは気にしない(様に見せている)リーダーらしいリーダーだなあと見てて思いますね。

岡山WEBクリエイターズと私

私自身もとても縁が深く、ホームと思っているコミュニティです。もともとは立ち上げ前に後藤さんから構想を聞いて「とても素晴らしいことだと思う、できることがあれば何でもするよ」と言ったことが始まりで、第2回から登壇しています。

岡山WEBクリエイターズで得たもの

ここから自己啓発セミナーの宣伝文句みたいなのになりますが、実際に得たので仕方がないんですよ。はい。

仲間

初期から付き合いのある人達とは一緒に成長していった感じですし、それ以降も最近に至るまでさまざまな人達と知り合うことができました。同じ会社働いた人もいましたし、仕事を一緒にやる人もいたり、それ以外も意見を交換したり、知見を共有できる人たちのいることのなんと心強いことか。

チャンス

岡山WEBクリエイターズに登壇することからさまざまなチャンスを得ることができました。ここでの登壇がきっかけになって、CSS Niteでも登壇をするようになり、ほかのコミュニティでも登壇できるようになり、全国色んな所でお話できるようなりましたし、書籍の執筆にも加わったりしました。

そういったことが仕事や転職に効いてきたので、実益も伴ったチャンスを与えてもらいました。

これからに期待したいこと

とりあえず、「継続は力なり」ということで続けていってもらいたいですね。そこに参加している中でまた仲間が増えたりチャンスを得る人たちが増えていくといいなと思っています。

なにはともあれ50回目、おめでとうございます。

Twitter Cardsのキャッシュ更新の方法を整理

ちょっとオミカレの仕事でやったのでメモとしてまとめておきます。

Twitter Cards使うこと多いと思います。こんなやつですね。

いわゆるLP的な単発の場合、手でソースを書いたりするんですが、ちょいちょい間違えたりするじゃないですか、人類って(主語でかい)。

CDN使ってて間違えてそっち書いたりとか(Twitter Cardsに入れる画像はリンク先と同じドメインじゃないとダメというのを忘れがち)。あと純粋にURL間違えたりとか。

そこでTwitter Cardsに関連したmetaを直して、さて更新となるんですが、TwitterでCardの情報がキャッシュされているので、まあ、反映されない。

https://cards-dev.twitter.com/validator

Card Validator通すとキャッシュクリアされるってよく言われていますが、まあ、されない。「それでしばらく待ちましょう」ってことなの?と思いつつも本家のドキュメント見ると書いてました。ちゃんと明記してました。

https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/troubleshooting-cards#refreshing

要は、bit.lyで対象のURLのショートURLを作成して、そのbit.lyで生成したURLをTweetすると、元URLのキャッシュも書き換えられるということなんですね。

実際にサクッとTwitter Cardsの内容が更新されたので今後はこれでサクサク行けそうです。やはり頼るべきは公式のドキュメントですね!