Images, Files & Front-End articles

Images, Files & Front-End 340 Compression: confirming it is on, and measuring what you gained Compression shrinks pages before they travel, and the browser unpacks them at the other end. Because HTML, CSS and...
Images, Files & Front-End 240 Image optimisation and WebP Images are often the heaviest part of a page. WebP is an image format made by Google that usually keeps the same...
Images, Files & Front-End 233 Hotlink protection: stop others using your bandwidth Hotlinking is when another website displays an image of yours straight from your server, instead of keeping a copy...
Images, Files & Front-End 241 AVIF or WebP: which image format to use, and what to do for old browsers For most sites, WebP is enough and it is the easier one. AVIF often gives even smaller files on photographs, but it...
Images, Files & Front-End 243 Lazy loading images and videos: what to defer and what never to Lazy loading makes the browser request an image or a video only when it is about to appear on screen, instead of...
Images, Files & Front-End 199 Minifying CSS and JavaScript without breaking the site Minifying means taking the spaces, line breaks and comments out of a CSS or JavaScript file so it weighs less. A...
Images, Files & Front-End 284 HTTP/2 and HTTP/3: how to see which one your site uses, and whether it matters HTTP/2 and HTTP/3 are two newer versions of the “conversation” between the browser and the server. Our web server...
Images, Files & Front-End 208 Gzip or Brotli: which one your visitors get, and why it can differ Gzip and Brotli are two ways of compressing text (HTML, CSS, JavaScript, JSON) before it travels. Brotli usually...
Images, Files & Front-End 269 Web fonts slowing the page: font-display, fewer files and hosting them yourself Every typeface the site uses is a file to download, and every variant (regular, bold, italic) is another. If the...
Images, Files & Front-End 261 A site that loads on slow mobile data: how to make it lighter The short answer: on a slow mobile connection what hurts is the weight of the page, not only the speed of the...
Images, Files & Front-End 252 A website people can install like an app: PWA basics The short answer: a PWA is a normal website with two things added: a small file that describes it (the manifest)...
Images, Files & Front-End 219 Faster first paint: preload, preconnect and render-blocking CSS The short answer: before showing the page, the browser has to download the CSS and discover which images and fonts...
Images, Files & Front-End 249 Videos on your website: upload them or embed from a video service The short answer: for most sites, embed the video from a proper video service (such as YouTube or Vimeo) instead of...