Upload
chris-love
View
360
Download
2
Embed Size (px)
Citation preview
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
We are obese because…
LOVE2DEV.COM
Web became obese because…
We Load the Wrong Things
LOVE2DEV.COM
We don’t know how to cook
We are obese because…
LOVE2DEV.COM
Web became obese because…
We Don't Know How to Code the Web
LOVE2DEV.COM
We Don't Eat Real Food Anymore
We are obese because…
LOVE2DEV.COM
Web became obese because…
We Don't Write Real Web Code Anymore
LOVE2DEV.COM
We are obese because…
We Rely on Fast and
Processed Food
LOVE2DEV.COM
Web became obese because…
We Rely on Fast Food Frameworks
LOVE2DEV.COM
Web became obese because…
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 are out of shape because…
We Assume Exercise Is Hard
LOVE2DEV.COM
Web is out of shape because… We Assume Analyzing
Web Client is Hard
LOVE2DEV.COM
We are out of shape because…
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 are out of shape because…
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 are out of shape because…
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
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
http://bit.ly/1dibffr
Open SourceAvailable to Create Private InstanceCan be Scripted & Automated
LOVE2DEV.COM
http://bit.ly/1dibffr
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> … <!-- logo.gif dimensions: 500 x 400 --> <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
<script src="jquery.js" … ></script><script src="prototype.js" … ></script><script src="dojo.js" … ></script><script src="animater.js" … ></script><script src="extjs.js" … ></script><script src="yahooui.js" … ></script><script src="mochikit.js" … ></script><script src="lightbox.js" … ></script><script src="jslibs.js" … ></script><script src=“gsel.js" … ></script>
Standardize on a Single ArchitectureEfficiently Structure Markup
<script src="facebookconnect.js" … ></script><script src="facebooklike.js" … ></script><script src="facebookstats.js" … ></script><script src="tweetmeme.js" … ></script><script src="tweeter.js" … ></script><script src="tweetingly.js" … ></script><script src="googleanalytics.js" … ></script><script src="doubleclick.js" … ></script><script src="monitor.js" … ></script><script src="digg.js" … ></script>
Don’t Include Script To Be CoolEfficiently Structure Markup
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
Use Content Distribution Networks (CDN’s)Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s)Quickly Respond to Network Requests
Use Content Distribution Networks (CDN’s)Quickly Respond to Network Requests
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