表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
content-visibility: the new CSS property that boosts your rendering performance | Articles | web.dev
The content-visibility property, launching in Chromium 85, might be one of the most impactful new CSS properties for improving page load performance. content-visibility enables the user agent to skip an element's rendering work, including layout and painting, until it is needed. Because rendering is skipped, if a large portion of your content is off-screen, leveraging the content-visibility proper
Webbundle によるサブリソース取得の最適化 | blog.jxck.io
Intro WebBundle を用いてサブリソースのみを Bundle する、 Subresource Bundle の策定と実装が進んでいる。 これを用いると、複数サブリソースの取得を一回の fetch で行うことができ、 RTT を減らしつつも個別に取得したかのようにキャッシュを制御できる。 現時点での仕様と実装を解説する。 Intent to Prototype: Subresource loading with Web Bundles Subresource Bundling WebBundle の初期の仕様は、 HTML を頂点としたページ全体をまとめる方向で始まった。 WebBundle によるコンテンツの結合と WebPackaging | blog.jxck.io これをサブリソース(JS, CSS, Img etc)に対して利用できるようにする仕様だ。 HTML 自体は
Goサーバのモニタリング - Qiita
5日目担当の@cubicdaiyaです。先月末のGoConではGoのカンファレンスなのにほぼnginxをビルドする話しかしてなかったので今日はちゃんとGoの話をします。 Goで書くサーバプログラム Goではサーバプログラムを書くためのユーティリティが豊富に揃ってる上に、ゴルーチンやチャネルを利用することで高いパフォーマンスが要求される環境でも十分な性能を発揮することができます。いつだったか「あれはHTTPサーバ書くための言語ですよ」なんて話をとあるエンジニアから聞いたことがあるくらいです。 例えば「Hello, World!」を返すだけのHTTPサーバであれば標準ライブラリのnet/httpを利用することで以下のように書くことが出来ます。 package main import ( "fmt" "net/http" ) func handler(w http.ResponseWriter,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OSS Performance Tuning Tips
nginxのパフォーマンスチューニング
