DEV Community

Cover image for How to supercharge your HTML link tag with these four tricks
Diego (Relatable Code)
Diego (Relatable Code)

Posted on β€’ Originally published at relatablecode.com on

4 3

How to supercharge your HTML link tag with these four tricks

Introduction

The HTML link tag is one of the first tags everyone learns about when first diving into HTML. The most common use case is to just load up a stylesheet and forget it about.

<link href="/styles.css" rel="stylesheet" />
Enter fullscreen mode Exit fullscreen mode

However , the link tag has been updated throughout the years and has several features that can supercharge the performance of your application if used correctly.

Link tag attribute: Preload

The preload value for the rel attribute lets the developer declare a fetch request from the link tag. This allows the page to start loading the resource specified in the tag earlier ⏰. This can create several benefits!

For example, with this tag, you are able to specify resources that will most definitely be used later on in the webpage, such as imported scripts or large media files. This is paired with the as attribute to specify to the browser what type of resource we’re dealing with.

<link rel="preload" href="my_video.mp4" as="video" />
Enter fullscreen mode Exit fullscreen mode

All in all, this can help with render-blocking resources and help the browser more accurately parse the resource to cache correctly.

Link tag attribute: Prefetch

Another performance optimization! The prefetch value for the rel tag allows us, developers, to specify a resource for the browser to fetch while it’s idle.

In order for the browser to recognize you have to declare it as one of two ways:

<link rel="prefetch stylesheet" href="my_other_style.css" />
<link rel="next" href="test.html" />
Enter fullscreen mode Exit fullscreen mode

Obtaining the stylesheet needed in the future with prefetch and the following pages HTML with next πŸš€

What is considered idle time? Per the official MDN docs:

In the current implementation (Mozilla 1.2), idle time is determined using the nsIWebProgressListener API. We attach a listener to the toplevel nsIWebProgress object ("@mozilla.org/docloaderservice;1"). From this, we receive document start & stop notifications, and we approximate idle time as the period between the last document stop and the next document start. The last document stop notification occurs roughly when the onLoad handler would fire for the toplevel document. This is when we kick off prefetch requests. If a subframe contains prefetching hints, prefetching will not begin until the top-most frame and all its "child" frames finish loading.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ

Link tag attribute: media

Media

The link tags can contain a media attribute to specify what type of screen should be handling it:

  • all
  • print
  • screen
  • speech
  • braille (Deprecated)
  • embossed (Deprecated)
  • handheld (Deprecated)
  • projection (Deprecated)
  • tty (Deprecated)
  • tv (Deprecated)

I’ll leave this link explaining more in detail what each property means. These can also make your pages more accessible. This article of mine goes more in-depth.

<link rel="stylesheet" href="braille.css" media="braille" />
Enter fullscreen mode Exit fullscreen mode

However, this media attribute can also be used for different screen sizes and can be used in conjunction with other features on this list!

<link rel="preload" href="HUGE.png" as="image" media="(min-width: 601px)">
Enter fullscreen mode Exit fullscreen mode

Link tag attribute: alternate

Did you know you can provide alternate stylesheets to the user? The link tag property rel can have a suffix word: alternate. This word can specify a different stylesheet for the user to use.

For example:

<link href="styles.css" title="Main" rel="stylesheet" /> 
<link href="alternate.css" title="Alternate" rel="alternate stylesheet" />
Enter fullscreen mode Exit fullscreen mode

The title attribute is used to specify the name of the stylesheet in the options. The options can be located directly from the browser:

Alternate stylesheet

In Firefox these can be opened up by hitting F10.

However, this has limited compatibility across browsers so don’t rely on this functionality. Example from the Official MDN docs.

Conclusion

Using these tips can definitely increase the usability of the website by several percentage points. A little optimization never hurt anyone.

If you have any other way to take advantage of lesser-known features of HTML go ahead and mention it in the comments below!

More content at Relatable Code

If you liked this feel free to connect with me on LinkedIn or Twitter.

Check out my free developer roadmap and weekly tech industry news in my newsletter.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
svgatorapp profile image
SVGator β€’

"A little optimization never hurt anyone." - True!

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay