What are the best strategies for optimizing HTML for low-bandwidth connections?

Minimize Code: Clean and concise code: Remove any unnecessary tags, comments, and white spaces. Use semantic elements: This helps search engines understand the content and can slightly reduce code length. Avoid inline styles: Use external stylesheets and leverage CSS classes to avoid repeating styling.

Don't be too obsessive though when minimizing, as compression (following chapter) will take care of repetitive content like white spaces and (long) attribute values. However, if you find yourselves inlining a lot of non-critical contents (SVG, JS), you might want to move it to its own file and defer it.

Cons outweigh the pros when it comes to HTML minification. Compression offers a more significant reduction in file size, and since it is commonly used, it reduces any benefits of HTML minification. The process of minifying HTML relies on regular expressions, which will have an overhead based on the page's size and the number of regex patterns used. To avoid if page cache is not used. There is a potential risk of disrupting elements or features on a minified page if any of the applied regular expressions do not match correctly.

Mainly we need to minimize the images size, javascript and css code. So that it will load the required tags, id, classes and javascript within less time. By doing this we can minimize the website loading time.

Minimize File Size: Minify HTML, CSS, and JS. Externalize styles/scripts. Optimize Images: Use appropriate formats, compress, implement responsive images, and lazy load. Limit Web Fonts: Subset or use system fonts. Reduce HTTP Requests: Concatenate files and use CSS sprites. Utilize Browser Caching: Set expiration and use service workers. Prioritize Above-the-Fold: Inline critical CSS and defer non-essential scripts. Use a CDN: Serve assets from nearby locations. Server Optimizations: Enable Gzip/Brotli compression and improve server response. Limit Heavy Effects: Minimize animations and parallax. Test & Monitor:Consider a Lightweight Version: For slower connections.

When you've got the choice, pick a web server that supports Brotli. Based on outcomes of an Akamai researches, Brotli achieves a 14%, 17% and 21% better compression for respectively JavaScript, CSS and HTML files compared to gzip, making files even smaller to download.

Compression is a must-use not just for HTML, but for all assets. Minification can bring a file 300kb file to 200kb. But compression will cut to 30kb. Services like Cloudflare makes it ease to benefit from with minimum configuration and no changes on the server-side.

Some CDN's are even able to serve AVIF images. Compared to WebP, AVIF will come with a 35% file size savings based on Imgix research.

Fitting the container's size is as important as using a modern file format. AVIF with a WEBP fallback is a good combination to ensure a wider compatibility (Safari pre-16.4 and Edge mainly).

A misconception though is to lazyload your main (hero or product) image, and thinking a browser will figure out. You would still end up slightly delaying that image based on browser internals. A best practice for optimal hero image delivery is to use a regular image instead of background image, and not adding a lazy loading strategy. Also look into the fetchpriority attribute for that specific image to not only improve when the image is downloaded, but also with what priority.

Again though, don't be too obsessive about this one. As a matter of fact, combining your CSS or JS files is considered a web performance anti-pattern in the post HTTP/1 era. You would end up creating bigger files instead of multiple smaller files. This prevents HTTP/2 from simultaneously downloading them, forcing visitors to wait longer for a large to download file, regressing their moment of engagement and overall experience. In the current HTTP/2 era, it's more important what is being download and the type of browser-tasks it will do instead of how many resources are downloaded.

HTTP/2 nullifies the need for combination, but I still see some strong advocates for keeping doing it. Combination will help reduce the requests count, but it might have adverse effect. Once combined, a heavy gallery script for example can't use a delayed execution. On the CSS side, it makes sense to still combine if the coverage of unused CSS is low and the combined file has a reasonable size.

Optimizing SSR State Data Website server-side rendering incorporates the app's state data, like _NEXT_DATA in Next.js, within the HTML response, enabling the client to use it as the initial state. Inefficient code design can lead to larger state data, thus increasing the HTML size. To address this issue, reduce the state data size by segmenting page components and APIs into 'aboveTheFold' and 'belowTheFold' sections, eliminating unnecessary data fields, and fetching only the data needed for rendering on specific pages.

Use Resource Hints Resource hints such as Prefetch, Preconnect, and Prerender will help the browsers to figure out the resources that will be required for page rendering in the near future. Resource hints can be classified into 2 types. Declarative - Preconnect and Preload Speculative - Prefetch and prerender For example, let's discuss Prerender. Prerender tells the browser to load Page Y in advance when you are browsing Page X. There are libraries that use Prerender/prefetch smartly, such as QuickLink. Quick Link will automatically prefetch URLs for links that are in-viewport during idle time. This will help end-users to see the content almost instantly when they click.

Limit page size-use bullets and simple text Minimise size of images Avoid PDF A small note on each page “How Optimise bandwidth”

A web page shouldn't be optimized solely for low-bandwidth users. Instead, have a baseline style, interaction, features for low-bandwidth, and add a richer experience for visitors with a better internet access.