Evolving to a Faster Web – Speeding up Images, Video, and JavaScript

The web today is an amazing visual and interactive stew, teeming with images, photos, videos, and whizzy web apps. Some of the web’s most vivid experiences come from images and videos, from shared photo albums of family vacations to online video coverage from journalists in war zones.

It’s a far cry from the simple text and links that started it all. And it means that every time your browser loads a web page, much more data and complex code needs to be processed.

How much more, and how much more complex? A few astounding statistics:

  • Images and photos now make up about 65% of the information on a typical web page, in terms of bytes per page.
  • 24 hours of video are uploaded to YouTube every minute of the day. (That’s like Hollywood releasing 130,000 new full-length movies every week, though with less popcorn.)
  • JavaScript programs have grown from a few lines to several hundred kilobytes of source code that must be processed each time a web page or application loads.

So won’t all these gushing floods of data slow down page loads on the browser? Will the Internet clog up and turn to molasses soon?

Probably not. Images and photos became commonplace on the web when computer scientists found ways to compress them into smaller files that could be sent and downloaded more easily. GIF and JPEG were the most popular of those early file-compression systems. Meanwhile, plug-ins were invented to work around the early limitations of HTML so that video could be embedded and played in web pages.

Looking ahead, the <video> tag in HTML5 makes it easy for videos to be embedded and played in web pages. Google is also collaborating with the web community on WebM, an effort to build out a free, open-source video format that adapts to the computing power and bandwidth conditions on the web, so quality video can be delivered to a computer in a farm house in Nebraska or a smartphone in Nairobi.

In the meantime, it’s true that web pages with lots of big photos or other images can still be very slow to load. That’s why a few engineers at Google have been experimenting with new ways to compress images even further while keeping the same image quality and resolution. The early results? Very promising. They’ve come up with a new image format called WebP that cuts down the average image file size by 39%.

The engines that run JavaScript code in modern web browsers have also been redesigned to process code faster than ever before. These fast JavaScript engines, such as Google Chrome’s V8, are now a core part of any modern web browser. That means the next generation of fabulously useful JavaScript-based web applications won’t be hampered by the complexity of more JavaScript code.

Another technique that modern browsers like Chrome use to fetch and load web pages much more quickly is called “DNS pre-resolution”. The process of translating a web address into an IP address through a DNS lookup, or vice versa, is often called “resolving.” With DNS pre-resolution, Chrome will simultaneously look up all the other links on the web page and pre-resolve those links into IP addresses in the background. So when you do actually click on one of the links on the page, the browser is ready to take you to the new page instantly. Over time, Chrome also learns from past visits so that the next time you go to a web page that you’ve previously visited, Chrome knows to automatically pre-resolve all the relevant links and elements on the web page.

Someday, browsers might be able to predict, before the page loads, not only which links to pre-resolve, but also which website elements (like images or videos) to pre-fetch ahead of time. That will make the web even quicker.

Soon enough, we hope, loading new pages on the browser will be as fast as flipping the pages of a picture book.

Be the first to comment

Leave a Reply