Little wins for webpage performance.

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.

What you probably didn’t know about 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!

Why is 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.

But here’s the kicker

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

Detach the new tab from your current tab, by simply using rel=“noopener” on the link.

<a href="" rel="noopener" target="_blank">Futher reading...</a>

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’.