Optimizing Websites for Great User Experiences and Increased Conversions
1 like1,184 views
The webinar discusses the significance of website performance, particularly for mobile users, emphasizing that slow load times lead to higher bounce rates and lower conversion rates. Key strategies for optimization include using specific tools, improving mobile site functionality, and employing best practices for maintaining website speed. The session concludes with a focus on ongoing performance testing and leveraging user feedback to enhance user experiences and conversions.
Optimizing Websites for Great User Experiences and Increased Conversions
- 2. #wpewebinar CROP IMAGE TO GRAY BOX We’ll answer as many questions as we can after the presentation ASK QUESTIONS AS WE GO Slides and recording will be made available shortly after the webinar Use the “Questions” pane throughout the webinar
- 3. #wpewebinar Mobile UX Manager Google Claire Illmer ● Been at Google for ~5 years ● Loves reading about behavioral psychology ● Used to water ski competitively ● Brand Manager Xtreme Xperience Mitch Gummerson ● Driven over 20 different exotic cars ● Did branding & marketing for a political candidate ● Owns a 1977 Porsche 911S Targa Chief Technology Officer Launch Digital Marketing Caitlin DiMare-Oliver ● Built a website to troll her husband once ● Been working with WP since it was a blogging platform ● Wishes her name were Azura
- 4. #wpewebinar WHAT YOU’LL LEARN: ● Importance of site performance in a mobile-first world ● Why performance is important for web devs and agency clients ● Business results from site optimization ● Q&A
- 5. #wpewebinar The Importance of Performance, Especially in a Mobile-First World
- 6. Proprietary + Confidential 1 Google analytics data, US, Q1 2016. More than half of all web traffic is now coming from smartphones and tablets1
- 7. Driven by mobile, consumer behavior has fundamentally changed Proprietary + Confidential 1,2 Think with Google, January 2017, Overcoming Mobile Measurement Challenges to Drive Brand Lift and Sales Growth 3 Google/IPSOS Connect, March 2016, Digital Devices Bridge the Physical World, n=2013 US online respondents 18+ of consumers use their smartphones to research1 of the ads that consumers identified as being influential in making a purchase were viewed on a mobile device2 of online adults start an activity on one device, but continue or finish it on another3 79% 60% 75%
- 8. These factors lead to increased user satisfaction and higher conversions Design and Functionality Speed and Performance MOBILE SITES MATTER
- 9. MOBILE SITES MATTER Speed thrills, friction kills Proprietary + Confidential Forrester Consulting on behalf of Akamai Technologies; n=1,048 U.S. online consumers, September 2009. Consumers in the Micro-Moment, Wave 3, Google/Ipsos, U.S., August 2015, n=1291 online smartphone users 18+. Akamai Technologies - 2014 Consumer Web Performance Expectations Survey of customers will abandon a site that takes over 3 seconds to load of smartphone users will immediately switch to another site or app if it’s too clumsy or slow dissatisfied visitors will never return to a website where problems have occurred 1 in 5 29%53%
- 10. Impact of a 1 second delay in load time Proprietary + Confidential Source: 2014 State of the Union report; See this blog post for more details regarding the report Decrease in conversion rate 3.5% 91% of smartphone users have screamed at, cursed at, or thrown their phones when pages take too long to load 38%Decrease in page views 9.4% Increase in bounce rate 8.3% MOBILE SITES MATTER
- 11. CASE STUDY Mobile pages that load 1 second faster see up to 27% increase in CvR Source: SOASTA Case study (September 1st, 2015) 180,000 160,000 140,000 120,000 100,000 80,000 60,000 40,000 20,000 0 1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 Load time (seconds) Sessions Sessions Conversion rate (%) 1.9% conversion rate 1.5% conversion rate 1.7 1.6 1.4 1.2 1.0 0.8 0.6 0.4 0.2 0.0 Conversionrate(%) 58 51 45 39 32 26 19 13 6 0 Bouncerate(%) Bounce rate (%) 20% bounce rate 12.8% bounce rate
- 12. MOBILE SITES MATTER Google incorporating site speed into SERP Google Webmasters Blog ● Page speed will be incorporated as a ranking factor for mobile searches ● Launching July 2018 ● Think broadly about how performance affects a user’s experience and consider a variety of user experience metrics ● Now is the time to focus on performance!
- 13. #wpewebinar Why Performance is Important for Web Development Teams and Agency Clients
- 14. #wpewebinar UX (User Experience) is simply that - a user’s experience on a website or in an application. Performance = User Experience It’s common knowledge these days that users are impatient and more than willing to jump to a faster competitor site. What can we do about it? • Recognize that website performance - specifically, speed, is a primary detractor from user experience. • Prioritize website performance first. Users can’t respond to your varying button colors or content A/B tests if they bounce off the site! • Don’t forget about mobile users; websites almost always perform better on desktop. A hand-crafted experience is worth nothing if it’s slow. Let’s Bounce What is UX?
- 15. #wpewebinar Every audience is different, but the trends are clear: 50% of more of your audience is likely mobile. Balance your own industry knowledge and best practices for your customers, and make sure you’re delivering fast, contextually-useful information to your mobile audience. Faster Sites = Fewer Bounces This isn’t “one size fits all.” What is UX?
- 16. #wpewebinar The Low-Hanging Fruit Immediate steps you can take to improve user experience PageSpeed Insights is a tool from Google that helps you pinpoint areas you’ve optimized, and areas you are lacking, with an easy to read 100-point scale. (The Chrome User Experience Report is powered in part by this data - check it out for some tips!) WebPageTest.org provides more advanced developer tools, showing a waterfall of resources and giving easy to understand grades of A-F. Benchmarking tools Measuring Speed • Autoptimize: This plugin helps with HTML, JS, and CSS minification, compression, and combination. It can instantly improve your performance in a few clicks, with little overhead. • WP Smush It Pro: We used WP Smush It Pro (by WPMUDEV) to compress all of the images; including original, full-size images, since they are used sometimes as background images set to cover a large space. • Scripts to Footer: When developing, it’s easy to make sure your custom scripts enqueue in the footer, but harder to manage plugins. This handy plugin will get blocking javascript out of of the way, and you can note exclusions if needed. • Lazy Load Images: The user doesn’t need all of the images outside the initial viewport immediately; load them on demand!
- 17. 3 tools to analyze mobile sites Proprietary + Confidential Marketing focus on mSpeed Uses real load time data from WebpageTest.org Test My Site (V2) testmysite.thinkwithgoogle.com Score-based diagnosis tool Evaluates mSite Performance along with PWA and general best practices Lighthouse Chrome Extension Detailed view into site components Displays each element of page load in order Chrome Dev Tools Available in Chrome Browser MOBILE SITES MATTER
- 18. #wpewebinar Digging Deeper Create user shortcuts and improve interior and landing page speeds. 1. Test your page speed and performance on real mobile devices, and in emulators simulating 3G and LTE networks. 2. Test on a variety of devices, including older ones. It’s more likely a user has an older mobile device than an outdated browser, these days. 3. Consider use case when reviewing pages. How are users getting to the page, and did you answer their question quickly? Mobile users have unique conditions. Don’t forget... Review your top 100 pages in Analytics as well as top landing pages and top exit pages. Ask yourself: • Are these pages responding with speed? What are the load times? • Are these pages optimized for my users? How are users getting here? Why are they entering or leaving this page? • For landing pages, what additional information might be missing if consumers are jumping into the middle of my sales funnel? • For exit pages, can we keep users from leaving by improving their user experience through performance, content, and design? Review Analytics
- 19. #wpewebinar Digging Even Deeper Create user shortcuts and improve interior and landing page speeds. 1. Test your page speed and performance on real mobile devices, and in emulators simulating 3G and LTE networks. 2. Test on a variety of devices, including older ones. It’s more likely a user has an older mobile device than an outdated browser, these days. 3. Consider use case when reviewing pages. How are users getting to the page, and did you answer their question quickly? Mobile users have unique conditions. Don’t forget... Once you’ve identified critical paths to your conversion funnel, scrutinize each page and (that’s right) go back to speed. Benchmark, improve, and test each page individually to optimize. Remember, pagespeed tools only analyze the URL you provide. Interior pages may be loading images, plugins, scripts, and fonts that are not optimized. Your homepage could be lightning fast, with slow-loading interior pages due to behemoth images or blocking scripts. Review Analytics
- 20. #wpewebinar Small Gains Add Up Create user shortcuts and improve interior and landing page speeds. 1. Test your page speed and performance on real mobile devices, and in emulators simulating 3G and LTE networks. 2. Test on a variety of devices, including older ones. It’s more likely a user has an older mobile device than an outdated browser, these days. 3. Consider use case when reviewing pages. How are users getting to the page, and did you answer their question quickly? Mobile users have unique conditions. Don’t forget... The last few “points” towards great performance scores, however you track them, are often the hardest to achieve. Let’s eek out every last bit of performance: • Upgrade to PHP7. It’s so much faster. • Don’t let fonts block the page load; lazy load fonts and set a nice fallback in the font stack. Using TypeKit? Turn on optimization! • Check for long-running, or slow queriesl. Anything randomized is suspect. Make use of WordPress’s built-in transients system for heavy queries. • Localize, minify, compress and combine third-party scripts (like that really cool javascript library you’re using for animations) previously called from public CDNs ▪ Don’t forget to set ticklers to update these with new releases!
- 21. #wpewebinar Challenges 1. Combining and minifying Javascript can often have unintended side effects. 2. Long-term performance and user experience maintenance is often overlooked, but critical. Like your car, your house, and your haircut - this needs constant care. 3. Optimizing for mobile, specifically, can be a big task with so many varying devices. Invest in tools like BrowserStack and learn how to use developer tools effectively to test mobile conditions. Best Practices 1. Always test after modifying/compressing and combining files; the order that these are combined is very important. 2. Put time on your calendar to review the results of ongoing performance and key metrics to ensure user experience and site performance are in tip top shape. 3. Install plugins to help maintain performance and monitor user experience. Image optimization is always good, and some method to track 404s and page errors is a smart move, too. Challenges and best practices for optimizing sites
- 22. #wpewebinar CROP IMAGE TO GRAY BOX There’s always more to do. For instance, even with Xtreme Xperience, we should: - Lazy load all the images in the theme, not just the post content - Revamp our code for mobile users to ensure we get more, useful content on the first “paint” to improve load times on 3G connections - Focus on landing pages for more optimization There’s more.
- 23. #wpewebinar Leverage tools for ongoing performance tests to help create action items when plugins, content, or theme development puts you behind the performance 8-ball again. Analyze, Rinse, and Repeat Your audience and the web is changing: Change with it. Ongoing performance tests Test, Test … Optimize as you go. Pages, images, videos -- they are being added. And standards and techniques for page speed and user experience optimization are changing regularly, too. Check back regularly for new standards and stay ahead of competition and user expectations with quarterly speed optimization tasks for your website. Finally, leverage user data to determine if your optimization is working, or needs work. Analytics and heat map tools can help tell a story, and user surveys and collection of anecdotal evidence are critical in many industries. A Developer’s Work is Never Done
- 24. #wpewebinar 1. WP Engine offers automated performance testing delivered to your email in an easy to read report 2. Pingdom subscribers can also get page speed test results as well as uptime results on a schedule What to Watch Using analytics to monitor performance Ongoing performance tests Test Again • Bounce rates going up out of nowhere are a strong indicator that a recent change in UX - be it performance, content, or layout - is negatively affecting visitors • Length of user sessions - Increased or decreased user sessions can help validate or vilify recent edits • Device distribution - Is mobile device share increasing or decreasing? Which pages are visited most often on mobile, and are they optimized for mobile visitors? • Are new pages landing pages becoming popular? Are they well optimized for the audience? Where are users referring from? Metrics to Watch For… other than Conversion Rate
- 25. #wpewebinar Business Results from Site Optimization
- 26. #wpewebinar Hotjar is a perfect addition to a marketer’s toolbox. By utilizing heatmap features for both mobile and desktop, as well as simple surveys, our customers were able to answer some of our most important questions. Your customers have the answers, all you have to do is ask. Survey & Test By optimizing and improving our website we’re able to effectively convert more traffic as our organic and paid strategy increases. - What do we NEED to improve? - What do we WANT to improve? Assess the current website and create a plan based on your findings by... - Surveying your visitors - Use polls for quick responses - Setup heatmaps to find the hottest areas on your page - Don’t forget to ask your team too! Part of the BIGGER strategy Pedal to the Metal Like exotic cars, sites are more fun when they’re fast
- 27. #wpewebinar Discovery Question 2Question 1 What is your biggest question, fear or concern? - What cars do we have? - How much does this cost? - Are they manual or automatics? - How many laps do you get? - What happens if it rains? What’s stopping you from reserving today? - Costs too much - Don’t have the money - Dates or times don’t line up - Location isn’t close enough What’s holding you back? - Don’t have the money - Location might not work - Don’t agree with the price
- 28. #wpewebinar CROP IMAGE TO GRAY BOX HEATMAPS What we observed - Less than ~12% scrolled to see our event calendar and less than ~50% of visitors scrolled beyond the fold What it means to us - Remove the fluff, only important info SURVEYS Responses we got - Location, time, money, price, how to book, etc What it means to us - Clear up our messaging and be more transparent Analyze your Findings Avg Fold > 50% Avg Fold > 50%
- 29. #wpewebinar CROP IMAGE TO GRAY BOX 1. Create consistent action buttons across the website to lead consumers to conversion. 2. Developed an all-new booking system to improve and simplify the booking process. 3. Reorganize the hierarchy of information on our site. The best way to book is the simplest way to book Conversions: +7.68% Transactions: +22.14% Revenue: +43.27% Avg Order Value: +17.29% 2017 vs. 2016 Booking Flow / Customer Journey Where we focused our efforts: 1. A 3-click sales funnel to get any consumer to the booking page and checkout as simple as possible. 2. An interactive and customized checkout process that is simple and easy to use. 3. Redeveloped homepage, event pages and location page emphasizing the most important information consumers will need to know. Results: 2017 2016
- 30. #wpewebinar CROP IMAGE TO GRAY BOX 1. Specificity over fluff. Focused on ensuring our copy points specify we’re a tour based business 2. Develop new sections to answer customers hesitations and reduce the amount of customer questions. 3. Create scarcity and urgency to entice customers to book ahead of time. Be BOLD. Get your point across Bounce Rate: -34.39% Pages/Session: +31.94% 2017 vs. 2016 Messaging / Copywriting Where we focused our efforts: 1. Clearly defined our functional business. 2. NEW ‘How It Works’ tab on homepage that opens to explain our program even further. Dropped links across the site to drive traffic (FAQ page, blog posts, etc.) 3. New countdown timers to create urgency with discount opportunities. Results:
- 31. #wpewebinar Beyond the fold... BEFORE AFTER Developed a new calendar New copy points Bold messaging
- 32. #wpewebinar Making it Obvious... BEFORE AFTER Market name vs. Track name Consistent orange booking button Timers create scarcity and urgency
- 33. #wpewebinar CROP IMAGE TO GRAY BOX 1. Tasked Launch Digital Marketing with backend upgrades solely focused on improving site speed. 2. Improved support during peak sales times (ie. holiday seasons.) 3. Requested custom UI to adjust areas of our site that we’re previously available to us. Amazing UX doesn’t work if it’s slow Avg. Page Load Time: -16.23% Down Time: ~1 vs ~5 occasions 2017 vs. 2016 Site Speed & Customization Where we focused our efforts: 1. Implementation of the Content Delivery Network (CDN), moved to a new server, added WP Engine and finally upgraded to PHP7 2. Dedicated support during peak sales times like Black Friday and Cyber Monday. 3. Ability to adjust messaging on our site to reflect our current offerings and promotions in various locations. (Custom linking, promo graphics, etc.) Results:
- 34. #wpewebinar Implemented Content Delivery Network “We overestimate what we can accomplish in a week and underestimate what we can do in a year” - Someone inspirational A Year of Optimization Jan ‘17 July ‘17 Sept - Nov ‘17 Migrated Xtreme Xperience website over to a new server Introduced WP Engine Upgraded to PHP7 Home Page Event Page Single Event Page Sept - Nov ‘16 +7.68% +22.14% +43.27% +17.29% Conversions Transactions Revenue Avg Order Value 2017 vs 2016 -34.39% +31.94% -16.23% ~1 vs ~5 occasions Bounce Rate Pages/Session Avg. Page Load Time (Average over all pages) Down Time All data sourced from Google Analytics comparing 2017 vs 2016 beginning from January 1 - December 31.
- 35. #wpewebinar Slides and recording will be made available shortly after the webinar QUESTIONS AND ANSWERS
- 36. #wpewebinar RESOURCES Launch Digital Marketing Xtreme Xperience Plugins for Optimization: ● Autoptimize ● Scripts to Footer ● WP Smush Pro Lazy Font Load Techniques: ● David Walsh Font Loading Speed Testing: ● Webpagetest.org ● Page Speed Insights ● Test My Site ● Pingdom ● WP Engine Page Performance
- 37. #wpewebinar NEXT UP... Register Now: http://wpeng.in/love Wednesday, 14 Feb 12:00 p.m. EST, 11:00 a.m. CST, 9:00 a.m. PST, 17:00 UTC/GMT