Lighthouseを使ってVuex.jsで書いたポートフォリオサイトを爆速化する - Kekeの日記
本記事はVue.js Advent Calendar 2018の第3日目の記事です。 はじめに GCPの無料枠が終了したため、ポートフォリオサイトはクローズドしましたが、引き続き本記事はご覧いただけます。 私は以前、インターンシップなどの選考に備えて自分のポートフォリオサイトなるものを作りました。 しかし、あまりに速くデプロイしたかったことからパフォーマンスについて一切無視した結果、とてつもなく遅いサイトができてしまいました。 結局、他人に見せるには恥ずかしいサイトになってしまい、今回の記事で爆速にできればと思います。 サイトはこちらで、SEO対策やOGPも実装したので以下のように展開されます。 要約 自分のポートフォリオサイトがロードまで8秒近くかかっていたのがキャッシュ込みで0.3秒くらいになった クリティカルレンダリングパスを知ることが重要 Chrome DevToolを使い倒すとよ
GoogleによるWebサイトパフォーマンス測定ツール「Lighthouse」入門 | さくらのナレッジ
昨今ではWebサイトやWebアプリケーションに対し「適切にページが表示されるか」だけでなく、ロード時間の早さやアクセシビリティといった使い勝手の良さも求められるようになっている。これらは利用者の満足度向上だけでなくGoogle検索の表示結果にも影響するため、できる限り対応しておきたい。そこで今回は、Googleが提供するWebサイト/Webアプリのパフォーマンスやアクセシビリティ診断ツール「Lighthouse」を紹介する。 さまざまな指標による診断を手軽に実行可能できるツール「Lighthouse」 WebサイトやWebアプリケーションを構築する際には、かつてはどんなWebブラウザでも同じように表示され同じように動作することや、検索エンジンによって高く評価されるようなマークアップを行うことが求められていた。これらは現在でももちろん重要ではあるのだが、昨今ではそれに加えて使い勝手の良さも求
Chrome DevToolsを用いたメルカリWebのパフォーマンス計測 - Mercari Engineering Blog
フロントエンドチームの @urahiroshi です。Mercari Advent Calendar 2018 12日目を担当します。 今年の8月から12月にかけて，メルカリ・メルペイのフロントエンドチーム有志で「超速！Webページ速度改善ガイド」の社内輪読会を行いました。 この本の中で，「推測するな，計測せよ」という言葉が紹介されていますが，今回の記事は，輪読会で学んだことのまとめとして，Chrome DevToolsを用いてメルカリWebのパフォーマンス計測と簡単な分析を行ったものです。 なお，現在メルカリWebのアーキテクチャを刷新するための開発が進んでいるため，ここで計測したパフォーマンスの値は大幅に変化していく可能性が高いです。アーキテクチャの刷新後に振り返って見られる楽しみが増えることも、この記事を書いた目的の一つです。 計測方法，環境 計測はGoogle Chrome 71.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
