Group items tagged

To deal with this issue, Web developers can borrow from some of their tried-and-true methods. For years, websites have used browser detection to deliver different CSS stylesheets to different browsers. A similar approach is used to craft responsive designs - when sites load different layouts depending on the device being used to view it. Likewise, this sort of tactic could be used to handle graphics

That's exactly what they're doing at O3 World, an interactive agency based in Philadelphia. To account for different screen resolutions, they've begun creating multiple sets of graphics, which are delivered dynamically, depending on the user's screen resolution.

A whopping 804 KB per page is comprised of images. Three years ago, images comprised just 372 KB of a page’s total payload.

images are one of the single greatest impediments to front-end performance. All too often, they’re either in the wrong format or they’re uncompressed or they’re not optimized to load progressively — or all of the above.

Today, 38% of pages use Flash, compared to 52% in 2010. This is a good thing. Nothing against Flash, per se, but if Apple has no plans ever to support it, its obsolescence is inevitable in our increasingly mobile-first world.

use of custom fonts has exploded — from 1% in 2010 to 33% today.

But custom fonts have a dark side: they can incur a significant performance penalty.

These days, images on the web have to work hard. They need to be high-res enough to satisfy users with retina displays, and they also need to be small enough in size that they don’t blow your mobile data cap in one fell swoop. Responsive web design attempts to navigate this tricky terrain, with varying degrees of success.

Google published findings, based on Google Analytics data, which suggest that load times have gotten marginally faster for desktop users, and up to 30% faster for mobile users.

Here at Strangeloop/Radware, we’ve found the opposite. Using WebPagetest, we’ve been testing the same 2,000 top Alexa-ranked ecommerce sites since 2010, and our data tells us that top ecommerce pages have gotten 22% slower in the past year.

This quick-and-dirty case study illustrates how network speed doesn’t directly correlate to load time. For example, download bandwidth increases 333% from DSL (1.5Mbps) to cable (5Mbps), yet the performance gain is only 12%.

Move scripts to the bottom of the page

It’s better to move scripts from the top to as low in the page as possible. One reason is to enable progressive rendering, but another is to achieve greater download parallelization.

Make JavaScript and CSS external

If users on your site have multiple page views per session and many of your pages re-use the same scripts and stylesheets, you could potentially benefit from cached external files. Pages that have few (perhaps only one) page view per session may find that inlining JavaScript and CSS results in faster end-user response times.

Reduce DNS lookups

Minify JavaScript

In addition to minifying external scripts, you can also minify inlined script blocks. Even if you’re already gzipping your scripts, minifying them will still reduce the size by at least 5%.