Because of mobility and changes in Google’s search algorithms, a lot of emphasis has been placed on page performance. But what exactly does that mean? Is it page load time? Image optimization? Content strategy and keyword performance? It’s all this and more! In this presentation, we’ll take a no-holds barred, holistic look at what page performance is and how to deal with it. (Hint: It’s all about the user experience!)

1. Page Performance
A No-Holds Barred, Holistic Look
by Jeff Whitfield

2. Web Architect
Web Designer + Web Developer + UX Generalist + Consultant

3. “Macho Man” Randy Savage

4. Thich Nhat Hanh

5. Bruce Lee

6. The Zen of Page Performance
A Humans First Approach

7. Humans First
Think like a human!

8. “Yeah…I'm just not
sure about that
keyword placement.
We typically like to see
a keyword density
above 5%, so if you
could try to keep it
above that, that would
be great."

9. Is this good for Google?

10. SEO
• Not a bolt-on thing
• Critical part of content and UX strategy
• Answers the question:
“How do people use the web?”

11. IBM Watson

12. – Steve Masters - “How to think like Google Hummingbird”
“The Hummingbird approach should be
inspirational to anyone managing and
planning content — if you aren't already
thinking like Hummingbird, you should be.
In a nutshell, think about why people are
looking for something rather than what
they are looking for. A content strategy
should be designed to answer their needs,
not just provide them with facts.”
https://goo.gl/TKmGlc

13. Watson vs Google
• IBM's Watson is designed to deliver
one precise answer.
• Google's Hummingbird is more
about browsing content than
delivering one answer.

14. How do users use search engines?
• Keyword research
• Keyword phrases used between searches
• Analytics can only tell you so much
• Integrate more UX based research

15. Google Webmaster Guidelines - Basic principles
• Make pages primarily for users, not for search engines.
• Don't deceive your users.
• Avoid tricks intended to improve search engine rankings. A
good rule of thumb is whether you'd feel comfortable explaining
what you've done to a website that competes with you, or to a
Google employee. Another useful test is to ask, "Does this help
my users? Would I do this if search engines didn't exist?"
• Think about what makes your website unique, valuable, or
engaging. Make your website stand out from others in your field.

16. Focus on what visitors want,
NOT what Google wants!

17. Quality work requires
collaboration

18. Ask the question:
“Why?”

19. Performance Points
• Reliability
• Speed
• Accessibility
• Security
• Usability
• Content Strategy

21. 155 requests
23.8MB transferred

22. Reliability
• Know your host!
• Plan for disasters!
• Backup, backup, backup!
• Don’t skimp on hosting!

24. Speed
• HTTP/2
• File Optimization
• Image Optimization

27. HTTP/2
• Multiplexing
• Header Compression
• Server Push
• Up to 1.5 times faster than HTTP/1
• Requires SSL certificate

28. File Optimization
• Concatenation
• Compression
• Concurrent Connections
• Avoid superfluous add- ons!

29. 56 requests
1.4MB transferred
Adobe Muse
Timely Widget

32. File Optimization Strategy
• Main plugins - vendor.js
• Custom code - app.js
• Load jQuery and other popular plugins via CDN
(https://developers.google.com/speed/libraries/)
• Modular loading via dependencies (ES6)
• Nix heavy add-ons for more optimized solutions

33. Image Optimization
• Compression
• Reduction in number of images used
• Proper use of image types
• Responsive images

34. 57 requests
15.3MB transferred
Some images between
1 to 3 MB

35. Image Optimization Strategy
• Compress JPG’s
(via server, JPEGmini, Grunt/Gulp, etc.)
• Compress PNG’s
(via ImageAlpha/ImageOptim, Grunt/Gulp, etc.)
• Use SVG’s for icons and vector images
• Image sprites
• CDN service
(ie. ImgIX.com, ReSRC.it, Cloudinary, etc.)

36. Responsive Images
• srcset attribute:
used to serve larger—but otherwise identical—
image sources to high resolution displays only
• picture element:
used when you need explicit control over which
source is shown at set viewport sizes
• Picturefill: a responsive polyfill
(https://scottjehl.github.io/picturefill/)

41. Accessibility
• Basic ARIA Landmark Roles
• Web Accessibility Checklist
(http://a11yproject.com)
• Document Outline

43. Security
• HTTPS
• SSL Certificates

44. HTTPS
• Privacy
• Security

46. SSL Certificates
• $9/yr - Single domains
• $29/yr - Wildcard domains
• $94/yr - Multiple domains
• FREE - Let’s Encrypt certs
(https://letsencrypt.org/)

47. Usability
• Responsive Design
• Web Standards

49. 56 requests
4.9MB transferred

50. Usability Strategy
• Use one URL for all devices
• Mobile-first
• Avoid non-standard markup
• Test on as many devices as possible
• Be aware of edge cases (ex. 3G vs LTE)

51. Content Strategy
• Semantic Markup
• Schemas
• Humans First Content Strategy

52. Semantic Markup
• Use markup to properly structure and
describe the content
• Use HTML tags as intended
• Don’t misuse heading tags
• Pay attention to the document outline

54. Document Outline Tools
• HTML5 Outliner
(https://h5o.github.io/)
• Web Developer Extension
(http://chrispederick.com/
work/web-developer/)

57. Schemas
• http://schema.org/
• Use schemas to further describe content
• Do not misuse schemas

60. Humans First Content Strategy
• UX and Empathy based approach
• Focus on the needs of the user
• Create well-written, well-structured content
• Collaboration is key

61. Page Performance Touchpoints
• Hosting
• HTTP/2
• File Optimization
• Image Optimization
• Accessibility
• HTTPS
• Responsive Design
• Web Standards
• Semantic Markup
• Schemas
• Humans First Content
Strategy

62. Humans First
Think like a human!

63. Thank You!
@jeffwhitfield
jeff@soulcraftgroup.com