testing and improving performance
TRANSCRIPT
![Page 1: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/1.jpg)
Testing and Improving Performance
![Page 2: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/2.jpg)
Objectives
Assess performance
Plan usability tests
Perform browser tests
Test page loading speed
HTML 5 and CSS 3 – Illustrated Complete 2e 2
![Page 3: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/3.jpg)
Objectives (continued)
Incorporate a spritesheet
Optimize images
Reduce the size of CSS files
Customize modernizr.js
HTML 5 and CSS 3 – Illustrated Complete 2e 3
![Page 4: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/4.jpg)
Assess Performance
Performance: how quickly published site loads and responds to user interaction over the Internet Can't control user's connection speed Can identify bottlenecks by testing Can optimize code
HTML 5 and CSS 3 – Illustrated Complete 2e 4
![Page 5: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/5.jpg)
Assess Performance (continued)
Two factors impact loading time:Size of embedded/linked files
minified: result of automated process that removes characters not needed by browsers
HTML, CSS, and JavaScript files can be minified
optimized: result of process that compresses image filesorphaned styles: style rules based on selectors that don't apply to any elements
remove to reduce file size
custom build: version of library containing only features your site uses
HTML 5 and CSS 3 – Illustrated Complete 2e 5
![Page 6: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/6.jpg)
Assess Performance (continued)
Two factors impact loading time (cont'd):
Number of HTTP RequestsBrowsers limit number of simultaneous requests
Combine files of same type to reduce download timeSpritesheet: single image file containing all decorative images in a web page
6HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 7: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/7.jpg)
Assess Performance (continued)
Reducing HTTP requests by combining files:
7HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 8: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/8.jpg)
Plan Usability Tests
Best way to test usability is to collect feedback from site's users
Important to: Collect feedback from likely users Identify questions you want all testers to
answer Create a script to use consistently
throughout the process
HTML 5 and CSS 3 – Illustrated Complete 2e 8
![Page 9: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/9.jpg)
Plan Usability Tests (continued)
A usability test
HTML 5 and CSS 3 – Illustrated Complete 2e 9
![Page 10: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/10.jpg)
Perform Browser Tests
Helps ensure : Web pages are not published that display obvious
errors Pages are not published that don’t work as
expected for some audience members
Majority of users are likely to be using Windows Important to ensure Windows system access
for testing, as well as iOS and Android devices
HTML 5 and CSS 3 – Illustrated Complete 2e 10
![Page 11: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/11.jpg)
Perform Browser Tests(continued)
Icon missing on web page
11HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 12: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/12.jpg)
Test Page Loading Speed
HTML 5 and CSS 3 – Illustrated Complete 2e 12
Optimizing load time Improves experience of users Helps avoid users becoming impatient with
site
Chrome Device Mode Includes utility to simulate web page
loading at different connection speeds
![Page 13: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/13.jpg)
Test Page Loading Speed (continued)
13
Web page loading at simulated Regular 2G speed
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 14: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/14.jpg)
Incorporate a Spritesheet
HTML 5 and CSS 3 – Illustrated Complete 2e 14
Create using image editing software to add multiple images to single, larger imageResults in spritesheet, with all smaller images side-by-side or in gridDownloads in single HTTP request
Specify as background image for multiple elementsUse CSS to control which part is shown
![Page 15: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/15.jpg)
Incorporate a Spritesheet (continued)
15
Using a spritesheet in a web page layout:
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 16: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/16.jpg)
Optimize Images
HTML 5 and CSS 3 – Illustrated Complete 2e 16
Reduce size without affecting contentReduce quality in a way humans can't perceivePerformed by specialized software
![Page 17: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/17.jpg)
Optimize Images (continued)
17
Results of image optimization on tinypng.com:
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 18: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/18.jpg)
Reduce the Size of CSS Files
18
Orphaned styles: style rules based on selectors that no longer apply to any elements on your web pages
Removing orphaned styles: Reduces amount of code to download Shrinks download time Makes it easier for other developers to
work with
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 19: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/19.jpg)
Reduce the Size of CSS Files (continued)
19
Minifying removes unnecessary characters, which reduces file size
Result hard for humans to readMakes no difference to user agent
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 20: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/20.jpg)
Reduce the Size of CSS Files (continued)
HTML 5 and CSS 3 – Illustrated Complete 2e 20
CSS minification tool at cssshrink.com:
![Page 21: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/21.jpg)
Customize modernizr.js
21
Features in your website can change as you develop it
Include entire Modernizr library while building siteWhen you're ready to publish, create a custom build
Excludes code your site doesn't needReduces size of file users must download
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 22: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/22.jpg)
Customize modernizr.js (continued)
22
Download Modernizr page with options selected:
HTML 5 and CSS 3 – Illustrated Complete 2e
![Page 23: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/23.jpg)
Summary
Improving performance ensures your content is available as quickly as possible to users.
The best way to test the usability of your site is by collecting feedback from the site's users.
You should test your pages on the most common user agents for Windows, iOS, and Android.
HTML 5 and CSS 3 – Illustrated Complete 2e 23
![Page 24: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/24.jpg)
Summary (continued)
Testing your website at different connection speeds lets you see how quickly it might load for different users.
Combining decorative images into a single spritesheet reduces the number of HTTP requests.
Optimizing images reduces the size of downloads.
HTML 5 and CSS 3 – Illustrated Complete 2e 24
![Page 25: Testing and Improving Performance](https://reader036.vdocument.in/reader036/viewer/2022070521/58f035001a28ab1a1a8b45b7/html5/thumbnails/25.jpg)
Summary (continued)
Removing orphaned styles and minifying CSS files reduces the size of downloads.
Creating a custom build of libraries like modernizr.js can further increase your site's download speed.
HTML 5 and CSS 3 – Illustrated Complete 2e 25