Webinar featuring Google, Launch Digital Marketing and Xtreme Xperience who will share why site optimization is important, how to do it and business results associated with optimization. Watch on-demand webinar: https://hs.wpengine.com/webinar-optimizing-ux-increased-conversions

1. #wpewebinar
January 24, 2018
#wpewebinar

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

38. #wpewebinar
HELP US IMPROVE

39. #wpewebinar
THANK YOU
#wpewebinar
@wpengine