はてなブックマーク

トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの

先日03/29（火）に行われた「Fastly User Meetup #4」で僕と いわくら君 の2人がトークしてきました。 発表者5人いる中でトラベルブックが2人です。司会の方曰く「トラベルブック大活躍」です。 さて、今回のミートアップ、僕ら以外のトークも含めレポートしてみます。 Fastly User Meetup #4は3/29（火）19時から21時までオンラインで開催されました。 「User Meetup」とあるように今回はFastlyオフィシャルのものではなく、ユーザーコミュニティによるミートアップです。 元Fastly、現HashiCorpの @jrsyoさん さんが連絡役になってくれました。 登壇するキッカケがありまして、トラベルブックを担当してくれてるFastlyの中の人から「登壇してしてもらえないか？」との嬉しい連絡を受けました。そこで、Fastly導入をメインで担当して

トラベルブックでは「スピード改善」という名の下「Core Web Vitals」のスコアを上げる努力をしています。Core Web VitalsというとLighthouseのスコアがいかに「100に近いか？」が焦点になりやすいのですが、本来はユーザーの環境でいかに「速いか？」が重要です。これはフィールドデータと呼ばれています。そこで今回は、フィールドデータとはなにか、ラボデータとの比較、確認方法、スコアを上げる方法などを我々の理解の範囲で綴っていきます。 Lighthouseのスコアが全てではない Core Web Vitalsと聞くとあの「緑色の100」が浮かびます。 我々は「緑色の100」を目指して、TTFBを短くし、ヒーロー画像をpreloadし、width/heightを指定してレイアウトシフトをなくします。 これはGoogleのLighthouseというソフトウェアが算出したスコ

本番のサイトを眺めていて、「あーここのHTMLこうしたら、もっと速くなるのになー」って思う時ありますよね。 僕はあります。でも、検証するだけのために、プロダクトのコードを直接いじるのは大げさ。 そんな時に、wgetとmirrorというコマンドを使ってページをダウンロードして「ほんの少し」HTMLを変更しています。 紹介します（追記にLocal Overridesという「そのものズバリな」Chromeの機能も紹介してます）。 最近あった話です。特にCore Web Vitalsとか速度改善について。 トラベルブックのとあるページのスコアが落ちていて、Chrome DevToolsで観察してみると、どうもYouTubeの埋め込が足を引っ張っている。 表示領域外にも関わらずiframeの中身がロードされています。 これは直したい（本来なら本番へ上げる前に気づく仕組みを作りたいのですが、一旦置いて

いわくら君が書いてくれた通り 、トラベルブックではFastlyを導入しました。Fastlyについて初めて分かったことがたくさんありました。列挙してみたら30個もあったので、一個ずつ紹介してみることにします。 そもそもFastlyとは そもそもFastlyとはCDNのサービスです。現在では後述するCompute@Edgeを主力としたサーバーレス環境を推していますが、とにかくCDNです。今回は www.travelbook.co.jp ドメイン全てに対して適応し、全てのHTMLページをFastly経由にしました。 もともとVarnishでページをキャッシュしていた部分をFastlyに置き換えることで冗長化・安定化、また、パフォーマンスアップを図ります。 加えて、これまでキャッシュの対象外だったページも、この際TTL付きでキャッシュする、というのが今回やったことです。 詳しくはいわくら君の書いた

2021年11月9日、トラベルブック( www.travelbook.co.jp )ドメインに対してFastlyを適用しました。 トラベルブックでのFastlyの活用方法、設定、運用について記載します。 Fastlyとは？ CDN、画像の最適化、ビデオとストリーミング、クラウドセキュリティ、負荷分散などを提供してくれるサービスです。 Fastly公式 今回の記事ではCDNについて語ります。 Fastlyを導入した経緯 トラベルブックではバックエンドレスポンスの高速化、サーバー負荷を減らす目的で Varnish をEC2に入れて使用していました。 トラベルブック内のページ(記事やLP)は頻繁に内容が変わらないのでキャッシュと相性が良く、日に日に対象ページが増えてきました。 そしてふと思いました。 Varnishサーバーがダウンしたらサイトの大半がダウンするのでは？？ はい、そうです。1つのE

Slackの「次世代プラットフォーム」がこの記事を書いてる2週間ほど前、しれっとパブリックベータになりました。 今回はこの公開したてのプラットフォームでアプリをつくってみたので、それを紹介しつつ、感想を書きます。

「Early Hints」はリソースを先読みするための新しい仕組みです。 今回は Cloudflare の機能を使って、自分たちのサイトを題材に Early Hints を試してみた件について紹介します。 Early Hints とは？ Early Hints とはリソースを先読みするための仕組みです。 Server Push が否応なしにリソースを「プッシュ」するのに対し、 Early Hints はリソースの URL だけを伝えるので、 ブラウザが賢くキャッシュ管理ができたりと効率がよいです。 例えば Web ページだと、サーバーから HTML を受け取る前にアセットの画像や CSS を優先的にダウンロードするといった使い方です。 HTML を生成するのに時間がかかる場合などは特に有効でしょう。 具体的には HTML がステータス「200」で返る前に、URL が書かれた「103」という

トラベルブックでは CDN に Fastly を使っています。 その Fastly が提供する Compute@Edge が一般でも使えるようになりました。今回は Compute@Edge とはなにか、といった概要と、実際に「Slack スラッシュコマンド echo 」を作ってみた件、それで分かったことを紹介してみたいと思います。 Compute@Edge とは？ Compute@Edge とは、Fastly の CDN エッジでスクリプトを実行できる環境のことを言います。 去年の 11 月に一般ユーザーに開放されました。 誰もが無料で Compute@Edge を試せるチャンス | Fastly Compute@Edge は一般的に「エッジコンピューティング」と呼ばれるもので、同様には以下があります。 Cloudflare Workers Vercel Edge Functions AW

トラベルブックでテックブログを始めることにしました。 今回はどのようにテックブログを作ったのか。 方針、技術スタック、実装、執筆フローについて書いてみます。 テックブログを始めます トラベルブックでスーパーバイザーをやってる yusukebe です（スーパーバイザーって聞き慣れないので「なんだそれ？」って思ったかもしれませんが、それについては今後本ブログで書いていければいいなと思います）。 さてあらためて、トラベルブックでテックブログを始めます。 今回は、なぜテックブログを始めるのかという「Why」や「What」は置いておいて、どうやって作ったかという 「How」の部分、つまりシステムの話を中心に書きます。このブログは見ての通り、たった今、始まったばかりなので、これがイケてるかどうかの判断はまだできません。でも、他社のものと比べてちょっとだけ変わった構成になっています。興味を持っていただけ