Mobile Optimization Tips from Yottaa - MEGMeetup #1
-
Upload
yottaa-inc -
Category
Technology
-
view
994 -
download
1
description
Transcript of Mobile Optimization Tips from Yottaa - MEGMeetup #1
![Page 1: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/1.jpg)
Mobile Optimization Tips
Brought to you by:
@yottaa #WebPerf
![Page 2: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/2.jpg)
Slow page load woes, in 1 second7% loss in conversions
11% fewer page views
16% drop in customer satisfaction
@yottaa #WebPerf
![Page 3: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/3.jpg)
½ billion mCommerce shoppers by 201671% of smartphone users shop on their mobile
48% of retail shopping already on mobile
@yottaa #WebPerf
![Page 4: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/4.jpg)
Apparel & Accessories sold $1Bn via mobile in Q113
@yottaa #WebPerf
![Page 5: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/5.jpg)
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
![Page 6: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/6.jpg)
Users demand a better
mobile browsing experience
WPO is critical for end user experience
@yottaa #WebPerf
![Page 7: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/7.jpg)
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
@yottaa #WebPerf
![Page 8: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/8.jpg)
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
@yottaa #WebPerf
![Page 9: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/9.jpg)
Users perceive sites to be 15% slower than they really are
@yottaa #WebPerf
![Page 10: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/10.jpg)
Do you even need a mobile site?
10% site traffic from mobileCalculate
– % target customers– $ to implement
Would another solution have a larger impact?
@yottaa #WebPerf
![Page 11: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/11.jpg)
A journey of 1000
optimizations begins with a
single test@yottaa #WebPerf
![Page 12: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/12.jpg)
Using Web Page Test
See what your users see using a filmstrip
Original site took 4.5sec to start render!
![Page 13: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/13.jpg)
Using Web Page Test
…then investigate what’s slowing you down
DNS issues &
blocking behavior
36% of desktop page weight from 3rd party scripts
![Page 14: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/14.jpg)
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
@yottaa #WebPerf
![Page 15: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/15.jpg)
More on JavaScript…
Vendor ConfigurationsYottaa: add Exception / QuickTuneAkamai: async JS control-panel exclusionsLimelight: add "Javascript Postponing Ignore”PageSpeed: add attribute "pagespeed_no_defer”Radware: configuration / whitelist drivenRiverbed: Explicit/wildcarded exclusion
Tip for Vendor Impact
![Page 16: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/16.jpg)
Step One
Eliminate Errors & Manage Traffic
@yottaa #WebPerf
![Page 17: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/17.jpg)
Block AdWare, Malware, etc
Allow
Googlebot to crawl assets
(CSS, JavaScript, and images)
![Page 18: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/18.jpg)
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
@yottaa #WebPerf
![Page 19: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/19.jpg)
GZIP misidentified
Media incorrectly tagged
Script impact on URLs
Unnecessary 3rd party assets
Live by it
Die by it
Just don’t trust it
![Page 20: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/20.jpg)
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
@yottaa #WebPerf
![Page 21: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/21.jpg)
Step Two
Develop a Mobile Plan
@yottaa #WebPerf
![Page 22: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/22.jpg)
– Response Web Design– Dynamic Content– Mobile Redirects
@yottaa #WebPerf
![Page 23: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/23.jpg)
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
![Page 24: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/24.jpg)
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
@yottaa #WebPerf
![Page 25: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/25.jpg)
Responsive Not.
![Page 26: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/26.jpg)
Few major sites implement RWD
About.comBoston GlobeLycosMicrosoftNorwegian BroadcastingOpera CommunityStarbucksTimeW3.orgWorld Wildlife Fund
A Book ApartBurtonCocosaCurrysFolksyNuts.comSkinny TiesTommy HilfigerUnited Pixel WorkersVisual Supply Co@yottaa #WebPerf
![Page 27: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/27.jpg)
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
@yottaa #WebPerf
![Page 28: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/28.jpg)
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
![Page 29: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/29.jpg)
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
@yottaa #WebPerf
![Page 30: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/30.jpg)
![Page 31: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/31.jpg)
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
@yottaa #WebPerf
![Page 32: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/32.jpg)
Step Three
Optimize Images & Assets
@yottaa #WebPerf
![Page 33: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/33.jpg)
Image-ine that…
20%
4%
5%
70%
1%
Average Bytes per Page by Content Type on Mobile
ScriptsStylesheetsHTMLImagesOther
@yottaa #WebPerf
![Page 34: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/34.jpg)
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
![Page 35: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/35.jpg)
Can you spot the difference?
@yottaa #WebPerf
![Page 36: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/36.jpg)
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
@yottaa #WebPerf
![Page 37: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/37.jpg)
@yottaa #WebPerf
![Page 38: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/38.jpg)
Never do what a tool can do for youDon’t blindly trust toolsObsessively monitor to understand your progress
![Page 39: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/39.jpg)
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 Site MonitorHow am I currently operating?What trends can I determine?Which aspects of my infrastructure or traffic should I address?
WPO solution(s): Yottaa Site OptimizerHow can my current implementation be optimized?What custom optimizations should I implement?Which assets or traffic sources require more or immediate attention?
@yottaa #WebPerf
![Page 40: Mobile Optimization Tips from Yottaa - MEGMeetup #1](https://reader038.fdocuments.us/reader038/viewer/2022103109/545aec93b1af9fb66e8b6068/html5/thumbnails/40.jpg)
Thank You!
Follow us! @yottaa
www.yottaa.com/signup
@yottaa #WebPerf