The Ultimate Guide to Choosing WordPress Pros and Cons
Web Performance 101
1.
2. What is Web Performance
How does Web Performance affects our bottom line
The web Performance building blocks
Knowing your audience: understanding Browser behaviors
Measuring Performance using YSlow and Google PageSpeed
Understanding Waterfalls
Knowing Fiddler/HttpWatch
Working with WebPageTest
Working with DynaTrace Ajax Edition
8. “Brain wave analysis from the
experiment revealed that
participants had to concentrate
up to 50% more when using
badly performing
websites, while facial muscle and
behavioural analysis of the
subjects also revealed greater
agitation and stress in these
periods.
http://www.ca.com/Files/SupportingPieces/final_webstr
ess_survey_report_229296.pdf
9. Performanc
e
improvemen 6 secs 8 secs
2 secs 4 secs
t (seconds)
-8%
-
-
-25%
-
-33%
Percentage
-38%
change in -
page
abandonme -
nt
-
-
-
urce: Gomez 2010 Study of 500 Million End-User Interactions Across 200+ Web Sites
14.
Jakob Neilsen. http://www.useit.com/alertbox/response-times.html
15.
16.
17. Web performance anatomy
Latency
HTTP AJAX/XHR
IE
Firefox
Chrome Browser Internet Server
Safari
Opera
Images
CSS
JavaScript Cache
Flash
Parsing DNS 3rd-party
Layouting Server servers
Rendering
23. It’s a Multi-Browser World: Different for Each
Customer Base
Global Browser Market Share
Jan 2010 - Jan 2011
%
IE Firefox IE IE Firefox
Firefox Chrome Chrome Chrome Safari
Safari Chrome Chrome Opera Firefox
Opera Opera Chrome Firefox Opera
Source: http://arstechnica.com/web/news/2011/02/chrome-takes-10-usage-share-ie-continues-to-haemorrhage.ars; http://gs.statcounter.com/#browser_version-ww-monthly-201001-201101
24. Load Time Perceived Render
Seconds
Source: Gomez Real-User Monitoring
Real users around the world 466 million page measurements
Broadband connections only 200+ sites
25.
26. Fragmented, ra • Who is #1 today? Tomorrow?
pidly-changing 7
market • Who is #1 with your customers? 6
8
Different • Number of parallel connections
operational • JavaScript processing
characteristics • Etc.
Browser
Processing • Percentage of total
moving to the Network
browser response time
Infrastructure
• Performance
Major impact on • Functionality
user experience
• Appearance
27.
28. •
Time to first byte •
Time to first impression •
onLoad •
Fully loaded time •
•
Yahoo! YSlow •
Google Page Speed •
dynaTrace AJAX edition •
29. Minimize HTTP Requests Remove Duplicate Scripts
Use a Content Delivery Network Configure ETags
Add an Expires or a Cache- Make AJAX Cacheable
Control Header
Use GET for AJAX Requests
Gzip Components
Reduce the Number of DOM
Put StyleSheets at the Top Elements
Put Scripts at the Bottom No 404s
Avoid CSS Expressions Reduce Cookie Size
Make JavaScript and CSS Use Cookie-Free Domains for
External Components
Reduce DNS Lookups Avoid Filters
Minify JavaScript and CSS Do Not Scale Images in HTML
Avoid Redirects Make favicon.ico Small & Cacheable
http://developer.yahoo.com/yslow/help/#guidelines
30. Avoid bad requests Minimize redirects
Avoid CSS expressions Optimize images
Combine external CSS Optimize the order of styles and
scripts
Combine external JavaScript
Parallelize downloads across
Defer loading of JavaScript hostnames
Enable compression Put CSS in the document head
Leverage browser caching Remove unused CSS
Leverage proxy caching Serve resources from a consistent
Minify CSS URL
Minify HTML Serve scaled images
Minify JavaScript Serve static content from a
cookieless domain
Minimize request size
Specify a character set early
Minimize DNS lookups
Specify image dimensions
http://code.google.com/speed/page-speed/docs/rules_intro.html
Use efficient CSS selectors
33. 1.Reduce Page Size (<500Kb)
2.Enable (Gzip) Compression
3.Reduce the number of roundtrips (<40 per page…)
4.HTTP Cache Headers (cache long & prosper!)
5.Structure the page (to improve render & download)
a) CSS First
b) Javascript last
מחקר שהתפרסם לפני כחודש מראה שמהירות ההורדה הממוצעת בישראל היא 300KB, מה שאומר שבשביל לעמוד בזמן של 3 שניות צריך להוריד לא יותר מ-1.2 מ"ב, אבל זה לא כולל זמן ציור והפעלת סקריפטים.
Script:script: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other scripts in the page.Script:stylesheet: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other stylesheets in the page.Script:image: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other images in the page.Script:iframe: When some browsers start downloading an external script, they wait until the script is done downloading, parsed, and executed before starting any other downloads. Although parsing and executing scripts in order is important for maintaining code dependencies, it's possible to safely download scripts in parallel with other resources in the page (including other scripts). This test determines if the browser downloads scripts in parallel with other iframes in the page.Script:async: HTML5 introduced the async attribute for script tags. This allows page authors to specify that their scripts can safely load in the background, independent of the other scripts in the page. This test determines if the browser supports the async attribute.Css-inline script: A lesser known performance problem is the problems caused when a stylesheet is followed by an inline script block. If a browser doesn't block when downloading stylesheets (as measured by the previous test), then a stylesheet followed by an image could both be downloaded in parallel. But suppose an inline script block was placed between the stylesheet's LINK tag and the image IMG tag. The result, for some browsers, is that the image isn't downloaded until the stylesheet finishes. The reason is that the image download must occur after the inline script block is executed (in case the script block itself inserts images or in some other way manipulates the DOM), and the inline script block doesn't execute until after the stylesheet is downloaded and parsed (in case the inline script block depends on CSS rules in the stylesheet). It's important to preserve the order of the stylesheet rules being applied to the page, followed by executing the inline script block, but there's no reason other resources shouldn't be downloaded in parallel and not applied to the page until after the inline script block is executed. A subtlety of this test is that if the test is determined to be a failure if the inline script is executed before the stylesheet is done downloading - although this is faster it could lead to unexpected behavior.