Lightweight Pages

One day, you innocently click on a link to a website that turns out to be slow or broken. Time slows down. Your smartphone is troubled and grow impatient and your finger gets twitchy over the back button.

A website's load time is important to a visitor’s experience. There are many factors to consider when designing and developing a website, but even small increments in page speed can have big results. Google has made it clear that page speed is one of the factors involved with search results ranking.

loading a lightweight web page

Creating a website is a balancing act and keeping the page load time down is an ongoing process. When the time to load a page can be improved without compromising other factors, it is always worth doing.

A web page's load time is a combination of two factors, the connection speed and the page weight. The connection has a variable speed, but page weight is a single knowable number that can be optimized.

So what is page weight?

When you click on a link to view a website, the browser starts retrieving files from the website's server. That server resides somewhere on the planet and your computer or smartphone traverses the vast Internet network to download those files.

The connection between the browser and the far off server is conceptually a stream of bits. In real life, data gets moved faster than one bit at a time and that technology continues to improve. But for discussion purposes, think of it as one bit at a time, so the bigger the file, the longer it takes.

Websites contain files of software, pictures, fonts, and other assets that allow the full display of a web page. The weight of these assets is measured in the number of bits. But personally, I have always found the units used to measure digital assets, such as megabyte, vague and meaningless.

Instead, let’s use the old fashioned American weight system, and make 1000 bytes (1 kilobyte) = 1 ounce.

The following table lists a web page with a summary listing of all the movies on Skipping Scenes, both before and after image optimization. In addition, for better understanding of relative speeds, let's use an example of a connection that transfers 10 pounds in 1 second.

Page Size Weight Speed
C Skipping Scenes before optimization 2.2 megabytes 126 lbs 6.3 seconds
D Skipping Scenes optimized 1.2 megabytes 75 lbs 3.7 seconds

The movie page on Skipping Scenes is far more interesting and effective to see all the cover art, than just a listing of movie names. But a design like this gets heavy quickly with each graphic taking up download time.

The first version of this movie listing had a overall weight of 126 pounds, which is 7.5 times bigger than this web page. The download time would be 6.3 seconds, which is noticeable. But when the images were optimized, it weighed 75 lbs, taking 3.7 seconds.

Skipping Scenes benefited greatly from image optimization, going from 6.3 seconds to 3.7 seconds. There was very little visual difference between the version with the optimized images versus original and the quicker download time is more bearable for visitors.

When a page takes a long time to load, visitors will often abandon the page they are trying to visit, either because they are tired of waiting, or believe something is wrong with the website. In all 1 Happy Place web designs, page loading is a top priority. While we are discussing different aspects of your website, I will often refer to the impact on page load time, so you can make an informed decision about the design and development of your website.