The Need for Speed: HTML & CSS Tips to Boost Your Page Loading Time by 10x
Tags: webdev, html, css, news
Published: 2022-11-02 05:19:02

We all hate it when our page loads this slow right! 😔

![Slow page load meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fwzins59fhpekqep7poq.gif)

> Infact website conversion rates drop by an average of 4.42% with each additional second of load time (between seconds 0–5). The first five seconds of page-load time have the highest impact on conversion rates. ([Portent](https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm#:~:text=The%20first%205%20seconds%20of,(between%20seconds%200%2D5)), 2019)

![Page Speed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixbxyjcbl5z9yg0gbdx3.png)

> But you can increase the Page Load Speed of your website by making changes in your HTML and CSS Files without needing the best hosting services in the most hard way! Read along…


![Website Analytics Photo by Carlos Muza on Unsplash](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6as7ji4omndbot5bbm0f.png)

_(For this article we will be concerned about making the page speed faster using our HTML and CSS files only.)_

---

## 1. Lazy Loading

Lazy loading is a strategy to shorten the length of the [critical rendering path](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path), which translates into **_reduced page load times_**.

![Fast Car](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ny9zmjfqes8hgf70dbgj.gif)

### a) Splitting CSS File

CSS must be **thin**, delivered as quickly as possible, and the usage media types and queries are advised to unblock rendering. What do I mean by thin? -_Split your CSS File so that the whole CSS is not executed at all screens_.

```
<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" />
```

📌 For **Print** media use-

```
<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" />
```

📌 For **Mobile** Screens use-

```
<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />
```

📌 For **Tablet** Screens use-

```
<!-- Loading and parsing tablet.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="tablet.css"
  media="screen and (max-width: 1080px)" />
```

📌 For mobile screens in different **orientation** use different CSS Files

```
<!-- Loading and parsing portrait.css is not render-blocking on landscape screens -->
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
```

By separating out the CSS into multiple files, the main render-blocking file, in this case styles.css, is much smaller, reducing the time that rendering is blocked thereby increasing the page load speed by a lot.

### b) `font-display` property of CSS

Applied to the `@font-face` rule, the `font-display` property defines how font files are loaded and displayed by the browser, allowing text to appear with a **`fallback`** font while a font loads, or fails to load. This improves performance by making the text visible instead of having a blank screen, with a trade-off being a flash of unstyled text.

```
@font-face {
  font-family: "nunito", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

### c) Images in the HTML File

The user can see(needs to see) only the images at the top at the first second. Then why to make them wait for the image at the end to load? Use `loading="lazy"` so that the image only loads when it is needed. This decreases the Page Loading Speed to a lot.

```
<img src="my-logo.png" alt="KOUSTAV" loading="lazy" />
```

---

## 2. Choosing the right Image Format

Make your images in _**[.webp](https://developers.google.com/speed/webp)**_ format. It is recommended as the image format standard for the web.

**WebP** lossless images are [26% smaller](https://developers.google.com/speed/webp/docs/webp_lossless_alpha_study#results) in size compared to PNGs. WebP lossy images are [25–34% smaller](https://developers.google.com/speed/webp/docs/webp_study) than comparable JPEG images at equivalent [SSIM](https://en.wikipedia.org/wiki/Structural_similarity) quality index. Lossy, lossless and transparency are all supported in animated WebP images, which can provide reduced sizes compared to GIF and APNG.

### WebP vs PNG Image Format

![WebP VS PNG Image Format Performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkng6r3ziisyu64tp4xi.png)

### WebP vs JPEG Image Format

![WebP vs JPEG Image Format](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/233judmwfcxz3f5hnram.png)

> With all this tests it is proved that webp images are much more compressed even after being lossy therefore decreasing the page load speed by a lot!

_You can also check image format [.avif](https://en.m.wikipedia.org/wiki/AVIF) which in few cases is better than .webp but it is new to the market (released on 2019) so not many browsers supports the .avif format yet!_

### 📌 Use `<picture>` element for the images

a) For cropping or modifying images for different `media` conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
b) Offering alternative image formats, for cases where webp format is not supported.
c) Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.

If providing higher-density versions of an image for high-DPI (Retina) display, use `srcset` on the `<img>` element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit `media` conditions.

```
<picture>
  <source srcset="my-logo-wide.webp" type="image/webp" media="(min-width: 600px)" />
  <source srcset="my-logo-wide.jpeg" type="image/jpeg" type="image/jpeg" media="(min-width: 600px)" />
  <source srcset="my-logo-narrow.webp" type="image/webp" /> 
  <img src="my-logo-narrow.png" alt="KOUSTAV" loading="lazy" />
</picture>
```

---

## 3. Rendering Images

As images are **loaded asynchronously** and continue to load after the first paint, if their dimensions aren't defined before load, they can cause reflows to the page content. For example, when text gets pushed down the page by images loading. For this reason, it's critical that you set `width` and `height` attributes so that the browser can reserve space for them in the layout.
For any **`background-image`**, it's important you set a `background-color` value so any content overlaid is still readable before the image has downloaded.

---

## 4. Minifying HTML and CSS Files

Minification is _removal of all unnecessary characters_ from code so as to reduce the size. Unneeded white space characters like _space, newline, tab_, etc. and comments are removed.

Use minifying tools like [CodeBeautify](https://codebeautify.org/minify-html), [CSS Minifier](https://css-minifier.com/), and many more to minify your HTML and CSS Files. These will help giving your website a better page load speed.

---

And we are -

![Done Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flfb23jdwgwjmwamcvld.gif)

_This changes will definitely give your website a10x faster page loading speed now!_

> Happy Coding! 😃
> Share this with someone who would need it! 💚
> Follow for more ⚡