Html5 Fit: Get Rid of Love Handles

LOVE2DEV.COM

My Fitness JourneyLost over 90 poundsRegained my healthBecame a fit athlete againANDNoticed many parallels with the modern web

LOVE2DEV.COM

10 Days to HTML5 FitnessA 10 Day Email Course to Help You Get Your Web Sites In Shape.

http://bit.ly/html5fit

LOVE2DEV.COM

“We have remade the web in our own image...obese"

Jason Grigsby, Mobile and Web Strategist and Co-

Founder Cloud Four

LOVE2DEV.COM

Average web page is now larger than

DOOM installation.

LOVE2DEV.COM

HTML5 FitnessHTML5 fitness is more than just having clean, performant code.It is about a development lifestyle that produces consistent, maintainable applications your customers will love.Developed in parallel with my personal journey to health & fitness.

LOVE2DEV.COM

Web Sites Are Obese & Out of Shape

http://httpArchive.org as of 5/15/2016

117 File Requests – 2.4+MB22 JavaScript Files - 399KB7 CSS Files – 75KB60 Images – 1.5MB40 TCP Connections21 Domains43% Cacheable

LOVE2DEV.COM

Web Sites Are Obese & Out of Shape

LOVE2DEV.COM

Original Web was Lean & Fit

During dial-up days, HTML was pre-rendered on server

We assumed little to no bandwidth available

Broadband expansion

Browsers got better, stronger and fasterMobile devices proliferated

We assumed broadband was ubiquitousWe moved processing to the clientDevelopers ignored mobile

Web Got Older & ObeseWeb (WWW) Developers

LOVE2DEV.COM

LOVE2DEV.COM

We are obese because…

We Eat Too Much

LOVE2DEV.COM

Web became obese because…

We Load Too Much

We Eat the Wrong Things

LOVE2DEV.COM


LOVE2DEV.COM


We Load the Wrong Things

LOVE2DEV.COM

We don’t know how to cook


LOVE2DEV.COM


We Don't Know How to Code the Web

LOVE2DEV.COM

We Don't Eat Real Food Anymore


LOVE2DEV.COM


We Don't Write Real Web Code Anymore

LOVE2DEV.COM


We Rely on Fast and

Processed Food

LOVE2DEV.COM


We Rely on Fast Food Frameworks

LOVE2DEV.COM

We are out of shape because…

We Don't Exercise

LOVE2DEV.COM

Web is out of shape because… We Don't Analyze Our

Web Sites or Apps

LOVE2DEV.COM


We Assume Exercise Is Hard

LOVE2DEV.COM

Web is out of shape because… We Assume Analyzing

Web Client is Hard

LOVE2DEV.COM


We Don't Know How to Exercise

LOVE2DEV.COM

Web is out of shape because… We Don't Know

How to Analyze Our Web Clients


We Think We Don't Have

Enough TimeLOVE2DEV.CO

M

LOVE2DEV.COM

Web is out of shape because…

We Don't Budget Time or

Resources to Analysis

LOVE2DEV.COM


We Let Real Life Get in Our Way

Web is out of shape because…

We are distracted by too many shiny balls

and suffer from JavaScript fatigue

LOVE2DEV.COM

LOVE2DEV.COM

Why Is HTML5 Fitness Important?

LOVE2DEV.COM

User Experience is

to the customer.EVERYTHING

LOVE2DEV.COM

IS KEY TO YOUR BUSINESSPERFORMANCE

LOVE2DEV.COM

Matt YoungTechnology Evangelist & Writer, Radwarehttp://bit.ly/1S8NCFE

“Every second is absolutely critical in ensuring a user experience that will yield the maximum likelihood of conversion, meaning a site visitor follows through and makes a purchase.”

http://bit.ly/1S8NCFE

Speed Matters!

LOVE2DEV.COM

LOVE2DEV.COM

Faster Sites Rank HigherFaster is Better User Experience http://bit.ly/1Ezmko6

Mobile First Web Applications Rank HigherMobilegeddon http://bit.ly/1JFpsmE

SEO & Web Performance

LOVE2DEV.COM

Faster Sites Have Higher Conversion Rates

http://bit.ly/S1fHSZhttp://bit.ly/WajJbBhttp://bit.ly/S3UoAjhttp://bit.ly/RIQMDM

Speed does not mean difficult for the developer

LOVE2DEV.COM

“Making your web experience quicker and more enjoyable for visitors… may be as simple as making sure the basic HTML, CSS, and JavaScript components of your site—the foundational front end building blocks of the Web for nearly 20 years—have been optimized.”

Web page size, speed, and performanceBy Terrence Dorsey

http://oreil.ly/1UZu2Tl

http://oreil.ly/1UZu2Tl

LOVE2DEV.COM

Performance Affects User ExperienceOver 50% Will Abandon a Slow Site After 3 Seconds

We Have to Concentrate 50% Harder for Slow Sites

78% Have Felt Stress or Anger With Slow Sites

44% Say Slow Sites Make Them Anxious

4% Have Thrown Their Phonehttp://bit.ly/SuBLDR

“Web pages are trying to do too many things, and often failing to optimize along the way.

It’s not just ecommerce sites, either: ... we learned quite a bit in analyzing news, travel and sports sites, along with ecommerce.”

Kent Alstad, VP of Acceleration at Radware

http://bit.ly/1ooJQQx

“As we’ve found in the past: Pages keep getting bigger in their

total size The number of resource requests is

increasing dramatically Performance takes a hit due to page

complexity and large, unoptimized images.

These trends threaten user retention and can have a huge impact on the bottom line.”

Kent Alstad, VP of Acceleration at Radwarehttp://bit.ly/

1ooJQQx

LOVE2DEV.COM

Where to Start?

LOVE2DEV.COM

Web Performance OptimizationWeb performance optimization, WPO, or website optimization involves ongoing monitoring and testing of websites to achieve optimum performance under given constraints. Usually optimization is restricted due to lack of complete information and metrics to evaluate the performance of a website.

http://bit.ly/SWEh6E

LOVE2DEV.COM

Measure Web Fitness

LOVE2DEV.COM

Set A Performance Budget“This may be a specific load time, but it is usually an easier conversation to have when you break the budget down into the number of requests or size of the page.” Tim Kadlec

http://bit.ly/1CUAfGx

LOVE2DEV.COM

Set Performance Baseline

Page Load Time Time to Full Render Time to First Interaction Page Speed Index

LOVE2DEV.COM

Select Performance MetricsTypical Load TimeShoot for < 2 Seconds Over Broadband

My Standard< 1 Second

LOVE2DEV.COM

Select Performance Metrics

Page WeightWhat Does My Web Site Cost? http://whatdoesmysitecost.com

LOVE2DEV.COM

Select Performance Metrics HTTP Chattiness

# of Requests

LOVE2DEV.COM

Web Performance Tools

F12 Performance Budget Google Page Insights

What Does My Site Cost? 3rd party script visualization WebPageTest.org

LOVE2DEV.COM

webpagetest.org

http://bit.ly/1dibffr

Online ToolIdentifies Common Performance IssuesMust be Public URL

LOVE2DEV.COM

webpagetest.org


Open SourceAvailable to Create Private InstanceCan be Scripted & Automated

LOVE2DEV.COM


LOVE2DEV.COM

webpagetest.org – film strip view

LOVE2DEV.COM

Identify Performance Issues

LOVE2DEV.COM

Identify Your Focus

What is Increasing Load time?What is Delaying Rendering?Is Overall User Experience Poor?(e.g. users wait for action confirmation)

LOVE2DEV.COM

Act Now to Get Rid of Your Web Site's Love Handles

LOVE2DEV.COM

Image Fitness

LOVE2DEV.COM

Image Problems• Too Large•Not Optimized

LOVE2DEV.COM

Tools to Optimize Images• pngCrush• ImageOptm•GruntIcon• Kraken.io

LOVE2DEV.COM

Improper Dimensions•Developers/Designers tend to use the largest image to avoid grainy images• This means everyone gets super large images• Forces browsers to resize them on the fly• Browsers are not Optimized For

Image Resizing

<html> <head> <title>Test</title> </head> <body> …  <img src="logo.png" width="50" height="40" /> … </body></html>

Use Native Image ResolutionsOptimize Media Usage

LOVE2DEV.COM

Responsive Images• Allow Us to Create and Use an Array of properly sized images• Browser downloads ‘best’ image for browser viewport

LOVE2DEV.COM

LOVE2DEV.COM

<img srcset="/img/awesome-photo-3300x6600.jpg 6600w,/img/awesome-photo-6600x3300.jpg 3300w,/img/awesome-photo-5960x2980.jpg 2980w,/img/awesome-photo-5320x2660.jpg 2660w,/img/awesome-photo-4680x2340.jpg 2340w,/img/awesome-photo-4040x2020.jpg 2020w,/img/awesome-photo-3400x1700.jpg 1700w,/img/awesome-photo-2760x1380.jpg 1380w,/img/awesome-photo-2120x1060.jpg 1060w,/img/awesome-photo-1480x740.jpg 740w,/img/awesome-photo-840x420.jpg 420w"

src="/img/awesome-photo.jpg" sizes="(max-width: 480px) 100vw, 30vw" alt="Awesome Photo">

LOVE2DEV.COM

Image Optimization Workflow• Images Added to ‘watched’ location• Invokes Optimization Process • Creates Responsive Set• Optimizes Images

• Process Pushes Optimized Images to CDN File Storage• Returns Image URLS & srcset value

Image Formats: PNG, JPEG, JPEG-XROptimize Media Usage

PNG (Default)Website Elements, Logos

JPEGPhotographs

JPEG-XRHigh Resolution Photographs

Don’t Get DistractedGIF, TIFF, BMP, WebP, etc.

LOVE2DEV.COM

Consider A Static Web Application

Bypasses server-side rendering systems like ASP.NET, PHP, etc .Can be hosted in cloud file storage (S3, Azure Blobs) Client-side rendering in a SPA Many Generators Available

LOVE2DEV.COM

CSS Optimizations

CSS Selector Specificity•Complex Specificity• .main-content > article #myArticleId p• Leads to large CSS files•Makes Code Unmanageable• Lower the Score the Better

•Browsers Parse Selectors Right to Left•* Avoid Universal Selector

Right-Left Rule• .main-content > article #myArticleId p• Translates to:• #myArticleId p

• Think More Like the Browser When Defining Selectors

Calculate CSS Specificity• Count the Inline Style• count the number of ID selectors in the selector (= a) • count the number of class selectors, attributes selectors,

and pseudo-classes in the selector (= b) • count the number of type selectors and pseudo-elements

in the selector (= c) • ignore the universal selector

Calculate CSS Specificity

http://specificity.keegan.st/

BEM Naming Convention• Block• Element•Modifier

• Bootstrap and Primer Good Examples• Create Rules Based on UI Expectations, Not Specific Elements

BEM Naming Convention• .btn {…}• .btn-primary {…}• .btn-primary:disabled {…}• .btn-xs {…}

•Might also see __ between words

BEM Naming Convention• <button type="button" class="btn btn-primary">Primary</button>• <button type="button" class="btn btn-success">Success</button>• <button type="button" class="btn btn-info">Info</button> • <button type="button" class="btn btn-warning">Warning</button>

LOVE2DEV.COM

Inline CSS

• AMP Requires CSS Be Inlined in HEAD• Eliminates HTTP Requests• Enables Browser to Render as Fast As Possible

LOVE2DEV.COM

Loading CSS Optimization

Load Only Used CSS / Remove Unused CSSUNCSS ModuleIdentify Critical CSS

Example: Most Bootstrap Sites Use <10% of Bootstrap

Bootstrap Adds up to 600kb to Page Weight

LOVE2DEV.COM

Javascript Optimization• Still Blocking Call• Use Async & Defer

• Load Only Scripts you will use• Think Portion Control

LOVE2DEV.COM

Javascript OptimizationAvoid using fast food frameworks

- mostly fat and syntatic sugar

Avoid Transpiling - just adds fat to code- JavaScript is not that Difficult To Learn

LOVE2DEV.COM

Chris Whartonhttp://chriswharton.me

LOVE2DEV.COM

Javascript Optimization• Avoid polyfils without proper feature detection and on demand loading•Only support N-1 browser version and IE 11• Microsoft No Longer Supports IE 10

and below and neither should you

LOVE2DEV.COM

Bundle & Minify Text Assets

Eliminate Excess HTTP RequestsReduce Data Footprint

If Production VersionBundle & aim for a Single JS and Single CSS file

LOVE2DEV.COM

Gzip Text Content

Browsers support Gzip & deflate algorithmsReduces text base content sizeMakes it easier to traverse Intertubes

14kb Critical Packet SizeThis is due to HTTP’s Slow Start

This is the goal for Optimal Mobile Performance

• Request• GET / HTTP/1.1• Accept: */*• Accept-Language: en-us• UA-CPU: x86• Accept-Encoding: gzip, deflate• Host: www.live.com

ResponseHTTP/1.1 200 OKContent-Length: 3479Expires: -1Date: Sun, 14 Mar 2017 21:30:46 GMTPragma: no-cacheContent-Encoding: gzip

GZIP Compress Network TrafficMinimize Bytes Downloaded

LOVE2DEV.COM

Configure Gzip in IIS

LOVE2DEV.COM

Configure Gzip in Amazon S3 | CloudFront

LOVE2DEV.COM

Use a CDN

1. Globally Distributes Resources Closer to Client2. Was Expensive3. Amazon CloudFront & Azure cost pennies a

month

Use Content Distribution Networks (CDN’s)Quickly Respond to Network Requests

LOVE2DEV.COM

Far Future Expires Header

Lets the browser cache resources locally Eliminates future Http requests The fastest Http request is the one not made Only updates resource if changed on server

• Request• GET /images/banner.jpg HTTP/1.1• Host: www.microsoft.com

ResponseHTTP/1.1 200 OKContent-Type: image/jpegExpires: Fri, 20 Apr 2017 00:00:00 GMT

Provide Cacheable ContentMinimize Bytes Downloaded

jQuery Data RequestjQuery.ajax({ url: url, dataType: 'json', data: data, success: callback});

Cached jQuery Data RequestjQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback});

Cache Data RequestsMinimize Bytes Downloaded

LOVE2DEV.COM

Use LocalStorage For Storage & Caching

Allows You to Keep Data Locally in a Hash TablelocalStoragesessionStorage

Approximately 5-10MBReplace CookiesGreat For CachingUse IndexDB for Larger Data Sets

LOVE2DEV.COM

Use A Client Build SystemBundling & Minification is OKGrunt Is Very Easy & Extensive• Validate Scripts• Combine & Minify Scripts• Validate CSS• Combine & Minify CSS• Critical CSS• UNCSS• Many Other Tasks

Gulp, Broccoli, Webpac are also good toolshttp://bit.ly/1kcrpuo

LOVE2DEV.COM

Slide Deck & Source Code

http://GitHub.com/docluv

slidesha.re/15YTrTT

http://github.com/docluv

http://github.com/docluv

http://slidesha.re/15YTrTT

http://slidesha.re/15YTrTT

Html5 Fit: Get Rid of Love Handles

Technology

Transcript of Html5 Fit: Get Rid of Love Handles