タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
小西秀和です。 現在、AWSの静的ウェブサイトホスティングで入門するAWS Amplify(Console、CLI) - 概要編などAWSのサーバーレスな静的ウェブサイトホスティングをテーマにしたブログ記事を執筆しています。 今回もAWSは関係しますが、フロントエンドに近い話題で、最近動向が本格的になってきたと感じているPWA(Progressive Web Apps)について私が自主的に学習した内容を記事にしてみました。 私の場合はAmazon S3、Amazon CloudFront、AWS Certificate Manager、Amazon Route53を使用した静的ウェブサイトに最小限のコンテンツをデプロイしてPWAの実装について学習しました。 また、Lighthouse Report ViewerというPWAなどの品質テストができるツールを使用して、PWAの基準に合格し、Pe
トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの
Puppeteer + Lighthouse + GitHub Actions を使って Web アプリのフロントエンドパフォーマンスを定期計測するプロジェクトを作ってみたら良い感じだったので紹介です。 何を作った? このように GitHub Actions 上で 認証付きの Web アプリに対して Puppeteer 介し Lighthouse を定期実行し、結果を Datadog に送信するプロジェクトを作りました。 実際にそのプロジェクトの計測値を使った Datadog のダッシュボードはこちらです。 Webperf の主要指標をページ別に時系列で表示しています。 サンプルプロジェクトはこちらにあります。 以降で実装について簡単に解説します。 Puppeteer + Lighthouse によるパフォーマンス計測 Puppeteer + Lighthouse によるパフォーマンス計測
こんにちは!!!スマートキャンプでエンジニアをしている吉永です! 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaS(以下、BOXIL)の開発にフロントエンド、バックエンド問わず携わっています。 恐らく新年一発目になる弊社テックブログの記事は私の記事ということで、今年もよろしくお願いいたします。 はじめに なぜパフォーマンス改善を行ったのか Core Web Vitals(以下: CWV), Lighthouseとは? CWVとは Lighthouseとは CWV & Lighthouseの改善結果 サービスページ(改善前) サービスページ(改善後) レビューページ(改善前) レビューページ(改善後) 改善をするにあたってチームで行ったこと コミュニケーション的なお話 タスクの洗い出し、調査方法 優先順位付け DatadogやSea
こんにちは!ぬこすけと申します! Reactを使って個人で本のおすすめ度を点数化して紹介するサイトを作っています。 ひたすら本のリストページのパフォーマンスチューニングをしていたのですが、LightHouseのパフォーマンススコアで下記のように爆上げすることができました! Before パフォーマンススコア:30前後くらい ※表示する本のリストは10件 After パフォーマンススコア:90前後くらい ※表示する本のリストは400件程度 (2020/8/12に計測) 今回の開発で得た経験を元に、Reactにおけるパフォーマンスチューニングのノウハウをご紹介したいと思います! なお、導入効果と導入工数、おすすめ度を主観で5段階でつけさせていただきました! なお、React Hooksをはじめ、2020/7/28にリリースされたNextJs 9.5など、最近の技術も活用しているので、そこらへん
こんにちは、ライトハウスでソフトウェアエンジニアをしている北添です。 今回は「今ふたたびのAnsible入門」と題しまして以下の内容を書きます。 なぜ今ふたたびAnsibleに入門するのか 基本的な使い方 ベストプラクティスに則ったAnsibleのコード設計 なぜこの記事を書いたか 理由は2つあります。 1つ目は、IoTのプロダクトでAnsibleがどのように活躍するのか、ご紹介したかったことです。 私が勤める株式会社ライトハウスは、水産業界の課題解決のために船舶のIoT化を推し進めています。 船舶からセンサーを通じて情報を吸い上げ、クラウドへ送信することでIoT化が達成されます。 通常、センサーで取得したデータは直接クラウドへ送信されるのではなく、船内のサーバーに一度集められた後送信されます。 つまり、IoTの文脈ではオンプレミスサーバーが必要であり、オンプレミスサーバーが必要な以上、構
「本屋lighthouse幕張支店」を運営する関口竜平さん。最初は祖父が持つ畑に建てた小屋からスタートした。店内には、小説や人文書などが充実している。売り上げを追うことや、書店の存続を目的にするのではなく、関口さんが届けたいと思った本を並べている。ヘイト本を置かないのも、関口さんがこだわったポイントだ。 深刻な出版不況に突入した2000年代。ジャーナリストの故・佐野眞一は、2001年に刊行された『だれが「本」を殺すのか』(プレジデント社)で出版不況の構造的な問題について言及した。その後も、本を巡る状況は厳しくなる一方だ。それでもさまざまな形で思いのある本を届ける挑戦は、日本各地で起こっている。大手チェーンとは異なる品揃えや営業スタイルで勝負する独立系書店を営む挑戦者たちは、今の本を取り巻く状況をどのように見ているのだろうか。(本文は敬称略) (浜田 敬子:ジャーナリスト) 減り続ける書店の
スマートキャンプの笹原です。 みなさんはWebサイトの、特にフロントのパフォーマンス改善を日頃から行っていますか? 常に意識しているという方もいれば、気が向いたときにたまに見てみるなんてこともあるんじゃないかと思います。 今回はそんなパフォーマンスに常に意識を配れるように、毎日Lighthouseを叩いてみたのでその構成を紹介したいと思います。 Lighthouseとは 要件 処理の流れと制約 実際の構成 1. 定期的にCloud Tasksに各ページごとのTaskをEnqueueする TaskをEnqueueされるCloud Tasksのキュー作成 TaskをEnqueueするFunctionの作成 2. 各ページにLighthouseを実行しBiqQueryに結果を格納する 終わりに Lighthouseとは まずはLighthouseについて簡単な説明です。 Lighthouseとは
佐久間宣行が星野源&若林正恭との『LIGHTHOUSE』で感じた“セルフケアの重要性” 「共感性が高いことは大事だが、この時代に生きるのは大変」 星野源と若林正恭によるNetflix番組『LIGHTHOUSE』が大きな話題となっている。全6回、月に一度のふたりが“悩み”をテーマに語り合う様子を、半年間記録したトーク番組だ。 星野と若林はこれまで、『あちこちオードリー』(テレビ東京)での星野のゲスト出演や、星野源オフィシャルイヤーブック『YELLOW MAGAZINE 2021-2022』での対談、『星野源のオールナイトニッポン』で披露された楽曲「Pop Virus feat.MC.waka」、オールナイトニッポン55周年記念ジングルなど、数々のコラボレーションと会話を続けてきた。 若き日の葛藤、人間関係の苦しみ、社会への意識、クリエイターとしての内省など、共鳴するふたりが紡ぎ出す言葉に注
以下、菅義偉『政治家の覚悟』(文春新書版)とその刊行元である文藝春秋への抗議です。シンプルに言って、絶対に許される行為ではないです。 大変わかりやすい。行動に記述を合わせたということか。 菅首相の著書、改訂版が発売 公文書管理の記述消える:朝日新聞デジタル https://t.co/YCfJJvolmy — 岩永直子 Naoko Iwanaga (@nonbeepanda) October 19, 2020 残していないので、「残すのは当然」を残さずに削除。 「政府があらゆる記録を克明に残すのは当然で、議事録は最も基本的な資料です。その作成を怠ったことは国民への背信行為」を削除。 https://t.co/L0DULOgAFE — 武田砂鉄 (@takedasatetsu) October 19, 2020 削除する箇所が凄いな。公文書なんぞ残さんぞの強い意志。→「政府があらゆる記録を克明
例えばこのコードでは、PostFeedをローディングしてる最中は「Loading feed...」っていうローディングUIがまず表示され、読み込みが終わったらコンポーネントが描画される、というようなことができます。 このように、App Routerは非常に大きな可能性を秘めているのですが、これからのNext.jsの開発スタイルとかがガラッと変わるんじゃないかということで、皆さん激震が走ってるというところですね。 白石: それほどの変更だとすると、マイグレーションが必ず話題になると思うんですが、どうなるんでしょうか? 古川: マイグレーションについてのドキュメントはあるのですが、実際に移行するのはかなり大変です。 Pages Routerも残るので、無理にApp Routerに書き換えなくてはならないというものでもない。 ただ、これから追加される新しい機能のほとんどがApp Routerベー
Performance monitoring with Lighthouse CI Stay organized with collections Save and categorize content based on your preferences. How to add Lighthouse to a continuous integration system, such as GitHub Actions. Lighthouse CI is a suite of tools for using Lighthouse during continuous integration. Lighthouse CI can be incorporated into developer workflows in many different ways. This guide covers th
こんにちは、スマートキャンプのエンジニア中川です。 本記事は「スマートキャンプ Advent Calendar 2019 - Qiita」の2日目の記事になります。 突然ですがみなさん、Webサイトのパフォーマンス計測はお好きですか? 好き嫌いはさておき、私は以下のような課題感を前々から持っていました。 顕在化してきたタイミングで問題となる いつパフォーマンスが悪化したのか、継続して悪化し続けているのかなど、情報量がすくない状態から対応をはじめなければならない 調査が長くつらいものになる なぜパフォーマンスが悪いのかわからない ある特定のコミットで著しく悪化したのか?どういう変更をするとスコアが遅くなりがちなのか?など知見が貯まらない どれもあるあるな悩みかと思いますが、タイムラインをチェックしていたところたまたまLighthouse CIの存在を知り、これらの課題を解決出来そうだったので
JSer.info #519 - Lighthouse 7.0.0がリリースされました。 Release v7.0.0 · GoogleChrome/lighthouse Node.js 10のサポート終了、PWAカテゴリの変更、アクセシビリティのテストに使うaxe-coreのアップデート、nightlyをlighthouse@nextとしてインストールできるようになるといった変更が含まれています。 また、スクリーンショットがフルページとなりレポートのファイルサイズが増加しています。 ReactからReact Server Componentsと呼ばれる実験的な実装とRFCが公開されています。 Introducing Zero-Bundle-Size React Server Components – React Blog RFC: React Server Components by j
Find your way with Lighthouse Treemap. Photo by Raphael Schaller on Unsplash Lighthouse Treemap is a new tool that helps us evaluate the efficiency of the JavaScript on our websites. It shows us: The bytes of JavaScript by file If sourcemaps are enabled, the bytes of JavaScript by module Bytes of JavaScript used versus unused (execution) for page load JavaScript is often the biggest culprit when i
Google Chrome 60からデベロッパーツールのAuditsタブからLighthouseが簡単に実行できるようになっているので使い方を見ていく。 Chrome89で日本語化されるので、この記事の内容とはだいぶ差異が出てきそう。 パフォーマンス測定に必須のLighthouseがChrome 89で日本語化される Chrome79から各評価項目の参照URLがだいぶ変わってしまっている。web.dev内のページに置き換わっているようだ。 Chrome 103からTimeSpan、Snapshotレポートが追加になり、ユーザーが操作した状態のページの分析も行うことが出来るようになりました。 DevTools の新機能 (Chrome 103) Lighthouseとは Lighthouseとはウェブページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラク
2020年2月8日にTSUTAYA O-EAST/TSUTAYA O-WEST/duo MUSIC EXCHANGEにて開催したsora tob sakana 主催ライブ『天体の音楽会 Vol.3』から「Lighthouse」をお届けします。 「Lighthouse」 作詞・作曲・編曲:照井順政 -Concert Movie- Director/Edit:leohmd Camera crew:ADC.inc ===================== ===================================================== 【最新リリース情報】 ■■3rdシングル「flash」■■ 発売日:11月13日(水) <アーティスト盤> =CD= 1.flash (TVアニメ「ハイスコアガールⅡ」オープニングテーマ) 作詞・作曲・編曲:照井順政 2.パレード
CARTA HOLDINGSで働くエンジニアたちにCTOが「最近何やってるの?」をざっくばらんに聞いていくシリーズです。今回はCARTA HOLDINGS CTOのすずけんが、事業子会社のひとつであり「神ゲー攻略」などのメディアを運営するLighthouse StudioでCTOを務める海老原さんに話を聞きました。 インタビュアー:鈴木健太 Twitter ID @suzu_v(写真右) 株式会社CARTA HOLDINGS 執行役員CTO / 株式会社fluct取締役CTO。社内では「すずけん」と呼ばれる。「みんなのGo言語」「データ分析基盤入門」共著者。ウェブ技術全般に明るい。ポッドキャスト「ajitofm」をやっています。 インタビュイー:海老原昂輔 Twitter ID @co3k(写真左) 株式会社CARTA HOLDINGS / 株式会社Lighthouse Studio取締役
Some highlights of scoring changes between Lighthouse versions 5 and 6: TTI's weight has been reduced from 33% to 15%. This was in direct response to user feedback about TTI variability, as well as inconsistencies in metric optimizations leading to improvements in user experience. TTI is still a useful signal for when a page is fully interactive, however with TBT as a complement–variability is red
Googleなどの検索エンジンで上位に表示させるためには、質の高いコンテンツであることはもちろん、ページが表示される速度や、WebサイトへアクセスするユーザーやGoogleクローラーなどに対して、ページが正確に表示されているかなど、Webサイトの使いやすさ(ユーザビリティ)も非常に重要です。 今回は、Webサイトの評価をチェックすることができる「Lighthouse(ライトハウス)」について、実際にmicroCMSブログをチェックした結果と合わせてご紹介します。 Lighthouse(ライトハウス)とは?Lighthouse(ライトハウス)は、Googleが無料で提供しているWebサイトを分析・診断するための機能です。 自身のWebサイトを、 「パフォーマンス」 「ユーザー補助」 「おすすめの方法」 「SEO」 の4つの項目ごとに、Google独自の基準でチェックできます。 簡単にコンテン
Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites. Lighthouse 10 is available immediately on the command line through npm and in Chrome Canary. It will land in Chrome stable in Chrome 112 and in PageSpeed Insights in the coming weeks. Scoring changes The venerable Time To Interactive (TTI) metric is being re
Netflixのオードリー若林さん×星野源さんのトーク番組 この組み合わせでトークが見られるなんて!(^^)! (多分、今Netflixで一番観られている番組な気がします) もともとオードリーファンで特に若林さんのファン オールナイトニッポンはリアルタイムじゃないけど聞いてる 「あちこちオードリー」も、もちろん毎週観てる (今年はオンラインライブも観ようと思っている!(^^)!) 何が良いって トーク内容が刺さる そしておしゃれ ネタバレになるので、これ以上内容には触れないようにと思いますが 2人の言ってた話が刺さりまくる 自分の「素」をさらけ出して、それが「かっこいい」って なぜなんでしょうね 不思議です 急に聞きたくなったのが 星野源さんがバナナマン日村さんの為に作ったバースデーソング 毎年誕生日に日村さんに曲をプレゼントしてるけど 9年前の曲が一番好きです(愛が詰まっている曲です)
Core Web Vitals とはlink 最近のフロントエンド周辺では Google が提唱した Web Vitals と呼ばれる指標が非常に注目されています。 これは Web で多くのユーザーが快適なユーザー体験を得るために、こういったポイントに特に気を使いましょう、というものを数値化したものです。 この中でも特に重要と定められている “LCP (Largest Contentful Paint)”, “FID (First Input Delay)”, “CLS (Cumulative Layout Shift)” の 3 つは Core Web Vitals と呼ばれています。 それぞれの観点を簡単に説明すると次のようになります。 LCP: 重要な要素がどれだけ早く読み込まれたか FID: 最初の入力ができるまでにどれくらいかかったか CLS: がくっとレイアウトが変わることがな
How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>. Let’s see what Lighthouse has to say about this workflow.
こんにちは、株式会社ライトハウスでエンジニアをしている平塚です。 今回はサウナで分析基盤を作った話を致します。 なぜサウナなのか 休憩時間に本気のリフレッシュできるからです。 逆に長時間働き過ぎると眠くなってくるので(個人の主観)夢中になってやりすぎ防止出来る面は 良いかなと思っています。 分析基盤を作成した場所 今回利用させて頂きました施設は両国湯屋江戸遊 です。 両国の江戸遊を選択した理由は複数あるのですが、以下の通りです。 駅近(両国駅徒歩5分) 提携駐車場有り 湯船ワークスペース サウナ会議室(ホワイトボード&防音) 会議室の利用 会議室は当日に伺うと埋まっている事が多いです、 事前予約が可能なので予約することをお勧めします。 サウナの種類 男湯には以下2種類のサウナが用意されています。 フィンランドサウナ(90度前後) 中温サウナ(75度前後) 水風呂は1つあり、18度くらいに設
JSer.info #655 - Lighthouse v11.0.0がリリースされました。 Release v11.0.0 · GoogleChrome/lighthouse Node.js 16のサポート終了、デフォルトでは使われてなかったresource-summary/service-worker/first-contentful-paint-3gのAuditを削除などの変更が含まれます。 また、INPのAuditがStableへと移行されています。 Astro 2.10がリリースされました。 Astro 2.10: Persistent State in View Transitions | Astro Astro 2.9で実験的にサポートされたView Transitionsに加える形で、指定した要素を永続的にするtransition:persistディレクティブが追加されてい
Web制作会社 シロクロ Web制作に関するブログLighthouseのスコア改善で100点を目指した対策 Lighthouseのスコア改善で100点を目指した対策 2020年6月17日 Lighthouseとは、Googleが提供しているChromeの拡張機能で、指定したURLのパフォーマンスに関する採点とレポートを生成してくれるツールです。スコアは一つの基準なので、高ければ良い、低ければ悪いとまでは思いませんが、パフォーマンス項目はページの読み込み速度に、アクセシビリティ項目は扱いやすさに影響しますので、ユーザーの操作・体感に関わる部分は対応しておくべきだと思います。 似たサービスのPageSpeed InsightsはPerformanceだけを分析してくれますが、LighthouseはPerformance、Accessibility、Best Practices、SEO、Prog
YouTube埋め込みって、するだけでLighthouseスコアが低下して悲しい気持ちになりますよね。なので研究としてLighthouseスコアを低下させない対策を調べたり試しました。最終的に、特定のケースでのみ低下不可避という結論に至りました。 結論 YouTube埋め込みがファーストビューにあり、スマホ対応も必須な場合、Lighthouseスコアの低下は避けられない ※もし回避する方法を見つけている方がいれば教えてください 検証結果 以下のサイトとGitHub Repoに公開済みです。サイト内、コード内に説明は特に無いので本記事の内容と合わせて見ていただければと思います。 前提知識 YouTubeをiframeで埋め込んだだけで、Lighthouseのスコアは大幅に低下する Playerに関するJavaScriptがダウンロードされ、LCPに影響するため しかもファイル数も多く、1ファ
本屋のある島を1人で訪ねている。 2006年に創刊された『LOVE書店!』というフリーペーパーのために、全国の島を巡っては本屋のドアをガラガラと開けてきた。 足かけ16年、北は礼文島から南は母島、西は与那国島まで色々訪ねてきたが、ここでは「離島じゃない本屋」、つまり街の本屋や村の本屋を中心に紹介していこうと思う。 今回は千葉市にある、lighthouseという本屋に行くことにした。 2019年夏、出版ジャーナリストの石橋毅史さんと、作家の温又柔さんのイベントの打ち上げで私は、1人の若者に出会った。若くないかもしれなかったが、ヤングに見えたのだ。彼は当時「千葉で書店をやっているけれど、別の書店でも働いている」というようなことを言っていた。その彼=関口竜平さんの店が、このlighthouseだった。 住宅街に鎮座する3色の小屋 幕張本郷駅から京葉道路を横切り、10分ほど歩く。すると住宅街の一角
Lighthouseは、指定したWebサイトやWebアプリを「パフォーマンス」や「アクセシビリティ」など複数の観点で測定し、「Passed Audits(合格)」か「Faild Audits(不合格)」かを評価できる。 今回、リリースされた「Lighthouse v8.0.0」では、「パフォーマンス」の重み付けが変更されたほか、TBTおよびFCPスコア曲線の更新、CLSの新しいウィンドウ定義への更新が行われている。 評価レポートには、新たな指標フィルタが含まれており、指標を選択するとその改善に必要な項目が表示される。また、すべての主要なLighthouseクライアント間でLighthouseツリーマップが利用可能となった。 ほかにも、コンテンツのセキュリティポリシーを評価し、より安全性を高めるための新たな監査指標として、csp-xssが追加されている。なお、csp-xssはホスティング環境
Core Web Vitals influence how your application's pages rank on Google. Here, we'll dive into what they are, how they’re measured, and how your users and search ranking are impacted by them. Malte Ubl is the CTO of Vercel and former Director of Google Search responsible for shipping the “Page Experience” ranking rollout—which heavily utilizes Core Web Vitals. That said, everything written here is p
JSer.info #566 - Node.jsの開発版である17.1.0がリリースされました。 Node v17.1.0 (Current) | Node.js 現在ECMAScript ProposalのStage 3であるImport Assertionsを使ったJSONのimportがサポートされています。 Lighthouse 9.0.0がリリースされました。 Release v9.0.0 · GoogleChrome/lighthouse Node 12のサポート終了、意味がなくなったauditが削除されています。 また、ページ遷移を含むAuditをとるAudit User Flowsをプレビュー機能としてサポートしています。 Lighthouse user flows Reconstructing TypeScript, part 0: intro and backgroun
Being able to run Google’s Lighthouse analysis suite programmatically provides a lot of advantages, especially for larger or more complex web applications. Using Lighthouse programmatically allows engineers to set up quality monitoring for sites that need more customization than straightforward applications of Lighthouse (such as Lighthouse CI) allow. This article contains a brief introduction to
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く