How Web Pages Load


Part One Chapter 01

Website

Web page load speed is one of the most important user experience factors for mobile websites.

  • 74% – Users who expect a mobile website to load as quickly as a desktop website.
  • 57% – Users who will not recommend friends to use a website in which they have experienced slow loading.
  • 46% – Users who will not revisit a website in which they have experienced slow loading.
  • 5 seconds – Users will leave if a website takes longer than this length of time to load from a mobile device.

Let's demonstrate how a web page loads when it is visited by a user through web browser.

Website: www.chinawaw.org

  • A website that has been created with the responsive design method. The content management system (CMS) software is actually WordPress.

Tool: www.webpagetest.org

  • It is a typical tool for page speed test.

The Page Speed Test

The homepage of www.chinawaw.org has been tested on the Web Page Test tool. Each horizontal bar is a http request. The first bar “www.chinawaw.org – /” is the initial request for the page's HTML document. The web browser parses the page and starts downloading the resource files that are for constructing the page.

Web Page Loads

There are many more resource files that are required to be downloaded before the entire page can complete loading, but some of the resource files are:

www.chinawaw.org/.../css/foundation.min.css
www.chinawaw.org/.../css/font-awesome.min.css
www.chinawaw.org/.../css/photoswipe.css
www.chinawaw.org/.../css/flexslider.css
www.chinawaw.org/.../css/responsive-tables.css
www.chinawaw.org/.../smartadapt/style.css
www.chinawaw.org/.../jquery/jquery.js
www.chinawaw.org/.../jquery/jquery-migrate.min.js

The majority of the load time has been spent on downloading all the resource files that are required to construct the entire page. The resource files may be CSS files, JavaScript files, image files, etc.

Page Speed Metrics

The report shows the key metrics when a web page loads. They are the metrics that measure the performance of each file resource when the page loads. The key metrics include:

DNS lookup time

The amount of time it takes for a DNS lookup request to map a hostname to an IP address.

Initial connection time

The amount of time the requesting web browser waits to connect with the web server.

Time to first byte (TTFB)

The amount of time the requesting web browser waits to receive the first byte of data from the web server.

Content download time

The amount of time it takes for the web browser to download the content of the page.

If you can shorten any of these times (i.e. DNS lookup time, initial connection time, time to first byte, content download time), your page will load faster.

The Steps

Speed optimization for a typical mobile web page is a process. The steps include:

  • Test the load speed of a specific page.
  • Capture the page load time. For example, load time of the page = 6.531 seconds.
  • Capture the key load speed metric values of each file resource of the page. For example, the metric values of the page's CSS file are: DNS lookup time = 400ms, initial connection time = 200ms, TTFB = 600ms, and content download time = 300ms.
  • Figure out the causes that could have slowed down the page's load speed from the captured data.
  • Apply the appropriate techniques to optimize page load speed against the causes.


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Books:
The China Mobile SEO Book
Analytics Book