Mobile Optimization Tips

Brought to you by:

@percussion @yottaa #WebPerf

Slow page load woes, in 1 second7% loss in conversions

11% fewer page views

16% drop in customer satisfaction

@percussion @yottaa #WebPerf

½ billion mCommerce shoppers by 201671% of smartphone users shop on their mobile

48% of retail shopping already on mobile

@percussion @yottaa #WebPerf

Apparel & Accessories sold $1Bn via mobile in Q113

@percussion @yottaa #WebPerf

51% say websites hard to navigate & use

46% say product images are too small

41% are concerned about security26% feel that checkout is frustrating

41% are materially concerned about security

@percussion @yottaa #WebPerf

Users demand a better

mobile browsing experience

WPO is critical for end user experience

@percussion @yottaa #WebPerf

WPO matters to mCommerce users

42%

29%

28%

Will go to a competitorWill never returnWill wait a year

85% expect mobile to be faster

57% experience problems

@percussion @yottaa #WebPerf

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

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 mobileCalculate

– % target customers– $ to implement

Would another solution have a larger impact?

@percussion @yottaa #WebPerf

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 from 3rd party scripts

Why are you waiting?

Monitoring is critical to understanding behaviorWPT will show you a point in timeSolutions like wbench will provide a slightly more robust benchmarkTools like Yottaa Site Monitor enable scheduled collections for good coverage

For DNS resolution slowness, choose a vendorYou are probably NOT in the business of DNS optimizationMyriad solutions availableTools 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 efficacyTools like Yottaa will provide rules to enable broad-brush and granular optimizations

@percussion @yottaa #WebPerf

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 pages de-indexed

500

Internal Server Error. Unspecified server problem

404Resource not available. Invitation to bounce

403Forbidden. Website’s server or host is blocking access

@percussion @yottaa #WebPerf

GZIP misidentified

Media incorrectly tagged

Script impact on URLs

Unnecessary 3rd party assets

Live by it

Die by it

Just don’t trust it

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 correctlyTools like Yottaa Site Optimizer provide traffic throttling, blocking & analytics

Remember that your website’s SEO is on the lineBlocking helpful bots/crawlers that boost your page rank have a negative effectBut once they access your site, URLs throwing errors will equate to low utility & rankPlatforms like Yottaa make it simple to identify & address errors and redirects

Traffic & Errors are not set and forget effortsIt’s critical that you remain vigilant to understand site traffic & eliminate errorsNew threats AND opportunities will materialize daily – your success will drive thatVendors like Yottaa are designed to ensure the right cost/benefit to manage traffic

@percussion @yottaa #WebPerf

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 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

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 SwitcherWeb Developer Plugin

@percussion @yottaa #WebPerf

Responsive Not.

Few major sites implement RWD

About.comBoston GlobeLycosMicrosoftNorwegian BroadcastingOpera CommunityStarbucksTimeW3.orgWorld Wildlife Fund

A Book ApartBurtonCocosaCurrysFolksyNuts.comSkinny TiesTommy HilfigerUnited Pixel WorkersVisual Supply Co@percussion @yottaa

#WebPerf

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

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

Tips for Redirects

Most frameworks and platforms will provide tools to make redirects close to effortless

2 examples that implement & test redirects:

Wordpress RedirectionRedirect Path Chrome Extension

”The optimal number of redirects for mobile is exactly zero." @igrigorik

@percussion @yottaa #WebPerf

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 variableLast mile network connectivity and speed will vary greatlyLocal storage and processing power is also highly variableTools like Yottaa Site Optimizer decrease bandwidth and optimize delivery

Realize that mobile browsers provide less feedbackPerception of speed is at least 15% slower than realityDevelopers have fewer tools to provide users with feedbackTools like Yottaa provide specific testing, monitoring and optimizations for mobile

@percussion @yottaa #WebPerf

Step Three

Optimize Images & Assets

@percussion @yottaa #WebPerf

Image-ine that…

20%

4%

5%

70%

1%

Average Bytes per Page by Content Type on Mobile

ScriptsStylesheetsHTMLImagesOther

@percussion @yottaa #WebPerf

26% smaller than PNG 25-34% smaller than JPEGNo planned Firefox support

SVGs are resolution independent…but much heavier than PNGs

Progressive JPEG enables faster perceived loadDrop 75%! Try 2x display size w/high compressionLossy/Lossless optimizations like ImageOptim-CLI

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 images (PNGCrush, OptiPNG, jpegtran)Techniques are varied, and require skill to apply correctlyTools like Yottaa Site Optimizer automatically cache, optimize and serve images

Remember that mobile bandwidth is variableImages contend with other resources for bandwidthMobile devices are powerful, but still have less CPU/GPU horsepowerTools like Yottaa Site Optimizer apply lossy/lossless compression & right-size

Image optimization techniques are still evolvingWebP is a new standard that may be challenged (Firefox adoption)Progressive JPEG rendering is gaining in popularity, but browser support variesVendors like Yottaa are constantly evolving their offerings to add the latest techniques

@percussion @yottaa #WebPerf

@percussion @yottaa #WebPerf

Never do what a tool can do for youDon’t blindly trust toolsObsessively 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 assets are slowing me down?

Monitoring Solution: Yottaa integrated monitoringHow am I currently operating?What trends can I determine?Which aspects of my infrastructure or traffic should I address?

WPO solution(s): Yottaa Performance CloudHow 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

Thank You!

@percussion @yottaa #WebPerf