Insights

Website Performance: Does a Millisecond Matter?

Looking for designers or developers for your next project?

Black Pixel offers design, development, and testing services backed by unrivaled experience.

Hire Us

Humans hate to wait. That's especially true when it comes to the Web. Studies show that if your site takes longer than the blink of an eye (400 milliseconds) to load, it's too slow. If it's 250 milliseconds slower than your competitor's site, users will visit them instead. A website's performance influences usability, engagement, and ultimately impacts a business' bottom line.

Our Web team is skilled at diving deep into clients' code and weeding out the complex issues that hinder website performance. But there are a handful of fundamental problems that come up time and again. To help you boost your site's performance, here are some common pitfalls to avoid.

Performance Issue #1: Not optimizing images.

Graphics often dominate a page's downloaded bytes. Optimizing them can give your site a big performance boost. By reducing the bytes a browser has to download, you minimize the competition for bandwidth. That means the browser can download and render a site's content to the user's screen faster. 

It's not enough to optimize graphics for one screen size though. As mobile device use increases, it's imperative that graphics are optimized for all screen sizes.

"It's easy to get lazy and have your site serve up the same 2600-pixel-wide background image that looks great on your desktop retina display for every user, even when we can take simple steps to detect a user's device size, screen density, and other factors," says Design Director Tom Carmony.

Generating different versions of your graphics for different screen sizes and resolutions doesn't take a lot of production time, and the payoff is better performance and increased engagement. For businesses operating at a scale, optimizing graphics also offers a considerable savings on bandwidth.

Performance Issue #2: Disrupting the first render.

"Our goal should be getting the most out of your first render," says Designer Charles Peters. "You have about 14KB on first render to deliver content. After the first render, your user can ideally start interacting with your content."

Making too many individual HTTP requests to load lots of scripts or stylesheets and placing non-critical JavaScript in the header of your page will delay the page's perceived load time and thwart user engagement. We can maximize what the user gets on first render by improving the critical rendering path, or the steps taken by the browser to turn HTML, CSS, and JavaScript into what the user sees when they click on your site.

"No user should have to sit for five seconds waiting for an article she wants to read, because all of your poorly implemented JavaScript is eating up bandwidth and server calls," says Carmony.

Performance Issue #3: Abusing third-party scripts.

The volume of trackers and analytics scripts used on websites plays a big role in slowing things down. Often, site owners use these tools to collect user metrics, like who is visiting their site, where they're coming from, and what kind of device they're using.

"Anyone who's ever installed an ad-blocker plugin, such as Ghostery, has likely been shocked by the number of unnecessary scripts found on many sites," says Carmony. "Sites can easily be doubling or tripling (or worse) their page load times solely through the use of tracking scripts."

Businesses can better serve users by knowing more about them through basic data analysis, but using dozens of tracking scripts will have a negative impact on site speed and user engagement. If you're installing an analytics package, do some research and select the best one for your needs. Don't install all of them.

"On any journey there comes a time to really think through what you're carrying in your pack and why," says Peters. "Evaluate what your code is doing and why it's there. Ask hard questions about whether you can make your CSS more lightweight or if you can remove some of your JavaScript dependencies."

Time is money. When all of those milliseconds are added up, how much do they cost your business?