DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for HTML & CSS Features, Tips For a 10x Faster Page Loading Speed
devkoustav
devkoustav

Posted on

HTML & CSS Features, Tips For a 10x Faster Page Loading Speed

We all hate it when our page loads this slow right! πŸ˜”

Slow page load meme

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, 2019)

Page Speed

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

(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, which translates into reduced page load times.

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" />
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ For Print media use-

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

πŸ“Œ 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)" />
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ 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)" />
Enter fullscreen mode Exit fullscreen mode

πŸ“Œ 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)" />
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

2. Choosing the right Image Format

Make your images in .webp format. It is recommended as the image format standard for the web.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM 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

WebP vs JPEG ImageΒ Format

WebP vs JPEG ImageΒ Format

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 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>
Enter fullscreen mode Exit fullscreen mode

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, CSS Minifier, 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

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 ⚑

Top comments (21)

Collapse
 
moazamdev profile image
Moazam Ali

Does using styled components in React (css in js) also speed up the application or website?

Collapse
 
koustav profile image
devkoustav

I don't think so. If you compare static css and styled components in react.... static css will be faster... because it is not processed during runtime.

However with every new versions React is getting better and better.

So in this case if you can compromise on your performance a bit... styled components in React may solve many other issues!

Collapse
 
moazamdev profile image
Moazam Ali

Ok @koustav, I got it.

By static css do you mean files with .css extension?

Using .scss files reduces performance or not? Because they are also processed (converted) into css first.

Btw thanks for your quick reply ❀️

Collapse
 
pterpmnta profile image
Pedro Pimienta M.

Great advise, principal the image format.

Collapse
 
koustav profile image
devkoustav

Thanks

Collapse
 
mrcaidev profile image
Yuwang Cai

Great post!
But I think "1.a Splitting CSS Files" may be hard to achieve when using modern CSS solutions like CSS modules or Tailwind CSS.
Anyway it's a good idea. Thank you!

Collapse
 
koustav profile image
devkoustav

Yes that's a problem in PostCSS plugins like Tailwind. The ways out are just minifying your CSS with a tool like cssnano, and compressing your CSS with Brotli. But hoping they will update something as such later!

Collapse
 
jonathandsouza profile image
Jona

I once tried to lazyloading content which is off screen and the SEO guy came for my blood.

Collapse
 
rizkyzhang profile image
Rizky Zhang

Great post!

Collapse
 
koustav profile image
devkoustav

Thanks

Collapse
 
arsalannury profile image
ArsalanNury

my suggestion .
we can manage our API requests with tricks and libraries like React Query

Collapse
 
kosoko_daniel profile image
Daniel

This is great. Thank you.

Collapse
 
koustav profile image
devkoustav

Feeling something missing?
Put your suggestions in the comments πŸ˜„

I'll be happy to add your suggestions!

Collapse
 
koustav profile image
devkoustav

Did this post help you?
Save it for later...

lets_code_together

Collapse
 
dipanjan profile image
Dipanjan Ghosal

Yep. This was very helpful. Thanks

Collapse
 
toantd90 profile image
Toan Tran

Since you mentioned about coding splitting for CSS code, it is also good to inline critical css so the page could render. And then fetch and apply the remaining CSS.

twitter.com/iamakulov/status/12394...

fetchpriority is also a good choice even it is not supported by all browser now

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Pretty nice :) But using GitHub fences for code fragments would be better.

<just like="this" />
Enter fullscreen mode Exit fullscreen mode
Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Collapse
 
cisnoral profile image
cisnoral • Edited on

have you tried tailwind for additional css
I learnt and now started ipad reparature berlin

Collapse
 
hiruthicsha profile image
hiruthicSha

I kever knew there was a "media" attribute existed...πŸ˜…

Great post❀️

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.