Vol.295

Site-Speed Topography – CSS Wizardry – Web Performance Optimisation Jump to heading #

Web サイトパフォーマンスを WebPageTest を使って改善する Jump to heading #

Harry 氏が実際にどのように Web サイトパフォーマンスを改善しているか、その方法を紹介する。Google Analytics では平均ページ読み込み時間が解析できるが、これは特定のページがどのようなパフォーマンスがでているかは確認できるが、サイト全体の状態を確認するためのデータとするには使いにくい。氏曰く、まず Web サイトをページタイプごとに分類し、WebPageTest データを集め、そこからビジュアライズをしていくようにすることで、本当の問題点が見えるようにしていくようなやり方を紹介している。

Web Platform Design Principles Jump to heading #

Web プラットフォームにおける設計の原則 Jump to heading #

W3C が公開している、Web プラットフォームテクノロジを設計するときに気をつけておきたい設計原則。Web サイトの仕様設計者はこのドキュメントを参考にして設計を進めることを勧めている。

1. WebAPI の設計原則
2. 言語を超えた API 設計
3. CSS
4. JavaScript

など

The Raven Technique: One Step Closer to Container Queries | CSS-Tricks Jump to heading #

CSS 関数を駆使したコンテナクエリライクな実装 Jump to heading #

CSS のmin、max、clampなどの関数や CSS 変数を組み合わせることで、コンテナクエリのような動作を実現するための実装アイディアを紹介する。

JavaScript’s Memory Management Explained Jump to heading #

ほとんどの場合、JavaScript 開発者はメモリ管理について何も知らなくても問題が発生することはない。しかしながら、ある時点でメモリリークなどの問題が発生した場合、これについて知っておくことを解決をすることができる。この記事では、JavaScript のメモリ割り当てとガベージコレクションがどのように機能するかを紹介し、一般的なメモリリークを回避する方法を紹介する。

Effective Skeleton Screens - Web Performance Consulting | TimKadlec.com Jump to heading #

読み込み時間にスピナーやプログレスバーではなく、スケルトンを表示することで、コンテンツのアウトラインを伝えることができるメリットがある。しかしながら、誤った使い方をすることで、UX を損なってしまうこともある。この記事では、スケルトンの適切な使い方を解説する。

In Brief Jump to heading #

• What are Asynchronous Meetings? Everything You Need to Know | Fellow: メッセージングツールなどによる非同期でのミーティングを成功させるためのコツを紹介する

• This is how I git | daniel.haxx.se: git を頻繁に使っている筆者が git のテクニックや設定を紹介する

• How to Build HTML Forms Right: Styling: HTML Form の正しい作り方を丁寧に解説する連載記事の第三弾。スタイルを適切に変更するためのテクニックを紹介する

• Prevent layout shifts with CSS grid stacks - Hubert Sablonnière: CSS の Grid を使用して、レイアウトシフトを防ぐための方法を紹介

• GIFS and prefers-reduced-motion | CSS-Tricks: prefers-reduced-motion のメディアクエリと picture タグを組み合わせて、GIF 画像と静的な画像を適切に表示仕分ける実装例を紹介する