Loading Web Fonts Without Performance Penalty From Lighthouse

One thing that will most certainly lose you performance points in Google Lighthouse Performance Audit is loading web fonts. More specifically, loading web fonts in a way that render-blocks.

If you simply drop @font-face into your CSS or load <link rel="stylesheet" ... /> tags into your <head/>, Google Lighthouse will hate you. Even if you are loading a Google Font.

Don’t despair! It’s very easy to avoid this penalty.

Step 1: Skip the <link/>

To avoid render-blocking, don’t just add the default <link .../> or @import { ... } code that Google Fonts gives you to your site. Google Fonts gives you a link to a stylesheet which loads the fonts. We want to skip this interim step and load the content of that stylesheet directly.

So for example if I want to load the font Raleway, Google gives me:

<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

So I load the URL https://fonts.googleapis.com/css?family=Raleway in my browser and get its contents.

The CSS file contains all of the @font-face { ... } rules for loading my font. I’m going to copy them into my site’s CSS.

Step 2: Setup Font Swapping

Now that we’re loading the fonts directly via @font-face { ... } rules in our own CSS file, we need to instruct the browser to how to handle the font before it is fully-loaded. We use the font-display CSS rule for that.

Setting font-display: swap; tells the browser to use the closest matching font in the font stack, and then swap in the web font after it loads. Setting font-display: optional; tells the browser to use the closest matching font in the font stack that is currently available, or is available within 100ms of page load. In other words, the web font will not be swapped-in if it is not almost immediately available.

What’s the downside? The font-display property doesn’t have great cross-browser support,and the default behavior varies from browser to browser. On most browsers the default behavior will be FOUT: a flash of unstyled text,while the browser displays the closest matching font, and then loads the web font when it becomes available. This experience can be a little jarring.

If you use font-display: swap; and your user’s browser supports it, your users will experience FOUT before the font loads for the first time. After the font is loaded and cached, it will be used immediately.

If you use font-display: optional; users whose browser supports the property will not notice FOUT, but they may experience a page rendered in the closest matching font in the stack when the web font is not immediately available. On subsequent loads (when the web font is cached), pages will render immediately using the web font.

Small Rental Agencies: Don’t Bother with a Zillow Feed

This is a follow-up to a previous article we wrote about integrating with Zillows Listing Feeds.

While the technical specifics of integrating with Zillow remain true, recent experience has led to the conclusion that small agencies cannot trust Zillow Listing Feeds to work for them, and we cannot make the recommendation to use them.

Zillow Feeds Explained

Zillow is a popular real estate and rental aggregation service. At the time of writing, Zillow, HotPads, and Trulia are all the same company using more or less the same database. Getting listed in one usually means you’re listed in all three.

There are numerous methods that agencies and agents can publish their listings to Zillow. A popular method is by building a Zillow Listing Feed. The basic premise of building a feed is that you can take the data you’re managing elsewhere and publish it in Zillow’s XML format, which they will read and update daily. Agencies and agents love feeds because they already have to enter the same data into their websites and/or MLS. Building a feed means they can publish to Zillow without doubling their workload: they no longer have to enter their listings a second time into Zillow Rental Manager.

Our History with Zillow

In my previous position at another agency, I built my first Zillow Listing Feed for a local real estate agency. It was not without it’s issues: we learned some hard lessons about how Zillow compiles data from multiple sources and decides which is the “source of truth” for your listings, but overall it was a massive success. When I started Reich Web Consulting, I made it a goal of mine to leverage this new skill set to build affordable solutions for other real estate agencies and agents.

I built a WordPress plug-in for property management that tracks all 200+ data points available in the Zillow Listing Feed specification. This solution was massively successful to the three small local rental agencies that currently use it. I was hoping this would be something that got big. That would make a difference in the rental agency community.

Client Number 5

In late 2018, the co-owners of one of the agencies using this solution decided to part ways. One kept the old site and feed. The other started a new business with a new website, and a new feed. The new business has about 100 properties, with anywhere from 2-8% of them vacant at a given time. We submitted our feed to Zillow in late December.

Where Things Went Wrong

Our history with Zillow informs us that getting listed takes time, so when they weren’t showing up by mid-January I didn’t get too worked up. I contacted feeds@zillow.com, the support address referenced in the Zillow Listing Feed specification document. No one responded. Another month later I tried again, with no response.

By March my customer was getting quite frustrated, so I started getting desperate.

I tried calling. There is no published phone number for Zillow feed support. So I dug up and called their customer service number. There is no option for feed support. There is no option for support without an account. Fortunately Client #5 has a Rental Manager account, which they provided. But when I called back I discovered that you can’t get through the call system without a paid account.

So I started emailing anyone at Zillow I could find, including the direct email address of several Zillow support staff that had helped me in the past. I considered naming names and email addresses, but even as worked-up as I am, I don’t want to dox anyone. No one responded back.

By this time it is early April. The feed is still not being pulled by Zillow. I decided to attempt a Hail Mary and resubmit the feed and while doing so, I notice two things. First, I notice the following language:

If you have more than 200 listings, you can send us listings data through our free automated feed program.

Zillow Listing Feed Program

At this point I am pretty certain I know what the problem is, though previous clients have had small feeds and got into the program. I also see another email address: listingsupport@zillow.com and I decide to make one last attempt to get help.

Zillow’s Unsupportive Feed Support

I sent an email to listingsupport@zillow.com simply asking if the mailbox is active, and two days later I get a response back asking how they can help. I tell them my situation in detail. Here is the response I receive back:

Thank you for clarifying about your issue. I looked it appears that you are only sending to us 4 listings, which at this point we recommend you just use Zillow Rental Manager to create your listings.

Phong, Zillow Listing Support

Before the split, the larger company had well over 200 listings which met their requirement. The new company has around 100, and is fortunate enough to only have a few vacancies. I think this might help make our case, so I reply back:

Hi Phong,

The client has significant more units (over 100), but only 4 are currently vacant. It would be very cumbersome to manage all of those manually through the rental manager. Should I be sending the rest of the properties in the feed with a different status?

Brian Reich, CEO, Reich Web Consulting

He responds back:

On average, how many properties are vacant?

Phong, Zillow Listing Support

Cool, now we’re getting somewhere! I contact the client, get that information, and respond back. I decided to appeal to their humanity by being honest about the situation, why the businesses split, leaving two smaller feeds under their 200 listing recommendation. The email below has been redacted to protect the identity of our client.

They typically have 8-10 available at any given time.

Phong here is some additional background.  This client, Rental Agency B, was previously part of a family business called ”
Rental Agency A” for which I built a feed years ago which Zillow is already successfully processing. With the exception of that site having a brief downtime issue about a year or so back I believe it’s been pretty reliable and low-maintenance for both of us.  The owner of that business was diagnosed with a terminal neurological disease, and as a result his wife and children (all co-owners) decided it was best to separate their interests into separate legal entities.

Rental Agency B is the children’s new business.  All of the properties that are in this feed were previously in the feed of Rental Agency A and had to be legally removed from that site/feed when the business was legally split up. I know it’s not Zillow’s responsibility to care about any of this, but my point was that all of the listings that are in the Rental Agency B’s Feed were rental properties that were already accepted and listed under the other business’ feed just a few months ago. If not for their dad being diagnosed with Alzheimer’s and the business structure being forced to change, they’d still be there and we would not be having this conversation. And if not for a lawyer forcing me to split the sites up, I’d put them right back in the feed you are already parsing.  Does that make sense?  I tell you all this to try and make the case that, even though this is a new business, the feed data actually has history with Zillow and is entirely trustworthy; if it were still combined with their family business we’d be at that higher feed size and there would be no issue to discuss.

They have tremendous success with the Rental Agency A feed and really depended on the leads they got from Zillow/Trulia/Hotpads to fill vacancies quickly. I’m really hoping your side can understand all of this and, if necessary, make an exception and parse this feed.

Thanks for your time and understanding.

Brian Reich, CEO, Reich Web Consulting

A day later, I receive a final reply:

Hey Brain,
Thank you for that update. Though I really appreciate the interest and the efforts made, I took a look at the Rental Agency A feed and from the looks of it when I looked from beginning of this year, it hovered from 0 listings to 2 listings and nothing more than that.
The reason why we have the Zillow Rental Manager product built is for reasons like those where it isn’t necessary to use your bandwidth and just to manage 2 listings when you can easily just use Zillow Rental Manager and do that.

Phone, Zillow Listing Support

At this point I’m resigned to accept that this conversation is going nowhere, but I’m frustrated. I’ve built several successful feeds that were accepted in spite of their size being below 200. I’ve submitted feeds in the past and did not see the language about 200 listings in the past (though it is entirely possible that I just missed it).

What I’m most frustrated about is the fact that Zillow doesn’t seem to understand or care, about the impact this has on smaller rental agencies. To quote Phong, it isn’t necessary to use your bandwidth and just to manage 2 listings when you can easily just use Zillow Rental Manager and do that.” He’s completely missing the point. Is Zillow Rental Manager easy to use? Sure. But not any easier than the solution my clients already have in place. Forcing them to use it forces them to double their efforts. And the claim that it’s just 2 listings is wrong. As I already told him they have over 100 and the vacancy status of those units change over time. Doubling the effort to manage a portfolio of that size is a considerable hardship. I sent a final reply more out of frustration than anything:

I’m done arguing my point. I’m clearly not going to get anywhere, but this is kind of ridiculous. My clients have a lot of properties, and they’re fortunate enough to keep them rented. I’m not sure why that’s counted against them. Rental Agency A‘s Zillow feed was critical for helping them keep their apartments rented, and constantly tell me that Zillow sends them the most qualified leads. As renters they love your front-end service. So based on that I built a system that allowed rental agencies to manage their properties in one place and feed them to their website, Zillow, and other aggregation services.  So to counter your point: unfortunately, no, they can’t “just as easily” use the Zillow Rental Manager.  It doesn’t get any easier than editing/updating your listings once, in one location. If they also have to manage all of their properties in the Rental Manager that essentially doubles their workload.

I build APIs as part of my job. If Zillow doesn’t want people integrating with their API, or has strict rules about who can access/use it, then they should be transparent about that. API’s are all about maintaining consistency over time.  How is it that this is the fourth feed I’ve built and sent to Zillow and I’m only now being told my clients are too small to participate?

Having built a pretty terrific WordPress plugin for property management that integrates with your API, I was hoping I’d be able to feed more information to Zillow in the future and make it easier for smaller rental companies to leverage Zillow without doubling their workload. Clearly making integration easy for renters isn’t actually what Zillow wants.  I’ll make sure that all of my rental and real estate clients are well aware of this in the future.

Brian Reich, CEO, Reich Web Consulting

The Takeaway

What advice can I offer rental agencies and agents?

Zillow only wants feeds with 200 or more listings, and that statement is a rule, not a request. As of the time I write this (4/25/2019), if you’re an agent with only a handful of vacant units at a given time or your portfolio is below this threshold, don’t waste your time building a feed to Zillow, Trulia, or HotPads. Accept that you need to either manually manage your listings via the Zillow Rental Manger or participate in a larger service is already integrated into Zillow, such as an MLS.

What advice can I offer to Zillow?

With great API comes great responsibility. When you create an API or similar service such as feed aggregation and make it public, you accept a certain amount of responsibility for making sure the experience stays consistent and does not break integrations. At some point Zillow instituted this 200 listing minimum. At some other point, they decided to actually enforce it. The language on their website is way too soft and calls a feed “the best solution” for agents with 200 or more listings. It does not say it’s a hard requirement to participate. It should.

Second: if Zillow wants to limit participation in the Zillow Listing Feed service, then don’t make it public. This entire fiasco could have been avoided if Zillow simply but feed submission behind a form that rejected us because the feeds didn’t meet their requirements.

Third: update your documentation. The Zillow Listing feed docs list a support email address that worked in the past but seems to be dead. This led to me beating my head against a brick wall and disappointing my client for months until I accidentally stumbled across a different email address.

Finally: take communication with developers participating in this program seriously. We can work together and help each other, if you’re willing to listen. Out of desperation I tried contacting several individuals at Zillow that have assisted me in the past. According to the LinkedIn profiles of those individuals, they are still at Zillow. But they did not respond to my requests, even by directing me to the right support channel. Instead myself and my rental agency client are left with a 4 month customer service nightmare.

Having said all of that: Zillow, I get it. I know you probably don’t want just anyone submitting feeds due to feed spam and listing scams. Other aggregation services that pretty much list whatever you throw at them similar to Ron Burgundy reading whatever you put on his teleprompter, are rife with scammers. I understand why you might not want to let just anyone participate. But you can make that a heck of a lot clearer.

And last: what advice can I offer to my future self, and those like me?

Don’t sell Zillow integration services to small real estate agencies and small rental agents. Or possibly to anyone.This has been a disaster of epic proportions for me. My business spent considerable development time and money building a WordPress plug-in for agents large and small to manage their listings from their website and feed them to aggregation services like Zillow, Trulia, and HotPads without duplicating their efforts. Based on past experience with Zillow we had no reason to expect it would be a tremendous failure.

We understand that the buck stops with us. I have a disappointed client. I have refunds to issue. But the most frustrating part is that this is all true in spite of the fact that I delivered a fully-functioning product. They have a feed that there is no technical problem with except that it doesn’t meet this minimum listing requirement, which was not communicated as a requirement to participate in the program in the first place.

I’ve lost a little money, and a lot of time on development. But the development hours pale in comparison to the amount of time wasted trying and failing to draw a conclusion to the situation due to Zillow’s lack of consistency and lack of communication.

I will not be offering Zillow feed integration services to customers in the future. But something tells me, this is exactly what Zillow wants.

Alphabetical Post Navigation in WordPress

Have you ever had a need to build a page with alphabetical navigation in WordPress? There are lots of scenarios where this makes sense:

  • Alphabetical sitemaps.
  • A Glossary or Table of Contents

I’m building a site right now focused on terms and their definitions. Presenting terms in a default archive loop makes no sense. A better experience is to present them as a glossary of terms with alphabetical navigation.

There are plugins that can get you where you need to go, but they’re not necessary. A little bit of custom template code leveraging PHP output buffering gets you where you want to go pretty efficiently.

Create a new Template

I’m building a glossary page that will list all of the posts in a custom post type, called term. By using the WordPress Template Hierarchy I know that WordPress will create that page using a template namedarchive-terms.php if I create one in my theme. This is a logical place to put my custom query and template code. Place yours wherever it makes sense.

Query the Content You Want to Display in the Alphabetical List

By default, any template code you write operates against WordPress’ default loop. If that’s what you want in your list, you don’t need to create a new query. I want my Glossary page to list all of the terms in the glossary alphabetically. I need to create a custom query that selects and loops the right content.

Build and Buffer the Content

That query gives me the content I want in my glossary page. Now I need to loop over the query and do something with it’s results:

  1. Build the alphabetical navigation elements.
  2. Build the alphabetically-sorted list of posts that can be navigated to using alphabetical navigation.

We have two choices. We can loop the content multiple times and build the two distinct elements. The second choice is to loop once and use output buffering to control what renders when. We’ll do multiple loops first, then combine and simplify in the final example.

Building the Alphabetical Navigational Elements

First, lets loop through the results and capture the first letter of all the posts to build our navigation:

The template code above is a cookie-cutter WordPress loop that iterates through the posts, captures the first letter of each post, and renders a navigation list of each letter that links to the anchor#begins-with-<letter>. If you’ve got a basic understanding of WordPress Loops and basic theme coding, it’s not too complex. Because our query already specified ascending alphabetical order, we don’t have to worry about sorting the list ourselves.

Now it needs something to link to.

Building the Alphabetical List of Posts

Next, we need to build out our list of content. In this example we’ll keep it simple: we’ll build a two-tier list with anchors.

In the code above we built a list of letters linked to the alphabetical navigation menu. Each list element contains a child unordered list of all posts that start with that letter. We create some flags that track the current letter and whether or not we’re in the middle of a list. We use these to properly open and close our ordered list and list item tags.

Putting it All Together

The two blocks above can be simplified by leveraging PHP’s output buffering functions. Output buffering essentially stores your output in memory so you can retrieve and display it at a later time. Using output buffering we avoid duplicate queries and loops. And we completely avoid tracking flags used to control tag nesting.

The first thing we do is create $alphabet, which is an associative array that will have letters as keys and arrays of output sections as values. As we loop our content we create an output buffer using ob_start(), output each post as a list item linked to it’s permalink, and capture that output using ob_get_contents(), save the output into the current letter, and close the buffer with ob_end_clean().

Finally, we use the keys of the associative array to build our alphabetical navigation. Then we use the array one more time to build anchored sections of content.