Leveraging opacity to improve UX on a list of blog posts

When I built the theme for this site, browsers did not have fast Javascript execution and redraw frames were universally slow. So my original vision for fading out a list of blog posts wasn’t really achievable while still maintaining a usable experience. Instead I compromised my design intent with sequential transparency effect as the blog posting list got long. Modern browser capabilities have resolved my original concerns, so follow along as I take you through the steps of implementing a blog list that fades out as the items scroll off screen.

CSS-only solution for Flash of Invisible Text using font-display

My recently article on resolving the Flash of Invisible Text in Drupal left me wanting. It was never fully resolved since I was using Google Web Fonts, and they haven’t specified the CSS font-display property in their stylesheets. Using a pure CSS solution will have much better performance than Javascript, so I decided to do deeper investigation to see if this is solvable without self-hosting the webfonts.

There’s three things I want to test:

Drupal Performance: Significant Improvements for Little Effort

Website performance is arguably the single most important area where you can invest your development time and resources. No matter how unique your marketing message is, or how empowering your product, you will not see conversions if your site is slow to load. Mobile users on fast connections are still subject to network intermittencies. Peak traffic congestion can degrade the speeds that visitors normally connect with. Even disregarding dialup users, plenty of your desirable segment of visitors may be browsing from airports, traveling internationally, or at a coffee shop.

Enabling PWAs on Drupal

Progressive Web Apps are a great way to improve the performance of a website. Besides the functional behaviors that they provide, making a website feel more like a native app, they are predicated on leveraging service workers to improve site caching and offline support so the site can still be viewed even if the visitor has an intermittent (or unavailable) network connection. Follow along as I use Google's Lighthouse audit to enable Progress Web App capabilities on my Drupal-based website.

Drupal Performance: Eliminating the Render-Blocking resources

One of the biggest factors in page performance is render-blocking assets. These are assets that prevent the page from being rendered while they load. Typically this is Javascript and CSS in the head of the document. When you're using a CMS like Drupal, you often don't have much control over how these are structured since the CMS does its own management for combining various files into cached versions depending on what components or modules exist on a given page.

Drupal Performance: Eliminating the Flash of Invisible Text

Today there are a plethora of fonts available for use on the web. All major browsers support web font technologies, and there are many foundaries and freely licensed fonts available for making a site look just so. We no longer have to deal with the extremely limiting set of baseline fonts installed on visitors' computers. However, the rise of webfonts also means that there is a performance impact to using them. When the browser loads the site, it also has to load the fonts, just like any other static asset.

Fixing hangs in Drupal Admin on Media Temple Hosting

So a while back, I identified that Drupal can run incredibly slow on MediaTemple's Grid Service. It's otherwise a great hosting plan that I've been very happy with. SSH access, easy to configure with additional domains, scales well. Of course I forgot about this as I did my Drupal conversion, but it looks like there's a fix.