Skip to main content

Home/ @Publish/ Group items tagged Retina Display

Rss Feed Group items tagged

Pedro Gonçalves

Web Developers Brace For the MacBook Pro's Retina Display - 0 views

  • The new laptop, which Apple unveiled last week, already has Web designers and developers trying to figure out how they're going to create sites and Web apps that look good on the new machine without leaving the rest of the Web's population behind.
  • One of the key advantages of these high-resolution displays is their crisp, highly readable rendering of text. That particular buck stops with the Web browsers, which are much more varied on the desktop than on mobile devices. Naturally, Safari supports retina-friendly text, but Chrome is still working on it, and other browsers will presumably follow.
  • For image-heavy sites, swapping out higher-resolution images can have a substantial impact on page load, which in turn affects user experience and even search engine rankings. 
  • ...2 more annotations...
  • 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.
Pedro Gonçalves

Standards and benchmarks - 0 views

  • The average top 1,000 web page is 1575 KB.
  • Page growth is a major reason why we keep finding, quarter after quarter, that pages are getting slower. And faster networks are not a cure-all for the challenges of page bloat.
  • According to Akamai’s most recent quarterly State of the Internet report, the global average connection speed among the top 50 internet-using countries is 3.3 Mbps — a 5.2% increase over the previous quarter. But when we’re seeing year-over-year page growth ranging from 45-50%, it’s easy to see that the gap is widening.
  • ...16 more annotations...
  • 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%.
1 - 2 of 2
Showing 20 items per page