Website Performance Gets Little Wins Using ‘noopener’

Being a developer I’m often looking for little ways to improve website performance, such as how fast a website loads and the user’s browsing experience.

There’s a little known trick that helps with the latter, simply by not inheriting the overheads of pages you click through to. Oh, and rel="noopener" like rel="noreferrer" is also a useful measure against cross-site security issues! Note that the rel attribute supports multiple values, so rel="noopener noreferrer" is valid.

Performance issues you probably didn’t know about when opening links in a new tab

Here’s a typical example of how other websites can impact on your user’s experience (UX) on your site:

Your reading a blog post that has links to other pages. You click a link and it opens in a new tab.

This new tab shares processing resources with the page your reading!

Using noopener in conjunction with target=blank can help with website performance.

Why’s this a problem?

Imagine you’re reading some engaging article that has in-text links to other resources – this is common and very useful (both for reader’s UX and SEO).

You’ve clicked one of the links and it opens a new tab – again, this is good, as you can continue what you’re doing then take a look at the other page afterwards – great for UX and SEO.

You’ve read the new article then switched back to the original tab.

Sound great, but here’s the kicker, it might impact on your site’s performance

That new tab has loaded a page that serves content from a massively ad-ridden news site – many of these sites have in excess of 100 JavaScript-driven trackers!!!

These make your laptop fan go mad, but just as annoyingly, they will potentially slow down your site, too, as they are using the same resources as your current page.

A typical example of this is laggy scrolling, where the page feels slow and heavy when you try to scroll through the content.

The Little Trick using ‘noopener’

To avoid the resource drains of the website in the new tab using the resource allocated to your site’s tab, detach it, by simply using rel=“noopener” on the link.

By detaching the new tab you (and you’re visitors) will continue enjoying the spoils of your blazingly fast site, without inheriting the shortcomings of others’.

Want to improve your website performance?

There are plenty of resources on the web to help you improve your website’s performance, including how you can implement noopener globally for external links,  or feel free to get in touch to discuss further.