Ever since I became more interested in typefaces and web design, Ideal Sans had been my unicorn. When I initially became interested in using that font on my website, I knew very little about HTML and CSS, or webfonts in general. Because of that, I wasn’t sure how to add it to my website. All I knew was that I liked it. Marco used it for his blog and app, and Q Branch used it for Vesper. It’s also available in the Feedbin webapp (along with other Hoefler originals like Whitney).
When I moved from Squarespace to Camel last month, one of the lights at the end of the tunnel was securing Ideal Sans for the website. I remember the first time I deployed my site and I saw that beautiful and personable typeface staring right back at me. What joy.
I had done it. I made my own website. And I made it look good.
Settling On Ideal
Over the course of the next few weeks, I was constantly tweaking this and that in CSS. Up until a few days ago, page load times were a rather trivial matter for me. From the beginning, I knew there would be no way to match John Gruber’s lightning-quick Daring Fireball, which loads in approximately 1 second on desktop and mobile.
Thus, Daring Fireball this is not. And there really isn’t anything wrong with that.
Still, ever the tinkerer, I
The Slow Web
While I was writing that post last week, I experimented with a jQuery plugin called Lazy Load, by Mika Tuupola. The purpose of that plugin is to prevent the loading of embedded images until they come into
viewport. I had to edit the source code (Markdown/HTML) for my posts by adding a special class to images,
<img class="lazy", as well as add a
data-original= modifier in place of the traditional
src=. When the image comes into focus on the webpage, Lazy Load dynamically reads the
data-original= content and inserts an
src= string into the
<img> tag, thereby loading the image. It’s a pretty nifty plugin—at least in theory.
Truthfully, I’m not sure why I was so bent on trying this. At the time, I justified using it by telling myself that it would make TheOverAnalyzed load faster. From the beginning, this was flawed logic. Previously, I tested the site against the
Disable Images option in Safari’s Develop menu. And guess what? Disabling images never made a meaningful difference in page loading times.
But I tried Lazy Load anyways. Funnily enough, the deployment of the site that contained my aforementioned post on slow-loading webpages coincided with my trying Lazy Load full-tilt. And guess what? It actually increased the page loading of TheOverAnalyzed! Yes, while my ‘holier than thou’ post was being propagated to FeedPress and social media, my site was all the while slower than before I wrote my post. How ironic.
src= string, the layout of the page was modified. That couldn’t have been healthy for page loading speeds. This was especially apparent on mobile, where the page loading time increased from around 2.5 seconds to 5 seconds. That is a long time to wait for a page to load. I can’t imagine why anyone would stick around that long to wait for my homepage to generate.
Less than an hour after that deploy, I had re-edited my posts to remove the Lazy Load image classes and attributes, and I had completely removed the plugin from TheOverAnalyzed. So then: back to square one.
View Page Source window, I noticed something. In general, TheOverAnalyzed initializes rather quickly, somewhere in the range of 100ms. However, immediately thereafter—before loading the next resource—there was latency of around 800ms. That next resource I speak of is the Ideal Sans webfont, served up via Hoefler & Co’s Cloud.typography backend.
800ms. That’s almost an entire second of latency. And Ideal Sans—my favorite font—was the culprit.
Could I fix this?
Considering The Inconsiderable
Interestingly, while I was examining TheOverAnalyzed’s page source and realizing that the Hoefler webfont was killing my page loading, an important conversation was happening on Twitter.
@benthompson No one should ever do anything that makes a website slow.— John Gruber (@gruber) July 14, 2015
Moreover, it seems Craig Hockenberry has experienced (or at least has knowledge of) webfont latency for himself:
If Ideal Sans was the problem, I wondered how fast TheOverAnalyzed would load without it?
Gaining A Second
I also commented-out the stylesheet helper for the webfont in the
<head> section (
header.html for Camel)
Once that was done, the results were noticeable.
Yes, still not Daring Fireball, but significantly quicker page loading without the Cloud.typography latency.
Slow Is Death
Ben Thompson of Stratechery recently wrote on the subject of web advertisements from the perspective of both the publishers and the readers. Always the pragmatist, he had this to say:
The problem for publishers, though, is that dollars and cents — which come from advertisers — are a far more scarce resource than are page views, leaving publishers with a binary choice: provide a great user experience and go out of business, or muddle along with all of the baggage that relying on advertising networks entails.
He also puts the slow web conversation into perspective with regard to Facebook Instant Articles:
If the New York Times cannot resist programmatic advertising, what chance does iMore or the vast majority of online publications have? If anything this puts Facebook’s Instant Articles initiative in a far more positive light: the social network is offering to not only improve the user experience by displaying articles instantly — thanks, primarily, to the lack of programmatic advertising cruft — but also to help monetize said content by selling ads against it and sharing 70%, backed by profile data that is far superior to even the ad networks.
Indeed, arguably the biggest takeaway should be that the chief objection to Facebook’s offer — that publishers are giving up their independence — is a red herring. Publishers are already slaves to the ad networks [emphasis added], and their primary decision at this point is which master — ad networks or Facebook — is preferable? [A reckoning is coming], as I noted when Facebook’s Instant Articles launched. The future for most publishers is likely that of pure content production only, save for the few — like Gruber — who are destination sites capable of selling native advertising in stream (or selling subscriptions, like this site). What is very much in question is exactly how users will feel when they finally get what they claim they wish for.
Ben Thompson is coming at slow loading webpages from a different perspective than me. The point of his post was to explain how iMore’s job of making a Gruber-approved webpage is easier said than done. Because the average web reader is not willing to pay for content, ads must be served to keep the publisher publishing. And, as Thompson asserts, users can’t have free without ads. For both the publisher and the reader, Facebook Instant Articles (and Apple News) might not be that bad after all, on an infinite time scale.
Still, I am not sure if I’ll stay away from webfonts forever. I haven’t taken a serious look at Adobe’s Typekit or Google Fonts, because neither one offered Ideal Sans. I might experiment with those services in the future. For now, however, I think I’ll be okay with Avenir. It’s no Ideal Sans, but it sure beats Helvetica.
Nothing’s changed. I don’t think I’ll ever be truly done with my website. ↩
I tried San Francisco, per Craig Hockenberry’s recommendation, but I think the font name changed since his original post. He warned that might happen, since iOS 9 / 10.11 are still in beta. I’ll have to revisit this when both OS’s are officially released. ↩