- Part One Chapter 01 – How Web Pages Load
Part One Chapter 01
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.
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.
- Next: Page Speed Test Tools
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 Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book