This document summarizes research on web page performance and provides 14 rules for faster loading pages. It finds that 80-90% of end-user response time is spent processing content on the front-end rather than the back-end. Caching can significantly improve performance, but many users' first page view involves an empty cache, slowing the experience. The document advocates focusing optimization on the 20% of content that affects 80% of load time.
This talk explains best practices and techniques use to build high performance mobile sites. The talk covers a wide range of different topics centred on how to improve performance over the network and how to improve performance in the software (including both server side & client side).
This talk explains best practices and techniques use to build high performance mobile sites. The talk covers a wide range of different topics centred on how to improve performance over the network and how to improve performance in the software (including both server side & client side).
http://tinyurl.com/5rphu4
Alfresco offers document management using familiar interfaces to get rapid user adoption built on a repository that offers transparent, out-of-sight services for full ECM.
Find the free recorded webinar, which includes a product demo, here: http://www.alfresco.com/about/eventsondemand
This presentation covers:
● The Need for Document Management
● The Two Worlds of Document Management
● The Cost to a Business of Poor Document Management
● Commoditizing and Consumerizing Document Management
● A Day in the Life of a Document
● A Basic Document Model
● Content-as-a-Service
● Really Simple Document Management
Seatwave Web Peformance Optimisation Case StudyStephen Thair
A web performance optimisation case study presented by Seatwave at the London Web Performance Meetup, Jan 2011.
The PDF is in Landscape so you might be better to download it and then shift-ctrl-+ to rotate it clockwise in Adobe Acrobat Reader.
An overview of web performance automation in the Production environment - "faster ways to make your website faster". Covers things like sample .htaccess files through to performance accelerators like mod_pagespeed and Aptimize through to DSA's like Cotendo.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
London Web Performance Meetup: Performance for mortal companiesStrangeloop
You're probably familiar with the well-known performance success stories from companies like Amazon, Google, Microsoft and Shopzilla. But how relevant are these megasites to "mortal companies" that don't make billions of dollars per year or have teams of in-house performance engineers to do their bidding?
Strangeloop president Joshua Bixby walks through case studies of Strangeloop customers like AutoAnything.com and Artbeads.com to show how mortal companies have improved performance and achieved measurable success, including:
· Increased revenue by 13%
· Increased cart size by 6%
· Increased conversions by 9%
Joshua offers practical tips for successfully evangelizing performance within your organization. He also gives a snapshot of the current performance landscape in North America, as well as a sense of where the industry is headed.
Velocity 2012: The 90-Minute Mobile Optimization Life CycleStrangeloop
Strangeloop VP Technology Hooman Beheshti demonstrates – in real time – the impact of advanced mobile optimization techniques on another unsuspecting website.
Over the course of the workshop, witness the mobile optimization life cycle, from start to finish:
- Taking the “Before” shot: Choosing a guinea pig site and benchmarking its current performance, focusing on load time, start render time and round trips.
- Iterating through core best practices, including: Keep-Alive, Compression, Far Future Expiry, and Use a CDN.
- Applying a set of advanced, automated, mobile-specific FEO techniques.
- Taking the “After” shot: Analyzing results using different browsers.
In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Slides for my Adobe MAX 2011 presentation on Optimizing Sites for Mobile Devices. In this hands-on lab, I explore the concept of developing a mobile strategy that approaches mobile as an equal partner in the design process, and explores techniques to help site content deploy across devices and contexts.
At the Kings of Code conference in Amsterdam in May 2008 I presented an updated version of my High Performance Web Sites talk that I first offered at @media in London in 2007. Thanks to the Performance Engineers at Yahoo! for the research!
http://tinyurl.com/5rphu4
Alfresco offers document management using familiar interfaces to get rapid user adoption built on a repository that offers transparent, out-of-sight services for full ECM.
Find the free recorded webinar, which includes a product demo, here: http://www.alfresco.com/about/eventsondemand
This presentation covers:
● The Need for Document Management
● The Two Worlds of Document Management
● The Cost to a Business of Poor Document Management
● Commoditizing and Consumerizing Document Management
● A Day in the Life of a Document
● A Basic Document Model
● Content-as-a-Service
● Really Simple Document Management
Seatwave Web Peformance Optimisation Case StudyStephen Thair
A web performance optimisation case study presented by Seatwave at the London Web Performance Meetup, Jan 2011.
The PDF is in Landscape so you might be better to download it and then shift-ctrl-+ to rotate it clockwise in Adobe Acrobat Reader.
An overview of web performance automation in the Production environment - "faster ways to make your website faster". Covers things like sample .htaccess files through to performance accelerators like mod_pagespeed and Aptimize through to DSA's like Cotendo.
Scott Gledhill presents at Web Directions South Government 2008 in Canberra. You have sold the concepts of web standards to your company or boss, so what next? How do you make this work in the real workplace and what problems are you likely to encounter?
London Web Performance Meetup: Performance for mortal companiesStrangeloop
You're probably familiar with the well-known performance success stories from companies like Amazon, Google, Microsoft and Shopzilla. But how relevant are these megasites to "mortal companies" that don't make billions of dollars per year or have teams of in-house performance engineers to do their bidding?
Strangeloop president Joshua Bixby walks through case studies of Strangeloop customers like AutoAnything.com and Artbeads.com to show how mortal companies have improved performance and achieved measurable success, including:
· Increased revenue by 13%
· Increased cart size by 6%
· Increased conversions by 9%
Joshua offers practical tips for successfully evangelizing performance within your organization. He also gives a snapshot of the current performance landscape in North America, as well as a sense of where the industry is headed.
Velocity 2012: The 90-Minute Mobile Optimization Life CycleStrangeloop
Strangeloop VP Technology Hooman Beheshti demonstrates – in real time – the impact of advanced mobile optimization techniques on another unsuspecting website.
Over the course of the workshop, witness the mobile optimization life cycle, from start to finish:
- Taking the “Before” shot: Choosing a guinea pig site and benchmarking its current performance, focusing on load time, start render time and round trips.
- Iterating through core best practices, including: Keep-Alive, Compression, Far Future Expiry, and Use a CDN.
- Applying a set of advanced, automated, mobile-specific FEO techniques.
- Taking the “After” shot: Analyzing results using different browsers.
In this lecture, I provide an overview of what it takes to create amazing Web Apps : rich media, the Canvas API, local storage and offline persistence are covered.
Slides for my Adobe MAX 2011 presentation on Optimizing Sites for Mobile Devices. In this hands-on lab, I explore the concept of developing a mobile strategy that approaches mobile as an equal partner in the design process, and explores techniques to help site content deploy across devices and contexts.
At the Kings of Code conference in Amsterdam in May 2008 I presented an updated version of my High Performance Web Sites talk that I first offered at @media in London in 2007. Thanks to the Performance Engineers at Yahoo! for the research!
This talk will examine the two greatest problems in Ajax development (except for that pesky browser issue): Exactly what that “Asynchronous” word means, what problems it creates, and how they can be effectively managed, next the YUI Browser History object will be examined, finally handing control of Ajax applications back to the user via their familiar back button.
This presentation is based on the original one from the author of the book ( 'Steve Souders' ), it's about his book titled 'High Performance Websites''
Have fast, performant, and successful web pages is a great Challenge. There are many layers involved and all of them have to work together.
In this talk I presented at FIBAlumni with collaboration of COEINF and the video recording is at http://media.fib.upc.edu/fibtv/streamingmedia/view/22/1400 (in Catalan).
It shows how all parts are involved in the success of web pages from the server up to the human brain and perception.
It introduces metrics and ways to effectively calculate and measure objectively the impact of the actions taken in the optimisation and also some ways to detect ways to optimise websites.
Search Engines and Flash: Secrets, Tricks, and Black Magicguestb1f3a
Adobe Flash is a binary format and has not always been accessible to search engine spiders (small bits of code that algorithmically determine a page’s content for rankings in search engines). SEO experts have developed several key workarounds and new technical developments have made new functionality available to search engines and developers alike.
Duane Nickull, an Adobe Technical Evangelist, will showcase some advanced tips and tricks to give you the edge over the competition as well as share some secrets. Attendees will learn how to increase initial page rankings as well as monitor and increase dynamic page ranks.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
Elevating Tactical DDD Patterns Through Object CalisthenicsDorra BARTAGUIZ
After immersing yourself in the blue book and its red counterpart, attending DDD-focused conferences, and applying tactical patterns, you're left with a crucial question: How do I ensure my design is effective? Tactical patterns within Domain-Driven Design (DDD) serve as guiding principles for creating clear and manageable domain models. However, achieving success with these patterns requires additional guidance. Interestingly, we've observed that a set of constraints initially designed for training purposes remarkably aligns with effective pattern implementation, offering a more ‘mechanical’ approach. Let's explore together how Object Calisthenics can elevate the design of your tactical DDD patterns, offering concrete help for those venturing into DDD for the first time!
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
3. Exceptional Performance
started in 2004
quantify and improve the performance of
all Yahoo! products worldwide
center of expertise
build tools, analyze data
gather, research, and evangelize best
practices
4. Scope
performance breaks into two categories
– response time
– efficiency
current focus is response time
of web products
5. Rough Cuts: now
Hardcopy: Summer 2007
http://www.oreilly.com/catalog/9780596514211/
7. Back‐end vs. Front‐end
Empty Cache Full Cache
amazon.com 82% 86%
aol.com 94% 86%
cnn.com 81% 92%
ebay.com 98% 92%
google.com 86% 64%
msn.com 97% 95%
myspace.com 96% 86%
wikipedia.org 80% 88%
yahoo.com 95% 88%
youtube.com 97% 95%
percentage of time spent on the front‐end
8. The Performance Golden Rule
80‐90% of the end‐user response time is
spent on the front‐end. Start there.
• Greater potential for improvement
• Simpler
• Proven to work
11. perceived response time
performance speed
slow crawl boring snail
enjoyable urgent instant
stagnant unexceptional
accelerate perception snap
yawn unresponsive
impatient better improve
achievement delay moderate
action pleasantdrag apathetic
blah subdue pace quick
promote swift sluggish
prolong slack loadcool
late prompt
maximum drive unexciting
sleepy
advance fast hurry rush
reduced lag complex heavy
unmemorable obscure
satisfying feel exceptional
why wait
brisk rapid exciting
what is the end user’s experience?
12. User Perception
Usability and perception are important for
performance.
The user’s perception is more relevant than
actual unload‐to‐onload response time.
Definition of quot;user onloadquot; is undefined or
varies from one web page to the next.
14. 80/20 Performance Rule
Vilfredo Pareto:
80% of consequences come from 20% of causes
Focus on the 20% that affects 80% of the
end‐user response time.
Start at the front‐end.
15. Empty vs. Full Cache
2
1 3
user re‐requests
user requests user requests
www.yahoo.com
www.yahoo.com other web pages
16. Empty vs. Full Cache
2
1 3
dns lookup
html
image
image
dns lookup
script
image
image
image
image
user re‐requests
user requests user requests
image
image
image
www.yahoo.com
www.yahoo.com other web pages
image
script
image
image
image
image
image
image
image
image
script
dns lookup
image
image
image
image
image
dns lookup
script
script
stylesheet
image
with an empty cache 0 0.5 1 1.5 2 2.5 3
17. Empty vs. Full Cache
2
1 3
user re‐requests
user requests user requests
www.yahoo.com
www.yahoo.com other web pages
18. Empty vs. Full Cache
2
1 3
user re‐requests
user requests user requests
www.yahoo.com
www.yahoo.com other web pages
html
image
image
0 0.5 1 1.5 2 2.5 3
Expires header
with a full cache
19. Empty vs. Full Cache
empty cache
2.4 seconds
full cache
0.9 seconds
83% fewer bytes
90% fewer HTTP requests
20. How much does this benefit our users?
It depends on how many users have
components in cache.
• What percentage of users view a page with
an empty cache*?
* “Empty cache” means the browser has to request the components
instead of pulling them from the browser disk cache.
• What percentage of page views are done
with an empty cache*?
22. Browser Cache Experiment
Add a new image to your page
<img src=quot;image/blank.gifquot; height=quot;1quot; width=quot;1quot;/>
}1 px
with the following response headers:
Expires: Thu, 15 Apr 2004 20:00:00 GMT
LastModified: Wed, 28 Sep 2006 23:49:57 GMT
23. Browser Cache Experiment
Requests from the browser will have
one of these response status codes:
200 – The browser does not have the image
in its cache.
304 – The browser has the image in its cache,
but needs to verify the last modified date.
24. Browser Cache Experiment
What percentage of users # unique users with at least
view with an empty cache? one 200 response
total # unique users
What percentage of page total # of 200 responses
views are done with an # of 200 + # of 304
empty cache? responses
}1 px
25. Surprising Results
users with page views with
100.0%
empty cache empty cache
90.0%
unique users with empty cache
80.0%
40‐60% ~20%
page views with empty cache
70.0%
60.0%
percentage
50.0%
40.0%
30.0%
20.0%
10.0%
0.0%
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
day of experiment
26. Experiment Takeaways
Keep in mind the empty cache user
experience. It might be more prevalent
than you think!
Use different techniques to optimize full
versus empty cache experience.
28. HTTP Quick Review
1
user requests
www.yahoo.com
HTTP response header sent by the web server:
HTTP/1.1 200 OK
ContentType: text/html; charset=utf8
SetCookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com
29. HTTP Quick Review
2
1
user requests
user requests
finance.yahoo.com
www.yahoo.com
HTTP request header sent by the browser:
GET / HTTP/1.1
Host: finance.yahoo.com
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; …
Cookie: C=abcdefghijklmnopqrstuvwxyz;
30. HTTP Quick Review
3
1
user requests
user requests
autos.yahoo.com
www.yahoo.com
HTTP request header sent by the browser:
GET / HTTP/1.1
Host: autos.yahoo.com
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; …
Cookie: C=abcdefghijklmnopqrstuvwxyz;
31. HTTP Quick Review
4
1
user requests
user requests
mail.yahoo.com
www.yahoo.com
HTTP request header sent by the browser:
GET / HTTP/1.1
Host: mail.yahoo.com
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; …
Cookie: C=abcdefghijklmnopqrstuvwxyz;
32. HTTP Quick Review
5
1
user requests
user requests
tech.yahoo.com
www.yahoo.com
HTTP request header sent by the browser:
GET / HTTP/1.1
Host: tech.yahoo.com
UserAgent: Mozilla/4.0 (compatible; MSIE 6.0; …
Cookie: C=abcdefghijklmnopqrstuvwxyz;
33. Impact of Cookies on Response Time
Cookie Size Time Delta
0 bytes 78 ms 0 ms
500 bytes 79 ms +1 ms
1000 bytes 94 ms +16 ms
1500 bytes 109 ms +31 ms
2000 bytes 125 ms +47 ms
2500 bytes 141 ms +63 ms
3000 bytes 156 ms +78 ms
keep sizes low dialup users
80 ms delay
35. Analysis of Cookie Sizes across the Web
Total Cookie Size
Amazon 60 bytes
Google 72 bytes
Yahoo 122 bytes
CNN 184 bytes
YouTube 218 bytes
MSN 268 bytes
eBay 331 bytes
MySpace 500 bytes
36. Experiment Takeaways
eliminate unnecessary cookies
keep cookie sizes low
set cookies at appropriate domain level
set Expires date appropriately
– earlier date or none removes cookie sooner
42. Maximizing Parallel Downloads
1.40
average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)
1.20
1.00
0.80
response time
(seconds)
0.60
0.40
0.20
0.00
1 2 4 5 10
aliases
43. Maximizing Parallel Downloads
1.40
average 36 x 36 px (0.9 Kb) 116 x 61 px (3.4 Kb)
1.20
1.00
0.80
response time
(seconds)
0.60
0.40
0.20
0.00
1 2 4 5 10
rule of thumb: use at least two but no more than four aliases
44. Experiment Takeaways
consider the effects of CPU thrashing
DNS lookup times vary across ISPs and
geographic locations
domain names may not be cached
45. Summary
What the 80/20 Rule Tells Us about
Reducing HTTP Requests
http://yuiblog.com/blog/2007/04/11/performance‐research‐part‐4/
Browser Cache Usage – Exposed!
http://yuiblog.com/blog/2007/01/04/performance‐research‐part‐2/
When the Cookie Crumbles
http://yuiblog.com/blog/2007/01/04/performance‐research‐part‐2/
Maximizing Parallel Downloads in the
Carpool Lane
http://yuiblog.com/blog/2007/04/11/performance‐research‐part‐4/
47. 14 Rules
1. Make fewer HTTP requests
2. Use a CDN
3. Add an Expires header
4. Gzip components
5. Put CSS at the top
6. Move JS to the bottom
7. Avoid CSS expressions
8. Make JS and CSS external
9. Reduce DNS lookups
10. Minify JS
11. Avoid redirects
12. Remove duplicate scripts
13. Turn off ETags
14. Make AJAX cacheable and small
50. CSS Sprites – Preferred
<span style=quot;
backgroundimage: url('sprites.gif');
backgroundposition: 260px 90px;quot;>
</span>
size of combined image is less
not supported in Opera 6
http://alistapart.com/articles/sprites
51. Inline Images
data: URL scheme
data:[<mediatype>][;base64],<data>
<IMG ALT=”Red Star”
SRC=quot;data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVf
ajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryT
EHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=quot;>
not supported in IE
avoid increasing size of HTML pages:
put inline images in cached stylesheets
http://tools.ietf.org/html/rfc2397
53. Combined Scripts,
Combined Stylesheets
combining six scripts into one eliminates
five HTTP requests
challenges:
– develop as separate modules
– number of possible combinations vs. loading
more than needed
– maximize browser cache
one solution:
– dynamically combine and cache
54. Rule 2: Use a CDN
amazon.com Akamai
aol.com Akamai
cnn.com
ebay.com Akamai, Mirror Image
google.com
msn.com SAVVIS
myspace.com Akamai, Limelight
wikipedia.org
yahoo.com Akamai
youtube.com
distribute your static content before
distributing your dynamic content
55. Rule 3: Add an Expires header
not just for images
Images Stylesheets Scripts % Median Age
amazon.com 0/62 0/1 0/3 0% 114 days
aol.com 23/43 1/1 6/18 48% 217 days
cnn.com 0/138 0/2 2/11 1% 227 days
ebay.com 16/20 0/2 0/7 55% 140 days
froogle.google.com 1/23 0/1 0/1 4% 454 days
msn.com 32/35 1/1 3/9 80% 34 days
myspace.com 0/18 0/2 0/2 0% 1 day
wikipedia.org 6/8 1/1 2/3 75% 1 day
yahoo.com 23/23 1/1 4/4 100% n/a
youtube.com 0/32 0/3 0/7 0% 26 days
56. Rule 4: Gzip components
you can affect users' download times
90%+ of browsers support compression
58. Gzip: not just for HTML
HTML Scripts Stylesheets
amazon.com x
aol.com x some some
cnn.com
ebay.com x
froogle.google.com x x x
msn.com x deflate deflate
myspace.com x x x
wikipedia.org x x x
yahoo.com x x x
youtube.com x some some
gzip scripts, stylesheets, XML, JSON (not
images, PDF)
60. Gzip Edge Cases
<1% of browsers have problems with gzip
– IE 5.5:
http://support.microsoft.com/default.aspx?scid=kb;en‐us;Q313712
– IE 6.0:
http://support.microsoft.com/default.aspx?scid=kb;en‐us;Q31249
– Netscape 3.x, 4.x
http://www.schroepl.net/projekte/mod_gzip/browser.htm
consider adding CacheControl: Private
remove ETags (Rule 13)
hard to diagnose; problem getting smaller
61. Rule 5: Put CSS at the top
stylesheets block rendering in IE
http://stevesouders.com/examples/css‐bottom.php
solution: put stylesheets in HEAD (per spec)
avoids Flash of Unstyled Content
use LINK (not @import)
63. Rule 6: Move scripts to the bottom
scripts block parallel downloads across all
hostnames
scripts block rendering of everything below
them in the page
IE and FF
http://stevesouders.com/examples/js‐middle.php
64. Rule 6: Move scripts to the bottom
script defer attribute is not a solution
– blocks rendering and downloads in FF
– slight blocking in IE
solution: move them as low in the page as
possible
65. Rule 7: Avoid CSS expressions
used to set CSS properties dynamically in IE
width: expression(
document.body.clientWidth < 600 ?
“600px” : “auto” );
problem: expressions execute many times
– mouse move, key press, resize, scroll, etc.
http://stevesouders.com/examples/expression‐counter.php
66. One‐Time Expressions
expression overwrites itself
<style>
P {
backgroundcolor: expression(altBgcolor(this));
}
</style>
<script>
function altBgcolor(elem) {
elem.style.backgroundColor = (new
Date()).getHours()%2 ? quot;#F08A00quot; : quot;#B8D4FFquot;;
}
</script>
67. Event Handlers
tie behavior to (fewer) specific events
window.onresize = setMinWidth;
function setMinWidth() {
var aElements =
document.getElementsByTagName(quot;pquot;);
for ( var i = 0; i < aElements.length; i++ ) {
aElements[i].runtimeStyle.width = (
document.body.clientWidth<600 ?
quot;600pxquot; : quot;autoquot; );
}
}
68. Rule 8: Make JS and CSS external
inline: HTML document is bigger
external: more HTTP requests, but cached
variables
– page views per user (per session)
– empty vs. full cache stats
– component re‐use
external is typically better
– home pages may be an exception
69. Post‐Onload Download
inline in front page
download external files after onload
window.onload = downloadComponents;
function downloadComponents() {
var elem = document.createElement(quot;scriptquot;);
elem.src = quot;http://.../file1.jsquot;;
document.body.appendChild(elem);
...
}
speeds up secondary pages
70. Dynamic Inlining
start with post‐onload download
set cookie after components downloaded
server‐side:
– if cookie, use external
– else, do inline with post‐onload download
cookie expiration date is key
speeds up all pages
71. Rule 9: Reduce DNS lookups
typically 20‐120 ms
block parallel downloads
OS and browser both have DNS caches
72. TTL (Time To Live)
www.amazon.com 1 minute
www.aol.com 1 minute
www.cnn.com 10 minutes
www.ebay.com 1 hour
www.google.com 5 minutes
www.msn.com 5 minutes
www.myspace.com 1 hour
www.wikipedia.org 1 hour
www.yahoo.com 1 minute
www.youtube.com 5 minutes
TTL – how long record can be cached
browser settings override TTL
75. Rule 10: Minify JavaScript
Minify Minify
External? Inline?
www.amazon.com no no
www.aol.com no no
www.cnn.com no no
www.ebay.com yes no
froogle.google.com yes yes
www.msn.com yes yes
www.myspace.com no no
www.wikipedia.org no no
www.yahoo.com yes yes
www.youtube.com no no
minify inline scripts, too
77. Rule 11: Avoid redirects
3xx status codes – mostly 301 and 302
HTTP/1.1 301 Moved Permanently
Location: http://stevesouders.com/newuri
add Expires headers to cache redirects
worst form of blocking
http://www.w3.org/Protocols/rfc2616/rfc2616‐sec10.html
82. Rule 13: Turn off ETags
unique identifier returned in response
ETag: quot;c8897eaee4165acf0quot;
LastModified: Thu, 07 Oct 2004 20:54:08 GMT
used in conditional GET requests
IfNoneMatch: quot;c8897eaee4165acf0quot;
IfModifiedSince: Thu, 07 Oct 2004 20:54:08 GMT
if ETag doesn't match, can't send 304
83. The Problem with ETags
ETag for a single entity is always different
across servers
ETag format
– Apache: inodesizetimestamp
– IIS: Filetimestamp:ChangeNumber
Sites with >1 server return too few 304s
– (n‐1)/n
Remove them
– Apache: FileETag none
– IIS: http://support.microsoft.com/kb/922703/
84. Rule 14: Make AJAX cacheable
and small
XHR, JSON, iframe, dynamic scripts can
still be cached, minified, and gzipped
a personalized response should still be
cacheable by that person
85. AJAX Example: Yahoo! Mail Beta
address book XML request
→ GET /yab/[...]&r=0.5289571053069156 HTTP/1.1
Host: us.xxx.mail.yahoo.com
← HTTP/1.1 200 OK
Date: Thu, 12 Apr 2007 19:39:09 GMT
CacheControl: private,maxage=0
LastModified: Sat, 31 Mar 2007 01:17:17 GMT
ContentType: text/xml; charset=utf8
ContentEncoding: gzip
address book changes infrequently
– cache it; add last‐modified‐time in URL
87. IBM Page Detailer
packet sniffer
Windows only
IE, FF, any .exe
c:windowswd_WS2s.ini
Executable=(NETSCAPE.EXE),(NETSCP6.EXE),(firefox.exe)
free trial, $300 license
http://alphaworks.ibm.com/tech/pagedetailer
91. Firebug
web development evolved
inspect and edit HTML
tweak and visualize CSS
debug and profile JavaScript
monitor network activity (caveat)
Firefox extension
free
http://getfirebug.com/