{"id":36,"date":"2020-01-29T12:36:26","date_gmt":"2020-01-29T12:36:26","guid":{"rendered":"https:\/\/cebucodesolutions.com\/blog\/?p=36"},"modified":"2020-01-29T12:36:26","modified_gmt":"2020-01-29T12:36:26","slug":"developing-blocker-friendly-websites","status":"publish","type":"post","link":"https:\/\/cebucodesolutions.com\/blog\/2020\/01\/29\/developing-blocker-friendly-websites\/","title":{"rendered":"Developing Blocker-Friendly Websites"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

The modern internet has become obsessed with tracking, analytics, and targeted advertising. Almost all of your browsing activity is tracked: sometimes by your network provider, and frequently by the hosts of the websites you visit (and anyone they choose to share data with). If you host a website\u2014and many of us do\u2014chances are good you’re running analytics software on it, collecting metadata about your users’ devices and browsing activity. <\/p>\n\n\n\n

You may not even know it, but some of your users are likely ghosts: running tracker-blocking software that blocks analytics scripts before they load. Unless you’re also running analytics on your server-side logs, these users will be silently absent from your stats. I can’t say I blame them; the tracking epidemic has gotten out of control and is still spreading like wildfire. However, by opting out of tracking, these users may unwittingly have a degraded experience on your website when third-party scripts your code depends on fail to load. <\/p>\n\n\n\n

You can choose to leave these ghost users to suffer the consequences, or you can take a few simple precautions to ensure everyone has a good experience using your website, even when your third-party services don’t load. As a bonus, following these steps will harden your website, make it resilient to downtime you have no control over, and make it more easily accessible to a wider range of people. It may even improve your SEO, since search index crawlers that ignore JavaScript will predictably experience the same fallback mechanisms as users with blocker software. <\/p>\n\n\n\n

Keep third-party scripts to a minimum<\/h2>\n\n\n\n

The easiest thing you can do is avoid loading third-party resources (anything not hosted on your primary domain) as much as possible. In addition to introducing security and privacy concerns<\/a>, they can be a huge drag on your site performance, and can be unpredictable: they can easily change without you knowing, which is scary<\/a> for something that has direct access to your site. <\/p>\n\n\n\n

Limiting your exposure to third-party resources might mean hosting JavaScript libraries on your own site instead of a CDN, making your own social network “share” buttons using self-hosted images, or just using fewer third-party libraries. In addition to improving your users’ security and privacy, limiting your third-party scripts will almost certainly improve your site performance\u2014often drastically<\/a>. JavaScript downloading and parsing occupies a huge chunk of the loading time on most websites. <\/p>\n\n\n\n

If you’re unable to host your scripts locally, use async<\/code> or defer<\/code><\/a> to speed up the time until a user can interact with your website. Keep in mind that deferring script loads means that regular users may interact with your site before a script is loaded; it’s a good idea to ensure your website still works without those resources.<\/p>\n\n\n\n

Test your site with JavaScript disabled<\/h2>\n\n\n\n

Most modern internet browsers still provide an option to browse with JavaScript disabled\u2014it’s rare, but some users do it. Furthermore, any third-party scripts you’re still loading have the potential to fail. Imagine what would happen if you relied on a CDN for your core JavaScript libraries, and the CDN went down: this is the same experience many ghost users will have the first time they visit. Checking your website with JavaScript disabled will give you firsthand experience with failure scenarios, so you’ll be able to implement backup solutions. <\/p>\n\n\n\n

Display messages when scripts don’t load<\/h2>\n\n\n\n

Sometimes you can’t avoid using third-party resources, often in \nmission-critical features like checkout. In these cases, showing \nmessages to your users when required scripts don’t load will ensure your\n site never feels “broken”.<\/p>\n\n\n\n

You can use noscript<\/code> tags<\/a>\n to display messages to anyone with JavaScript completely disabled, but \nthat won’t help ghost users who are only blocking third-party requests, \nor services experiencing downtime. I highly recommend adding code in \ncritical processes to verify that all required scripts have loaded and, \nif they haven’t, display messages explaining what happened.<\/p>\n\n\n\n

The Electronic Frontier Foundation’s donation page is a great example of this technique in action: when Stripe checkout fails, they show a helpful message explaining what to allow in order to fix it:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Use descriptive image alt text <\/h2>\n\n\n\n

When an image fails to load, most browsers display the content of the alt<\/code> attribute in its place. Adding descriptive alt<\/code>\n text to all of your images will let ghost users immediately understand \nyour content, and as a bonus, improve accessibility for anyone using a \nscreen reader\u2014the alt<\/code> text will be read aloud in place of images.<\/p>\n\n\n\n

When\n it comes to descriptions of images, detail is critical. Consider the \ndifference between a caption that says “bowl of soup”, and this descriptive example from Vox Media<\/a>:<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

If your site relies on ad revenue, host acceptable ads locally<\/h2>\n\n\n\n

Many users running blockers do so for personal security reasons; they’re uncomfortable with widespread data collection<\/a> and the pervasiveness of malvertising<\/a>, which is only able to exist because overreaching ad networks want to serve increasingly targeted ads.<\/p>\n\n\n\n

If your site relies on ad revenue, strive to host text-based ads or static images on your first-party domain. These ads will avoid ending up on filter lists designed to block malicious actors, allowing you to reach more of your user base. Even better, the rest of your users who aren’t running blockers will enjoy a more secure and private experience on your site.<\/p>\n\n\n\n

Help create the internet you want to use<\/h2>\n\n\n\n

Implementing these techniques will improve the resiliency of your \nsite across the board, and harden it against errors and unexpected \ndowntime. Mobile users in particular\u2014said to make up the majority of all\n internet traffic\u2014will appreciate faster load times, less data usage, \nand predictable content placement (without slow-loading ads appearing \nsuddenly). All of your users (including you!) will enjoy better \nperformance and privacy while using your site.<\/p>\n\n\n\n

If we want a web that cares about privacy, it’s our responsibility as website creators to exemplify it.<\/p>\n\n\n\n


<\/p>\n","protected":false},"excerpt":{"rendered":"

The modern internet has become obsessed with tracking, analytics, and targeted advertising. Almost all of your browsing activity is tracked: sometimes by your network provider, and frequently by the hosts of the websites you visit (and anyone they choose to share data with). If you host a website\u2014and many of us do\u2014chances are good you’re … Continue reading “Developing Blocker-Friendly Websites”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-36","post","type-post","status-publish","format-standard","hentry","category-updates"],"_links":{"self":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/36","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":1,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/posts\/36\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cebucodesolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}