How I see the web with uBlock Origin
Countless times a day, you’re working with a certain number of apps, clicking on news feeds and shared links. Without realizing it, the amount of visual pollution you’ll be faced with and the wasted bandwidth usage that goes with it can be maddening. For many, Adblock Plus was a solution. I have to admit I never really got into it as my ISP’s DSL router has built-in ad-blocking capabilities.
Recently, however, I’ve discovered uBlock Origin and immediately got hooked because it’s not (only) an ad blocker, but a lightweight wide-spectrum blocker which, to me, makes a world of difference. With the browser extension, everybody can act on web pages to remove blocks, menus, ads, sections etc. that should never ever get displayed. This not only provides for a clutter-free experience but saves tons of network bandwidth.
Quick look
Here’s an example with an article from The Guardian. The full page view looks like this:
Full The Guardian article view
With uBlock Origin, I’ve trimmed down the page to only the content I’m interested in reading. And this means every single article I’ll read in the future on this site will look like this.
Optimized The Guardian article view
Pretty radical, right? Think about how Firefox Reader View or Evernote Clearly render pages. But there’s an additional win here: you don’t have to load the page first and click the reader view icon next (and potentially install another extension). It’s all-in-one go. For productivity freaks like me, it’s invaluable.
What about network requests you ask? Here’s without the extension, after waiting for ~1mn (which is enough to skim through the interesting bits of the article):
- 290 total requests
- 6.68 MB transferred
- 1.03 min to finish loading the page
Firefox Network view for the non-optimized The Guardian page load
And with the extension enabled and my optimized page view:
- 48 total requests (-83,45%)
- 4.06 MB transferred (-39,23%)
- 5.42 sec to finish loading the page (-91,4%)
Firefox Network view for the optimized The Guardian page load
Obviously, this is just a random page and your mileage may vary. But one thing is for certain: this is an immediate win and it becomes hard to imagine browsing the web differently once you get this improved experience. Think about:
- Areas where broadband connection is still an issue
- Internet plans where bandwidth usage is capped
- The number of CPU cycles you’re going to spare
- The improved privacy as a result of not letting trackers follow you across sites
- The improved security with e.g. malware blocking
- The fast-by-design browsing experience you’re about to embrace
- Going easy on your eyes, by staying focused on what matters to you (the content) and not the surrounding noise (everything else)
Configuring uBlock
Here are my settings for the extension. With today’s web, I’m being very aggressive with blocking both media elements larger than 100 kb and remote fonts. The good thing with uBlock is those settings will work for most sites, and when there’s an issue (most of the time, remote fonts will be required for modern web apps), you can always apply a per-site override. Think of it as a firewall: start by blocking all network traffic, and open ports (in this instance, web requests) for trusted hosts only.
Recommended uBlock settings
On the 3rd-party filters tab I’ve checked every single setting but uBlock filters — Experimental just to be on the safe side. For non-english speakers, you’ll also want to check the Regions, languages setting that corresponds to your mother tongue. Do NOT check all languages here as it wouldn’t make sense.
With those parameters configured, key improvements such as blocking social features, ads, malwares and rubbish trackers will be enforced to make sites fly.
Making the web yours
You would think it can’t get any better, but as we’ve seen above with the trimmed The Guardian page, it’s now up to you to customize your web experience to best suit your needs. To achieve this, click on the uBlock extension icon and onto the Element picker mode, or right click Block element.
uBlock Origin’s Element Picker mode
This panel allows you to interact with uBlock Origin and also override settings for sites that are behaving differently than expected. For instance, the site on which I was when I took the above screenshot had both large media elements and remote fonts blocked. It’s easy to click on any of those buttons (easily distinguishable with the red cross on top of the button) to create the override.
Upon entering the element picker mode, a transparent modal will show up at the bottom right of your web browser. It’s easy to miss it, so be sure to move your cursor around.
Now it’s time to customize the web page you’re on. You can pick any CSS element by clicking anywhere on the page. The currently selected element is surrounded by a thin red line. The name of the selected CSS element then appears in the modal. You can go up one level when clicking on any of the cosmetic filters (top to bottom).
uBlock Origin’s Element Picker modal
When you’re happy with the preview of the element you want to hide, just click Create. Each and every filter you create will show up in uBlock Origin’s My filters tab. I find it a good practice to keep this text area organized by domain name. This way, when you want to do some cleanup it’s easier to determine what needs to stay or go. Here’s an example for www.google.com:
www.google.com###lga
www.google.com###gws-output-pages-elements-homepage_additional_languages__als
www.google.com##.gb_Oc.gb_R.gb_9c.gb_Nc
www.google.com##.gb_hc.gb_b
www.google.com##.gb_Bg.gb_Lg.gb_R.gb_oe
www.google.com##center > input:nth-of-type(2)
www.google.com###footerNow, it’s up to you to model the web to your liking and start making sites fly without giving away your privacy, security…and precious network bandwidth.
Oh, and obviously, to best read this site you want to click on the big blue uBlock button (see above the uBlock extension screenshot) to disable the extension entirely for this site only. Or…do you?
On making ethical choices
Surfing the web nowadays is a constant battle against trackers and ads. It’s our right to try and fight back. Even those online newspapers you love are most likely to track you one way (directly) or another (indirectly). Is it fair? Probably not. Would they try a different business model if more people would pay for journalism altogether? Likely so. It’s thus our responsibility to ask ourselves this: does the information I read on those sites worth paying for? Do I have content I couldn’t live without if all of a sudden it would be pulled down? Then, make your choice and think of it like Music or on-demand Video. It should make you feel good to pay for content your really value (and still block their annoying trackers!) and be very aggressive about sites you don’t really care about.