タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が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
こんにちは。ものづくり推進部、フロントエンドエンジニアの武田です。 今日は Datadog, Lighthouse を使ったクライアントパフォーマンス計測に取り組んでいる、というお話です。 mediba では webpagetest を使った定期実行と計測を以前から行っています。 DataStudioとGASでWebPagetestの計測結果をグラフ化するuknmr/gas-webpagetest紹介記事: gas-webpagetestでWebPagetestのパフォーマンス計測を自動化、可視化する1 での取り組みをベースにし、clasp で GAS のソースコード管理・デプロイを実現するための仕組みや webpagetest Lighthouse test と連携したメトリクスの取得まで網羅したものが 2 になります。 今回は少し webpagetest とは趣向を変えて Lighth
トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの
先日リリースされた Google の Lighthouse 6 では、チェック項目の追加や変更が行われました。機能拡張などにはまだ反映されていませんが、下記のサイトでテストできます。 Lighthouse Metrics https://lighthouse-metrics.com/ GatsbyJS で作成した『Webサイト高速化のための 静的サイトジェネレーター活用入門』の サンプル(https://gatsby-essentials.netlify.app/) を Lighthouse 6 でテストしてみると、パフォーマンスなどの項目は「Audits passed(合格)」と表示されますが、「PWA」に関しては合格できなかった項目が表示されます。 これは「Maskable icon(マスカブルアイコン)」の用意を求めるもので、Lighthouse 6で追加された新しい要件です。 Ma
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
こんにちは、ライトハウスでソフトウェアエンジニアをしている北添です。 今回は「今ふたたびのAnsible入門」と題しまして以下の内容を書きます。 なぜ今ふたたびAnsibleに入門するのか 基本的な使い方 ベストプラクティスに則ったAnsibleのコード設計 なぜこの記事を書いたか 理由は2つあります。 1つ目は、IoTのプロダクトでAnsibleがどのように活躍するのか、ご紹介したかったことです。 私が勤める株式会社ライトハウスは、水産業界の課題解決のために船舶のIoT化を推し進めています。 船舶からセンサーを通じて情報を吸い上げ、クラウドへ送信することでIoT化が達成されます。 通常、センサーで取得したデータは直接クラウドへ送信されるのではなく、船内のサーバーに一度集められた後送信されます。 つまり、IoTの文脈ではオンプレミスサーバーが必要であり、オンプレミスサーバーが必要な以上、構
こんにちは!ぬこすけと申します! Reactを使って個人で本のおすすめ度を点数化して紹介するサイトを作っています。 ひたすら本のリストページのパフォーマンスチューニングをしていたのですが、LightHouseのパフォーマンススコアで下記のように爆上げすることができました! Before パフォーマンススコア:30前後くらい ※表示する本のリストは10件 After パフォーマンススコア:90前後くらい ※表示する本のリストは400件程度 (2020/8/12に計測) 今回の開発で得た経験を元に、Reactにおけるパフォーマンスチューニングのノウハウをご紹介したいと思います! なお、導入効果と導入工数、おすすめ度を主観で5段階でつけさせていただきました! なお、React Hooksをはじめ、2020/7/28にリリースされたNextJs 9.5など、最近の技術も活用しているので、そこらへん
「本屋lighthouse幕張支店」を運営する関口竜平さん。最初は祖父が持つ畑に建てた小屋からスタートした。店内には、小説や人文書などが充実している。売り上げを追うことや、書店の存続を目的にするのではなく、関口さんが届けたいと思った本を並べている。ヘイト本を置かないのも、関口さんがこだわったポイントだ。 深刻な出版不況に突入した2000年代。ジャーナリストの故・佐野眞一は、2001年に刊行された『だれが「本」を殺すのか』(プレジデント社)で出版不況の構造的な問題について言及した。その後も、本を巡る状況は厳しくなる一方だ。それでもさまざまな形で思いのある本を届ける挑戦は、日本各地で起こっている。大手チェーンとは異なる品揃えや営業スタイルで勝負する独立系書店を営む挑戦者たちは、今の本を取り巻く状況をどのように見ているのだろうか。(本文は敬称略) (浜田 敬子:ジャーナリスト) 減り続ける書店の
スマートキャンプの笹原です。 みなさんはWebサイトの、特にフロントのパフォーマンス改善を日頃から行っていますか? 常に意識しているという方もいれば、気が向いたときにたまに見てみるなんてこともあるんじゃないかと思います。 今回はそんなパフォーマンスに常に意識を配れるように、毎日Lighthouseを叩いてみたのでその構成を紹介したいと思います。 Lighthouseとは 要件 処理の流れと制約 実際の構成 1. 定期的にCloud Tasksに各ページごとのTaskをEnqueueする TaskをEnqueueされるCloud Tasksのキュー作成 TaskをEnqueueするFunctionの作成 2. 各ページにLighthouseを実行しBiqQueryに結果を格納する 終わりに Lighthouseとは まずはLighthouseについて簡単な説明です。 Lighthouseとは
スマートキャンプのエンジニア井上です! 多くの開発要望がある中で、エンジニアのみでインパクトのある改善をするときにによくあげられるのがサイトの パフォーマンス改善 かと思います。 今回はサイトのスピート計測ツールである、 Google PageSpeed Insightsで使用されているLighthouseのスコア を参考にして、実際に効果があった施策をご紹介します! Google PageSpeed Insightsとは Lighthouseとは Performance項目改善の進め方 実際の対策 レンダリングブロック対応 指摘内容 対策 画像圧縮対応 指摘内容 対策 オフスクリーン画像の遅延読み込み 指摘内容 対策 IntersectionObserver APIとは 実際の実装イメージ 不要なJS・CSS削除 指摘内容 対策 必須のドメインへの事前接続 指摘内容 対策 Resourc
佐久間宣行が星野源&若林正恭との『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取締役
幻冬舎、そして見城さんの対応について本屋がすべきことについて考えている。作家さんからの声はたくさん出ている。もちろん読者からも。 しかし本屋は声をあげにくい。以前の『日本国紀』騒動や昨夏の「新潮45」問題などでも同様だったが、本屋が出版社から本を仕入れて営まれるものである以上、どうしても上下関係を意識してしまい、批判の声をあげることが難しく思えてしまう。もちろんこれは作家-出版社間の関係でも同様だし、さらに言うと「出版社は本屋に本を置いてもらってる/作家に本を書いてもらってる」とも考えられるため、場合によっては上下は逆転しているかもしれない。 でもやはり本屋は出版社に対して弱いのだ。少なくとも幻冬舎や新潮社のような「大手」に対しては。まあとにかく。今回、幻冬舎が津原さんに対して行なったことは、そのまま本屋に向けられる刃でもある、ということは、知っておかないといけないと思う。 津原さんは『日
0%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 r
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
Googleなどの検索エンジンで上位に表示させるためには、質の高いコンテンツであることはもちろん、ページが表示される速度や、WebサイトへアクセスするユーザーやGoogleクローラーなどに対して、ページが正確に表示されているかなど、Webサイトの使いやすさ(ユーザビリティ)も非常に重要です。 今回は、Webサイトの評価をチェックすることができる「Lighthouse(ライトハウス)」について、実際にmicroCMSブログをチェックした結果と合わせてご紹介します。 Lighthouse(ライトハウス)とは?Lighthouse(ライトハウス)は、Googleが無料で提供しているWebサイトを分析・診断するための機能です。 自身のWebサイトを、 「パフォーマンス」 「ユーザー補助」 「おすすめの方法」 「SEO」 の4つの項目ごとに、Google独自の基準でチェックできます。 簡単にコンテン
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: がくっとレイアウトが変わることがな
概要 Gatsbyは、React.jsを使ったStatic Site Generator(SSG、静的サイトジェネレーター)で、とても早いウェブサイトを作れる技術です。静的なサイトだけでなく、CSRやSSRサイトも作れますが、この記事では静的サイトに集中しておきたいと思います。Gatsbyが使用するGraphQLについても扱います。 Google Lighthouse Score 学生時代には取れなかったオール100点 完成品はこちら コードはこちら 対象読者 Gatsbyがどう動くか知りたい方 Reactの基本的知識がある方 ブログをScratchで作りたい方 目標 Gatsbyの構造を知ることによって、色んなライブラリーを応用できるようになる 注意事項 完成品の基本的構造にふれるだけなので、上記の例と全く同じものが作られる記事ではありません。 Gatsbyのことがよくわかってて、開発時
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ファ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く