@maepon個人ブログです。2019年12月29日Catchpointによる表示速度検査を受けました遅くなって申し訳ありませんでした。Qiitaの記事ですAdventCarendarに参加するということで、Catchpointでの計測を行って頂きました。計測して頂くのはどのページにしようかと考えたんですが、弊社内で、アプリの紹介ページが重いという意見があり、せっかくの機会なのでそのページをということになりました。竹洞さんに連絡したら、「そのページまでの動線で計測したほうが良い」と言って頂き、動線の中で一番ボリュームが多い、ログイン→マイページ→アプリ紹介ページという動線で計測して頂きました。この導線で見るというのが、当初とは別の課題の発見につながったので、なるほど、流石だと感動しました。Catchpointのありがたいところ定時のチェックを行うのはPSIのスコアレベルなら行えますが(弊社は、定期的にPSIのAPIを利用してスコアを取得しています)この精度で見ることができないのでとてもありがたいです。実際の回線(今回はDoCoMo)やエミュレートした回線(ノイズが少ない)でのデータが見れています。このようなウォーターフォールも15分ごとに見ることができます。制作時にDevToolsでも確認できることはありますが、このように定期的に取れるのはこういうサービスでこそということですね。竹洞さんにいろいろ指摘をいただくありがたいことに、ご意見頂きました。DNSRoute53を利用することで出てくるレイテンシその場合のレイテンシは最低で約100ms以上サーバー返答時間(TTFB)改善の必要ありプログラムのチューニングが主になるHTTP/2利用しているいわゆる「つまり」は確認できたサードパーティーGoogleタグマネージャーKarte改善の要求をすべきCatchpointでわかったこと冒頭に書いたようにページに到達する導線で計測してもらって気づけた課題があります。それは、ログイン→マイページの動線でのサーバー待機時間についてでした。ログインの判定リダイレクトマイページのサーバー待機という流れが1.5秒近くかかっていました。言われてみれば確かにという問題ではあるんですが、改善ポイントとしてピックアップすべき事象ですね。本気で検討したい社内の議論に改めて上げていく最後に普段から竹洞さんの情報を見ている立場ですが、このような形でやりとりさせて頂きありがとうございました。これからも参考にさせていただいて、少しずつでもサービスの改善に努めていきます。Cardsのキャッシュ更新の方法を整理ちょっとオミカレの仕事でやったのでメモとしてまとめておきます。Cards使うこと多いと思います。2019いわゆるLP的な単発の場合、手でソースを書いたりするんですが、ちょいちょい間違えたりするじゃないですか、人類って(主語でかい)。Cardsに入れる画像はリンク先と同じドメインじゃないとダメというのを忘れがち)。あと純粋にURL間違えたりとか。Cardsに関連したmetaを直して、さて更新となるんですが、Twitterで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のキャッシュも書き換えられるということなんですね。Cardsの内容が更新されたので今後はこれでサクサク行けそうです。Console(新バージョン)Googleの検索結果の半分以上がモバイルファーストインデックス(以下MFI)になったそうです。Consoleを利用するとサクッと確認できるので紹介しておきます。新バージョンでの確認方法です。加わりましたはい、加わりました。2017年9月23日Photoshopの「アセットの初期設定の指定」にフォルダー名はいらないよ、という話もう、タイトルで完結っちゃ完結なんですが補足。2017年4月8日label要素はbuttonにも適用できるの?マテリアルデザインのスタイルガイドを見ていたら、ボタンの高さは36dpとあり、さらにクリッカブルな領域は48dpにするという記述を見つけました。https://material.io/guidelines/components/buttons.html#buttons-styleだとすると、button要素内に透明の領域を....、とかspanやdivなど親要素つけてそこに判定を....、というよりはlabel要素使うのがマークアップとしては素直かな?と思いました。2016の14日目の記事です。普段は受託でウェブサイトやウェブアプリケーションの制作を行っていますが、制作時には気をつけているつもりでも、やはり抜けもあります。余裕がなくなってくるとなおさらです。実際には実装屋のみでできる範囲には限界はありますが、それでも、実装屋でもなんとかなる範囲だけでもやろうと思った際に、コード書くときの心構えだけではなかなかうまく行きません。Toolsなどで一緒にチェックできるツールというのは、ひとつの助けになるだろうということで紹介します。