Software Development | UX: Page Load Time

UX: Page Load Time

Overview

Web pages should be as lightweight as possible so they load quickly, which promotes a positive user experience (UX). Images are usually the heaviest part of a page, so serving appropriately sized images is one of the most effective ways to reduce load time.

"The faster your website's load time is, the happier your visitors will be. In other words — when you optimize your web page's load time, you can expect to see improvements in user experience, conversion rates, and ultimately, sales revenue." – Kristen Baker, HubSpot

Prepare

Users expect pages to work at any viewport width without horizontal scrolling or zooming, and they expect them to load quickly on any connection. Responsive images address both: the browser chooses an image that fits the layout, so a phone does not download a large desktop image.

Activity Instructions

  1. Navigate your browser to codepen.io and sign in or create a free account.
  2. Create a new pen that displays one image using an <img> element with a srcset attribute listing at least two sizes of the same image (for example, 400 and 1200 pixels wide). You can use an image placeholder service for the images.
  3. Add a sizes attribute and meaningful alt text.
  4. Open the pen's full page view, then open the DevTools Network panel with Disable cache checked. Reload at a narrow and a wide viewport (use Device Mode) and note which image file is downloaded and its size.

Submission

Follow your course's assignment instructions for sharing your CodePen.

Optional Resources