Images, Files & Front-End articles

Images, Files & Front-End 321 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 242 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 235 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 220 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 235 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 191 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 268 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 212 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 225 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 199 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 238 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 231 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 236 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...