「ウェブに関する指標」から確認できる問題は、問題となっているURLがグループで表示されますが、具体的なURLをクリックしていくと、「デベロッパー向けリソース」から、GoogleのLighthouseの結果(スコア含む) が即時確認できますので使っていきます。 特にNext.js製のプロジェクトに関して対処したポストが比較的少なかったため、是非記事を書いてみたいと思いました。 いきなり結論 私の場合は、CDNから外部読み出ししているCSSをサイト内に設置したCSS呼び出しに変更すると劇的に改善しました！ 結論から読みたい方はこちらへどうぞ！ 具体的な作業内容 確実にこれを修正すればLCPの問題は解決するというのをGoogle側では教えてくれませんので、できることをこなしていきます。 一番パフォーマンスにマイナスの影響を与えているのは Javascript CSS のいずれか、または両方が同期
Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. To help you create the best possible experience, use the core and optimal checklists and recommendations to guide you. Core Progressive Web App checklist The Progressive Web App Checklist describe
Next.js でシステム開発しています。 ログイン機能や記事を表示するなど、意気揚々と色々な機能を構築してたんです。 でもある日、気がついちゃいました。 スーパーリロード後 → 「読み込みちょっと遅くない……？」 そう思い、LightHouse で調べて見た結果が以下です。 あと一個７が付いてくれたら、パチスロではハッピーな数字ですが、Web アプリのパフォーマンとしてはいただけません。 LightHouseってなに？ ウェブアプリの品質をチェックするためのツールで、Chromeの拡張ツール及びNodeでのCLIツールとして、Googleが提供をしています。 LightHouseでは、以下５つの項目別に１００点満点で点数が付けられます。 Perfomance (パフォーマンス) サイト内のスピードに関する評価です。 ページの読み込み速度や、ユーザーが操作することで発生するレスポンス速度。
この記事は2023年5月、リリースバージョンv0.8.1時点のものです。 最新バージョンは https://github.com/harlan-zw/unlighthouse を確認してください。 概要 unlighthouseは複数ページを一気にlighthouseでscanして、計測結果を記録しているライブラリです。 ただLighthouse感覚でそのまま実行するとSPAが計測されずにSSRのみが計測されるだったりと、知らないとハマるポイントがあるので、紹介します。 なおこの記事ではCLIでの利用を前提としています。 利用結果についてはGigazineで取り上げられた記事が詳しいので、そちらもご参照ください。 デフォルトの設定値を知る 何も設定しない場合のデフォルトの計測項目です。 この項目は後述する設定値で切り替えることが出来ます。 特に気を付けておく項目を抜粋します。 SSRのみ計
こんにちは、新規事業統括部 ProfllyチームでProfllyの開発を担当していますおーしろです。 プロダクトが成長していくにつれてコード量や利用するライブラリが増え動作がもっさりと遅くなってしまうことがあります。 特にSPAは初回ページ読み込み時にコンテンツを一気にダウンロードするため時間がかかることがあります。 ProfllyのフロントエンドはNuxt.jsのSPAで開発されており、機能が増えていくにつれてそのような傾向が見られたためフロントエンドのパフォーマンスの調査を行いました。 その中で利用したツールや調査方法などを記載しました。 調査に利用するツール Lighthouse Webpack Bundle Analyzer LighthouseはGoogleが提供しているWebアプリのパフォーマンスなどを計測するサービスです。またパフォーマンスだけでなくSEOが最適化されているか
Lighthouse is an open-source, automated tool to help you improve the quality of web pages. You can run it on any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. Give Lighthouse a URL to audit, it runs a series of audits against the
以前作成した冷蔵庫マネージャー、レビューとリファクタリングをしようしようと思いながら後回しになっていたのですが、つい先日参加したイベントでAIとのリファクタリングのコツを教えてもらったので、教えてもらったことをもとにやってみることにしました。 前提（例：あなたは〜です） 目的（例：これから〜を実装します） 前準備（例：まず〜を把握してください） タスク（例：調査結果をマークダウンファイルにしてください） 制約（例：コードの変更を禁止する など） これを意識してリファクタリングをしていきます。 ちなみに今回もCursorとペアプロ形式で進めています。 1. ドキュメントを作る 生成されたコードを何の情報もなく読んでいくのは根気がいります。ということで、まずは構成とかパッケージをドキュメントに起こしてもらいます。 これをすることでCursorでチャットを新しくした場合でも「これも参照してね」で
機械学習をやっている人なら誰もが遭遇したであろうこの光景 (※写真はPyTorchのLanguage ModelのExampleより) Pythonのargparseでシェルから引数を受け取りPythonスクリプト内でパラメータに設定するパターンは、記述が長くなりがちな上、どのパラメータがmodel/preprocess/optimizerのものなのか区別がつきにくく見通しが悪いといった課題があります。 私は実験用のパラメータ類は全てYAMLに記述して管理しています。 YAMLで記述することでパラメータを階層立てて構造的に記述することができ、パラメータの見通しがぐっとよくなります。 preprocess: min_df: 3 max_df: 1 replace_pattern: \d+ model: hidden_size: 256 dropout: 0.1 optimizer: algo
🐉 Automate Browser-based workflows using LLMs and Computer Vision 🐉 Skyvern automates browser-based workflows using LLMs and computer vision. It provides a simple API endpoint to fully automate manual workflows on a large number of websites, replacing brittle or unreliable automation solutions. Traditional approaches to browser automations required writing custom scripts for websites, often rely
Ultimate Guide to Visual Testing with Playwright February 28, 2024 As your web app matures, it becomes challenging to ensure your GUI doesn’t break with any given update. There are a lot of browsers and devices, and countless states for every one of your components. Unit tests ensure your code remains consistent, and E2E tests will ensure your system remains consistent, but neither will catch visu
マルチクラウド展開にまつわる既成概念を覆すより データ転送では、特に長距離の場合にレイテンシ（遅延）が問題になることがありますが、現在はすべてのクラウド・プロバイダーがそれぞれの物理インフラストラクチャを互いの近くに配置（専門用語では「コロケーション」）しているため、これはさほど問題となりません。この近接性（場合によっては同一コロケーション施設内の別の部屋）は、クラウド間のレイテンシがミリ秒単位であることを意味します。それに加え、クラウド・データセンター・リージョンは世界中で増加しており、クラウド・リージョン間の距離は縮まっています。 という事で、レイテンシ(遅延)について、まとめてみてみます。 ■ Agenda レイテンシ(遅延)とスループット(帯域幅) レイテンシと TCP の動作 帯域幅遅延積(Bandwidth-Delay Product) TCP Window Size の調整と
最近は Python のテストフレームワークとして pytest がデファクトになりつつある。 今回は、そんな pytest のプラグインの一つである pytest-benchmark を使ってベンチマークテストを書いてみることにする。 ここで、ベンチマークテストというのはプログラムの特定部位のパフォーマンスを計測するためのテストを指す。 ベンチマークテストを使うことで、チューニングの成果を定量的に把握したり、加えた変更によって別の場所で性能がデグレードしていないかを確かめることができる。 なお、チューニングする前のボトルネック探しについては別途プロファイラを使うのが良いと思う。 blog.amedama.jp blog.amedama.jp 使った環境は次の通り。 $ sw_vers ProductName: Mac OS X ProductVersion: 10.14.4 BuildV
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
