Vercel OG(@vercel/og)でOG画像を動的生成する - dackdive's blog
こちらの記事を読んで。 以前から https://reading-list.zaki-yama.dev/ という自分のサイトに OG 画像を設定したいな〜と思っていたところに @vercel/og なるライブラリが登場したので試してみた。 ※ なお、今までずっと「OGP 画像」だと思ってたんだけど、記事中では OG image と表記されていたので、ここでも「OG 画像」と表記する。 @vercel/og の特徴 冒頭の記事を読む限り、今までは vercel/og-image というサービスが提供されていたが、これには以下のような問題があった。 難しい： Serverless Function 内で Chromium を起動し、 Puppeteer でスクリーンショットを撮る、ということをやっていた。これらのツールのセットアップは実装が難しくしばしばエラーを引き起こしていた 遅い：Chro
How CLS optimizations increased Yahoo! JAPAN News's page views per session by 15% | web.dev
Yahoo! JAPAN is one of the largest media companies in Japan, providing over 79 billion page views per month. Their news platform, Yahoo! JAPAN News has more than 22 billion page views per month and an engineering team dedicated to improving the user experience. By continuously monitoring Core Web Vitals, they correlated the site's improved Cumulative Layout Shift (CLS) score with a 15% increase in
Optimize Cumulative Layout Shift | Articles | web.dev
Optimize Cumulative Layout Shift Stay organized with collections Save and categorize content based on your preferences. Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics. It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved. Layout shifts can be distracting to users. Imagine yo
Do This to Improve Image Loading on Your Website
Ever since responsive web design started, we've had a problem with the way images load on the web. Now, Firefox is fixing the problem. Add width & height attributes to all your images, and see load jankiness disappear. Jen Simmons explains how. Try out the demos for yourself: Fixed-width layout: https://codepen.io/jensimmons/pen/jOONZaZ?editors=1100 Responsive layout: https://codepen.io/jensimmo
Multimedia: Images - Learn web development | MDN
Complete beginners start here!Getting started with the webGetting started with the webInstalling basic softwareWhat will your website look like?Dealing with filesHTML basicsCSS basicsJavaScript basicsPublishing your websiteHow the web worksHTML — Structuring the webIntroduction to HTMLIntroduction to HTMLGetting started with HTMLWhat's in the head? Metadata in HTMLHTML text fundamentalsCreating hy
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Platform Status
