Mobile Optimization Tips
Brought to you by:

@percussion @yottaa #WebPerf
Slow
7% loss inpage load woes, in 1 second
conversions
11% fewer page views

16% drop in customer satisfaction

@percussio...
½ billion mCommerce shoppers by 2016
71% of smartphone users shop on their mobile
48% of retail shopping already on mobile...
Apparel & Accessories sold $1Bn via mobile in Q113

@percussion @yottaa #WebPerf
41% are materially concerned about security

51% say websites hard to navigate & use

46% say product images are too small...
Users demand a better
mobile browsing experience

WPO is critical
for end user experience

@percussion @yottaa #WebPerf
WPO matters to mCommerce
users
29%
42%

29%

85% expect
mobile to be
faster

57% experience
problems

Will go to a competi...
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 t...
Users perceive sites to be 15%

slower

than they really are

@percussion @yottaa #WebPerf
Do you even need a mobile site?
10% site traffic from mobile
Calculate
– % target customers
– $ to implement

Would anothe...
A journey of 1000
optimizations
begins with a single
test
@percussion @yottaa #WebPerf
Using Web Page Test
See what your users see using a filmstrip

Original site took 4.5sec to start render!
Using Web Page Test
…then investigate what’s slowing you down
DNS issues
&
blocking
behavior
36% of
desktop page
weight fr...
Why are you waiting?
Monitoring is critical to understanding behavior
WPT will show you a point in time
Solutions like wbe...
Step One
Eliminate Errors
& Manage Traffic
@percussion @yottaa #WebPerf
Block AdWare, Malware, etc

Allow
Googlebot
to crawl assets
(CSS, JavaScript, and images)

@percussion @yottaa #WebPerf
More errors equate to lower utility
If Google can’t crawl your site, it’s ranking may be
downgraded and/or individual page...
GZIP misidentified

Media incorrectly tagged
Script impact on URLs
Unnecessary 3rd party assets

Live by it

Die by it
Jus...
Which solution is right for you?
Do you have the time, capital, and skill for DIY?
You already use tools that can address ...
Step Two
Develop a Mobile Plan
@percussion @yottaa #WebPerf
– Response Web Design
– Dynamic Content
– Mobile Redirects

@percussion @yottaa #WebPerf
RWD Your site works well on every device

Advantages

Disadvantages

No duplicate content maintains rankings

Requires add...
Tips for Chrome Users
Most people know about Developer Tools
…but may not know how to use them.
2 useful browser plugins a...
Responsive

Not.
Few major sites implement RWD
About.com
Boston Globe
Lycos
Microsoft
Norwegian Broadcasting
Opera Community
Starbucks
Time...
Dynamic Content better for UX, CPO

Advantages

Disadvantages

One URL for max inbound link value

Potential CDN caching i...
Mobile URL Redirect

Advantages

Disadvantages

Enables mobile-optimized content

Split mobile/main link value

m. subdoma...
Tips for Redirects
Most frameworks and platforms will provide
tools to make redirects close to effortless
2 examples that ...
Which solution is right for you?
Do you have the time, capital, and skill for RWD?
Responsive Web Design is difficult and ...
Step Three
Optimize Images &
Assets
@percussion @yottaa #WebPerf
Image-ine that…
Average Bytes per Page by Content Type on Mobile

1%
20%
4%
5%

70%

Scripts
Stylesheets
HTML
Images
Other...
SVGs are resolution independent
…but much heavier than PNGs

26% smaller than PNG
25-34% smaller than JPEG
No planned Fire...
Can you spot the difference?

@percussion @yottaa #WebPerf
Which solution is right for you?
Do you have the time, capital, and skill for DIY?
You have free tools to identify problem...
@percussion @yottaa #WebPerf
Never do what a tool can do for you
Don’t blindly trust tools
Obsessively monitor to understand your progress
The Essential Toolkit
Benchmark Performance: Web Page Test (WPT)
How fast is my site?
What do my visitors see?
Which asset...
Thank You!

@percussion @yottaa #WebPerf
How to Boost Your SEO With Mobile Performance Optimization
Upcoming SlideShare
Loading in...5
×

How to Boost Your SEO With Mobile Performance Optimization

1,513

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,513
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://www.comscore.com/Insights/Press_Releases/2013/5/comScore_Reports_Q1_2013_Desktop_Based_US_Retail_ECommerce_Spending
  • https://developer.att.com/developer/forward.jsp?passedItemId=3100030http://www.webperformancetoday.com/2012/06/05/web-performance-poverty-line/
  • Fun fact: research shows that rodeo riders are one of the (if not THE) only professions to consistently guesstimate time.
  • http://blog.catchpoint.com/2013/06/21/the-domino-effect-of-linkedin-dns-outage/http://www.yottaa.com/blog/bid/300026/What-Happens-When-Kanye-s-Album-Leaks-Performance-Chaos
  • http://www.moreofit.com/similar-to/www.webpagetest.org/Top_10_Sites_Like_Webpagetest/
  • Vanillajs.org
  • 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
  • http://www.slideshare.net/guypod/a-picture-costs-a-thousand-words18062013
  • Tools: CSS Media queries, fluid/adaptive elements (width, height, resolution, pixel density, orientation)Figuring it out: Web Developer Toolbar
  • https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmghttp://chrispederick.com/work/web-developer/chrome/
  • 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
  • http://wordpress.org/plugins/redirection/https://chrome.google.com/webstore/detail/aomidfkchockcldhbkggjokdkkebmdll
  • 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
  • http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/
  • http://www.slideshare.net/guypod/a-picture-costs-a-thousand-words18062013https://github.com/JamieMason/ImageOptim-CLI
  • How to Boost Your SEO With Mobile Performance Optimization

    1. 1. Mobile Optimization Tips Brought to you by: @percussion @yottaa #WebPerf
    2. 2. Slow 7% loss inpage load woes, in 1 second conversions 11% fewer page views 16% drop in customer satisfaction @percussion @yottaa #WebPerf
    3. 3. ½ billion mCommerce shoppers by 2016 71% of smartphone users shop on their mobile 48% of retail shopping already on mobile @percussion @yottaa #WebPerf
    4. 4. Apparel & Accessories sold $1Bn via mobile in Q113 @percussion @yottaa #WebPerf
    5. 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. 6. Users demand a better mobile browsing experience WPO is critical for end user experience @percussion @yottaa #WebPerf
    7. 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. 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. 9. Users perceive sites to be 15% slower than they really are @percussion @yottaa #WebPerf
    10. 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. 11. A journey of 1000 optimizations begins with a single test @percussion @yottaa #WebPerf
    12. 12. Using Web Page Test See what your users see using a filmstrip Original site took 4.5sec to start render!
    13. 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. 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
    15. 15. Step One Eliminate Errors & Manage Traffic @percussion @yottaa #WebPerf
    16. 16. Block AdWare, Malware, etc Allow Googlebot to crawl assets (CSS, JavaScript, and images) @percussion @yottaa #WebPerf
    17. 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
    18. 18. GZIP misidentified Media incorrectly tagged Script impact on URLs Unnecessary 3rd party assets Live by it Die by it Just don’t trust it
    19. 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
    20. 20. Step Two Develop a Mobile Plan @percussion @yottaa #WebPerf
    21. 21. – Response Web Design – Dynamic Content – Mobile Redirects @percussion @yottaa #WebPerf
    22. 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. 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
    24. 24. Responsive Not.
    25. 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. 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. 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. 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. 29. 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
    30. 30. Step Three Optimize Images & Assets @percussion @yottaa #WebPerf
    31. 31. 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
    32. 32. 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
    33. 33. Can you spot the difference? @percussion @yottaa #WebPerf
    34. 34. 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
    35. 35. @percussion @yottaa #WebPerf
    36. 36. Never do what a tool can do for you Don’t blindly trust tools Obsessively monitor to understand your progress
    37. 37. 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
    38. 38. Thank You! @percussion @yottaa #WebPerf
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×