In this presentation, we'll cover:
- The rise in mobile browsing and substantial projected growth
- Why site speed is now an important SERP and credibility factor
- Important new findings on how perceived and real performance problems impact users' browsing behavior
- A three-step system for getting started with performance optimization
- How to implement performance techniques and tools to maximize your site's mobile search ranking
2. Slow
7% loss inpage load woes, in 1 second
conversions
11% fewer page views
16% drop in customer satisfaction
@percussion @yottaa #WebPerf
3. ½ billion mCommerce shoppers by 2016
71% of smartphone users shop on their mobile
48% of retail shopping already on mobile
@percussion @yottaa #WebPerf
5. 41% are materially concerned about security
51% say websites hard to navigate & use
46% say product images are too small
26% feel that checkout41% are concerned about security
is frustrating
@percussion @yottaa #WebPerf
6. Users demand a better
mobile browsing experience
WPO is critical
for end user experience
@percussion @yottaa #WebPerf
7. WPO matters to mCommerce
users
29%
42%
29%
85% expect
mobile to be
faster
57% experience
problems
Will go to a competitor
Will never return
Will wait a year
@percussion @yottaa #WebPerf
8. The bar and stakes are high
64% of smartphone users expect pages to
load in less than 4 seconds
50% of your 1s page load time budget on
mobile is taken up by network latency
overhead
If a page takes 8+ secs to load, visitors will
spend only 1% of their time looking at ads
@percussion @yottaa #WebPerf
9. Users perceive sites to be 15%
slower
than they really are
@percussion @yottaa #WebPerf
10. Do you even need a mobile site?
10% site traffic from mobile
Calculate
– % target customers
– $ to implement
Would another
solution have a
larger impact?
@percussion @yottaa #WebPerf
11. A journey of 1000
optimizations
begins with a single
test
@percussion @yottaa #WebPerf
12. Using Web Page Test
See what your users see using a filmstrip
Original site took 4.5sec to start render!
13. Using Web Page Test
…then investigate what’s slowing you down
DNS issues
&
blocking
behavior
36% of
desktop page
weight from
3rd party
scripts
14. Why are you waiting?
Monitoring is critical to understanding behavior
WPT will show you a point in time
Solutions like wbench will provide a slightly more robust benchmark
Tools like Yottaa Site Monitor enable scheduled collections for good coverage
For DNS resolution slowness, choose a vendor
You are probably NOT in the business of DNS optimization
Myriad solutions available
Tools like Yottaa Site Optimizer provide global IP-Anycast DNS service
JavaScript optimization tips (incl. eliminate blocking)
Frameworks can provide built-in optimizations (more in a moment)
Testing and monitoring is critical to ensure efficacy
Tools like Yottaa will provide rules to enable broad-brush and granular optimizations
@percussion @yottaa #WebPerf
16. Block AdWare, Malware, etc
Allow
Googlebot
to crawl assets
(CSS, JavaScript, and images)
@percussion @yottaa #WebPerf
17. More errors equate to lower utility
If Google can’t crawl your site, it’s ranking may be
downgraded and/or individual pages de-indexed
403
Forbidden.
Website’s server or
host is blocking access
404
Resource not available.
Invitation to bounce
500
Internal Server Error.
Unspecified server problem
@percussion @yottaa #WebPerf
19. Which solution is right for you?
Do you have the time, capital, and skill for DIY?
You already use tools that can address this issue (Google Analytics, Webmaster)
Techniques are varied, and require skill to apply correctly
Tools like Yottaa Site Optimizer provide traffic throttling, blocking & analytics
Remember that your website’s SEO is on the line
Blocking helpful bots/crawlers that boost your page rank have a negative effect
But once they access your site, URLs throwing errors will equate to low utility & rank
Platforms like Yottaa make it simple to identify & address errors and redirects
Traffic & Errors are not set and forget efforts
It’s critical that you remain vigilant to understand site traffic & eliminate errors
New threats AND opportunities will materialize daily – your success will drive that
Vendors like Yottaa are designed to ensure the right cost/benefit to manage traffic
@percussion @yottaa #WebPerf
21. – Response Web Design
– Dynamic Content
– Mobile Redirects
@percussion @yottaa #WebPerf
22. RWD Your site works well on every device
Advantages
Disadvantages
No duplicate content maintains rankings
Requires additional code re-working
One URL means no mobile crawlers
Can’t differentiate mobile content
Max link value. No risk of split link value
Could affect usability/CRO
No redirects = low latency & fewer errors
New code may affect rankings
23. Tips for Chrome Users
Most people know about Developer Tools
…but may not know how to use them.
2 useful browser plugins anyone can use:
User Agent Switcher
Web Developer Plugin
@percussion @yottaa #WebPerf
25. Few major sites implement RWD
About.com
Boston Globe
Lycos
Microsoft
Norwegian Broadcasting
Opera Community
Starbucks
Time
W3.org
World Wildlife Fund
A Book Apart
Burton
Cocosa
Currys
Folksy
Nuts.com
Skinny Ties
Tommy Hilfiger
United Pixel Workers
Visual Supply Co
@percussion @yottaa #WebPerf
26. Dynamic Content better for UX, CPO
Advantages
Disadvantages
One URL for max inbound link value
Potential CDN caching issues
Content optimized & targeted for mobile
Setup can be difficult/tricky
One URL means no content duplication
@percussion @yottaa #WebPerf
27. Mobile URL Redirect
Advantages
Disadvantages
Enables mobile-optimized content
Split mobile/main link value
m. subdomains synonymous with mobile
Large investment to implement redirects
Could affect usability/CRO
Various mobile implementations complex
28. Tips for Redirects
Most frameworks and platforms will provide
tools to make redirects close to effortless
2 examples that implement & test redirects:
Wordpress Redirection
Redirect Path Chrome Extension
”The optimal number of redirects for mobile is exactly zero." @igrigorik
@percussion @yottaa #WebPerf
29.
30. Which solution is right for you?
Do you have the time, capital, and skill for RWD?
Responsive Web Design is difficult and time-consuming (addons.mozilla.org)
Standards are still forming (Element Query Polyfill)
Tools like Yottaa Site Optimizer speed & simplify dynamic content, redirects, more
Remember that mobile bandwidth is variable
Last mile network connectivity and speed will vary greatly
Local storage and processing power is also highly variable
Tools like Yottaa Site Optimizer decrease bandwidth and optimize delivery
Realize that mobile browsers provide less feedback
Perception of speed is at least 15% slower than reality
Developers have fewer tools to provide users with feedback
Tools like Yottaa provide specific testing, monitoring and optimizations for mobile
@percussion @yottaa #WebPerf
32. Image-ine that…
Average Bytes per Page by Content Type on Mobile
1%
20%
4%
5%
70%
Scripts
Stylesheets
HTML
Images
Other
@percussion @yottaa #WebPerf
33. SVGs are resolution independent
…but much heavier than PNGs
26% smaller than PNG
25-34% smaller than JPEG
No planned Firefox support
Progressive JPEG enables faster perceived load
Drop 75%! Try 2x display size w/high compression
Lossy/Lossless optimizations like ImageOptim-CLI
34. Can you spot the difference?
@percussion @yottaa #WebPerf
35. Which solution is right for you?
Do you have the time, capital, and skill for DIY?
You have free tools to identify problem images (PNGCrush, OptiPNG, jpegtran)
Techniques are varied, and require skill to apply correctly
Tools like Yottaa Site Optimizer automatically cache, optimize and serve images
Remember that mobile bandwidth is variable
Images contend with other resources for bandwidth
Mobile devices are powerful, but still have less CPU/GPU horsepower
Tools like Yottaa Site Optimizer apply lossy/lossless compression & right-size
Image optimization techniques are still evolving
WebP is a new standard that may be challenged (Firefox adoption)
Progressive JPEG rendering is gaining in popularity, but browser support varies
Vendors like Yottaa are constantly evolving their offerings to add the latest
techniques
@percussion @yottaa #WebPerf
37. Never do what a tool can do for you
Don’t blindly trust tools
Obsessively monitor to understand your progress
38. The Essential Toolkit
Benchmark Performance: Web Page Test (WPT)
How fast is my site?
What do my visitors see?
Which assets are slowing me down?
Monitoring Solution: Yottaa integrated monitoring
How am I currently operating?
What trends can I determine?
Which aspects of my infrastructure or traffic should I address?
WPO solution(s): Yottaa Performance Cloud
How can my current implementation be optimized?
What custom optimizations should I implement?
Which assets or traffic sources require more or immediate attention?
@percussion @yottaa #WebPerf
Google Webmaster Tools breaks these errors down into three primary categories:Server ErrorsAccess Denied ErrorsNot Found Errorshttp://www.acceleration-partners.com/Error-Pages-Impact-SEO
There are other types of errors as well – marking pages as compressed then they’re not or vice versa. Mis-labeling media b/c you’re attempting to trick a specific browser or b/c of good old copy & paste
Tools: Vary Header, DIY, CDN configurationOn CDN issues:Yottaa does not have the same problem. We implemented a vary header support that allows the user to configure an optimization to determine how to vary the content.This will replace/work with the server vary support. The issue with Vary: User-agent; is that there is not specification for how it will work. that is why leading CDN providers only support the accepts-encoding.
Tools: multiple domains, DIY, framework pluginsFiguring it out: User Agent Switcher, Ayima Redirect Checker
The main differences between a 301 redirect and a 302 redirect are:301 redirects tell search engines the page has moved permanently301 redirects index the new page, and give search engine credit to that page as the new owner of the old pages’ content.302 redirects tell search engines the page has moved temporarily302 redirects don’t index the new page, and don’t give search engine credit to the new page as the owner of the old pagehttp://www.localonspot.com/why-business-owners-need-to-understand-redirects-301-vs-302-redirects/#sthash.nGD8zdGg.dpufGoogle: limit to 301 redirects? No, but keep chains to 3-4 TOPS. http://www.youtube.com/watch?v=r1lVPrYoBkA
SVG is resolution-independent.But look at this demo of PNG vs. SVGGoogle’s WebP26% smaller than PNG, 25-34% smaller than JPEGSupported in Google Chrome, Opera, Yandex, Android and Safari and can be activated in Internet Explorer using the Google Chrome Frame plugin.Firefox does not plan to implement it. Knowing this, widespread use is unlikely for now.Progressive JPEGImpression of greater speed (quick low-res image) Improves user experience not technical performance and image size problemsKeeps image dimensions 2x display size w/higher compression75% maller image files Still be sharp on both normal and high-density screensLossy/Lossless optimizations like ImageOptim-CLI