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.

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.