Calm Your Pages and Stop the Hopscotch

Design a page so it doesn’t jump up and down for several seconds (or minutes!) while a user is loading it. Please. It’s very annoying to try to click on something and discover you clicked on something else because it was hopping under your mouse or your finger.

BULLETIN: A Web specification and a browser are updated to restrain this annoyance. I can’t say that I influenced the solution, but the problem evidently was a problem for many users. I’ve updated this website, by making my CSS default explicitly match the common default for browsers that implement it. For browsers that don’t, or don’t do it well enough, please design your website to get along well with people. Here’s information from the Web Incubator Community Group (WICG), Smashing Magazine, and Mozilla’s MDN Web Docs.

Lots of websites have this nervous breakdown. Often, it’s due to content because it’s being inserted, like ads and images. Sometimes, it’s because one page has several stylesheets, and first one stylesheet with one set of fonts is applied, then, in a second or two, another stylesheet takes over with its own fonts, shoving stuff left and right. And it’s not just making one big jump. It’s making lots of hops, plopping whitespace, filling it, plopping more gaps, filling them, yada yada and on and on.

The hardest to fix are the ads, because you likely get them from other servers, likely routed through a couple of servers because your page pulls from one server which in turn signals another server which in turn sends an ad that’s interactive. You choose ad servers according to the profit prospects, so you may not have much choice.

Replacement files should be okay, but if you’re getting them from distant servers with long latencies while your basic page has a short latency or travel time, then the difference in load times may be enough to rattle your users. See if you can have the replacement files come from the same server as your main files do, or if you can arrange caching or copying of distant files to where your main files are hosted so it’s as if they’re coming from the same server.

Stylesheets being multiple still surprises me. I’ve asked why they exist and haven’t gotten a useful answer, but I didn’t ask the sites that have them. I don’t understand why anyone would want styles that last only for a couple of seconds for content that’s mostly text, maps, and photos, content that’s mostly stable, but maybe the reason is a good one. But the effect is distracting. What’s wrong with your content? Maybe nothing, but I’m getting fed up because the pieces of the page jerk around like puzzle parts that don’t fit.

Google ranks websites more highly if their algorithm predicts a more satisfying experience for visitors. Loading time is one factor Google looks at. If you measure load time, measure it from when you request a page until the entire page is fully loaded, not just to when it starts to fill your browser.

Test your pages after your host starts serving. If you have a superfast computer, try visiting from a slow computer CPU with only a little memory (RAM) and a slow connection to the Internet. That’ll let you mimic how your more typical visitors experience your website. People use computers, laptops, tablets, and phones that were never sold as servers but were ordinary two to three years ago, and you might want to assume that even older machines speckle your audience, depending on your subject and the demographics.

Some online services will measure latency for you. A better service would measure latency of each piece of a page, like an ad or an image, although you’d have to average ad latency over a reasonably large sampling of ads, because different ads will likely come from different servers, at different distances, with different latencies, especially if your audience is scattered around the world and is of interest to advertisers scattered around the world. I think if you have latency of a half a second (500ms) or less, you’ll keep your visitors, but even within that time frame if you have very different latencies within one page the user experience is disturbing and you can lose visitors, so separate measurements would be helpful. Depending on your agreement for ads you publish, you likely are forbidden to click on an ad and someone you ask to service your website would therefore also be barred from clicking on an ad, so you likely have to develop a method of measuring latency that does not require clicking on an ad. I don’t know who to recommend for measuring latencies, but Googling should find you a few.