Page PerformanceA No-Holds Barred, Holistic Look

by Jeff Whitfield

Web ArchitectWeb Designer + Web Developer + UX Generalist + Consultant

“Macho Man” Randy Savage

Thich Nhat Hanh

Bruce Lee

The Zen of Page PerformanceA Humans First Approach

Humans FirstThink like a human!

“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."

Is this good for Google?

SEO

• Not a bolt-on thing

• Critical part of content and UX strategy

• Answers the question: “How do people use the web?”

IBM Watson

– 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

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.

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

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.

Focus on what visitors want, NOT what Google wants!

Quality work requires collaboration

Ask the question:“Why?”

Performance Points• Reliability

• Speed

• Accessibility

• Security

• Usability

• Content Strategy

155 requests 23.8MB transferred

Reliability

• Know your host!

• Plan for disasters!

• Backup, backup, backup!

• Don’t skimp on hosting!

Speed

• HTTP/2

• File Optimization

• Image Optimization

HTTP/2

• Multiplexing

• Header Compression

• Server Push

• Up to 1.5 times faster than HTTP/1

• Requires SSL certificate

File Optimization

• Concatenation

• Compression

• Concurrent Connections

• Avoid superfluous add- ons!

56 requests 1.4MB transferred

Adobe Muse Timely Widget

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

Image Optimization

• Compression

• Reduction in number of images used

• Proper use of image types

• Responsive images

57 requests 15.3MB transferred

Some images between 1 to 3 MB

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

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

Accessibility

• Basic ARIA Landmark Roles

• Web Accessibility Checklist (http://a11yproject.com)

• Document Outline

Security

• HTTPS

• SSL Certificates

HTTPS

• Privacy

• Security

SSL Certificates

• $9/yr - Single domains

• $29/yr - Wildcard domains

• $94/yr - Multiple domains

• FREE - Let’s Encrypt certs(https://letsencrypt.org/)

Usability

• Responsive Design

• Web Standards

56 requests 4.9MB transferred

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)

Content Strategy

• Semantic Markup

• Schemas

• Humans First Content Strategy

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

Document Outline Tools

• HTML5 Outliner(https://h5o.github.io/)

• Web Developer Extension(http://chrispederick.com/work/web-developer/)

Schemas

• http://schema.org/

• Use schemas to further describe content

• Do not misuse schemas

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

Page Performance Touchpoints• Hosting

• HTTP/2

• File Optimization

• Image Optimization

• Accessibility

• HTTPS

• Responsive Design

• Web Standards

• Semantic Markup

• Schemas

• Humans First Content Strategy

Humans FirstThink like a human!

Thank You!@jeffwhitfield

jeff@soulcraftgroup.com