SlideShare une entreprise Scribd logo
1  sur  102
Télécharger pour lire hors ligne
Html5 Fit:  Get Rid of Love Handles
My Fitness Journey
Lost over 90 pounds
Regained my health
Became a fit athlete again
AND
Noticed many parallels with
the modern web
LOVE2DEV.COM
10 Days to HTML5 Fitness
A 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 Fitness
LOVE2DEV.COM
HTML5 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.
Web Sites Are Obese &
Out of Shape
LOVE2DEV.COM
http://httpArchive.org as of 5/15/2016
117 File Requests – 2.4+MB
22 JavaScript Files - 399KB
7 CSS Files – 75KB
60 Images – 1.5MB
40 TCP Connections
21 Domains
43% Cacheable
Web Sites Are Obese & Out of Shape
LOVE2DEV.COM
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 faster
Mobile devices
proliferated
We assumed broadband
was ubiquitous
We moved processing to
the client
Developers ignored
mobile
Web Got Older & Obese
Web (WWW) Developers
LOVE2DEV.COM
We are
obese
because…
We Eat Too Much
LOVE2DEV.COM
Web
became
obese
because…
LOVE2DEV.COM
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
We don’t know how to cook
LOVE2DEV.COM
We are
obese
because…
LOVE2DEV.COM
Web
became
obese
because…
We Don't Know How to Code the Web
We Don't Eat Real Food Anymore
LOVE2DEV.COM
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
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
LOVE2DEV.COM
We are
out of
shape
because…
We Think We Don't
Have Enough Time
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
LOVE2DEV.COM
Web is out
of shape
because…
We are distracted by
too many shiny balls
and suffer from
JavaScript fatigue
LOVE2DEV.COM
Why Is HTML5 Fitness
Important?
LOVE2DEV.COM
User Experience is
to the customer.
EVERYTHING
LOVE2DEV.COM
IS KEY TO YOUR BUSINESS
PERFORMANCE
LOVE2DEV.COM
LOVE2DEV.COM
Matt Young
Technology Evangelist & Writer,
Radware
http://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
Faster Sites Rank Higher
Faster is Better User Experience http://bit.ly/1Ezmko6
Mobile First Web Applications Rank Higher
Mobilegeddon http://bit.ly/1JFpsmE
SEO & Web Performance
LOVE2DEV.COM
Faster Sites Have Higher Conversion
Rates
http://bit.ly/S1fHSZ
http://bit.ly/WajJbB
http://bit.ly/S3UoAj
http://bit.ly/RIQMDM
LOVE2DEV.COM
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 performance
By Terrence Dorsey
http://oreil.ly/1UZu2Tl
Performance Affects User Experience
Over 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 Phone
LOVE2DEV.COM
http://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
Where to Start?
LOVE2DEV.COM
Web Performance Optimization
Web 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.”
LOVE2DEV.COM
Tim Kadlec
http://bit.ly/1CUAfGx
Set Performance Baseline
Page Load Time
Time to Full Render
Time to First Interaction
Page Speed Index
LOVE2DEV.COM
Select Performance Metrics
Typical Load Time
Shoot for < 2 Seconds Over Broadband
My Standard
< 1 Second
LOVE2DEV.COM
Select Performance Metrics
Page Weight
What 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
LOVE2DEV.COM
What Does My Site Cost?
3rd party script visualization
WebPageTest.org
webpagetest.org
LOVE2DEV.COM
http://bit.ly/1dibffr
Online Tool
Identifies Common Performance Issues
Must be Public URL
webpagetest.org
LOVE2DEV.COM
http://bit.ly/1dibffr
Open Source
Available to Create Private Instance
Can be Scripted & Automated
http://bit.ly/1dibffr
LOVE2DEV.COM
webpagetest.org – film strip view
LOVE2DEV.COM
Identify Performance Issues
LOVE2DEV.COM
Identify Your Focus
LOVE2DEV.COM
What is Increasing Load time?
What is Delaying Rendering?
Is Overall User Experience Poor?
(e.g. users wait for action confirmation)
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
LOVE2DEV.COM
<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 Resolutions
Optimize Media Usage
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
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">
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
LOVE2DEV.COM
Image Formats: PNG, JPEG, JPEG-XR
Optimize Media Usage
PNG (Default)
Website Elements, Logos
JPEG
Photographs
JPEG-XR
High Resolution Photographs
Don’t Get Distracted
GIF, TIFF, BMP, WebP, etc.
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
LOVE2DEV.COM
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>
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 CSS
UNCSS Module
Identify 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
<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 Architecture
Efficiently 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 Cool
Efficiently Structure Markup
Javascript Optimization
Avoid 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
LOVE2DEV.COM
Chris Wharton
http://chriswharton.me
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 Requests
Reduce Data Footprint
If Production Version
Bundle & aim for a Single JS and Single CSS file
LOVE2DEV.COM
Gzip Text Content
Browsers support Gzip & deflate algorithms
Reduces text base content size
Makes it easier to traverse Intertubes
14kb Critical Packet Size
This is due to HTTP’s Slow Start
This is the goal for Optimal Mobile Performance
LOVE2DEV.COM
• Request
• GET / HTTP/1.1
• Accept: */*
• Accept-Language: en-us
• UA-CPU: x86
• Accept-Encoding: gzip, deflate
• Host: www.live.com
Response
HTTP/1.1 200 OK
Content-Length: 3479
Expires: -1
Date: Sun, 14 Mar 2017 21:30:46 GMT
Pragma: no-cache
Content-Encoding: gzip
GZIP Compress Network Traffic
Minimize Bytes Downloaded
Configure Gzip in IIS
LOVE2DEV.COM
Configure Gzip in Amazon S3 | CloudFront
LOVE2DEV.COM
Use a CDN
1. Globally Distributes Resources Closer to Client
2. Was Expensive
3. Amazon CloudFront & Azure cost pennies a month
LOVE2DEV.COM
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
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
LOVE2DEV.COM
• Request
• GET /images/banner.jpg
HTTP/1.1
• Host: www.microsoft.com
Response
HTTP/1.1 200 OK
Content-Type: image/jpeg
Expires: Fri, 20 Apr 2017
00:00:00 GMT
Provide Cacheable Content
Minimize Bytes Downloaded
jQuery Data Request
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
Cached jQuery Data Request
jQuery.ajax({
url: url,
dataType: 'json',
data: data,
cache: true,
success: callback
});
Cache Data Requests
Minimize Bytes Downloaded
Use LocalStorage For Storage & Caching
LOVE2DEV.COM
Allows You to Keep Data Locally in a Hash Table
localStorage
sessionStorage
Approximately 5-10MB
Replace Cookies
Great For Caching
Use IndexDB for Larger Data Sets
Use A Client Build System
Bundling & Minification is OK
Grunt 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 tools
http://bit.ly/1kcrpuo
LOVE2DEV.COM
Slide Deck & Source Code
http://GitHub.com/docluv
LOVE2DEV.COM
slidesha.re/15YTrTT

Contenu connexe

Tendances

Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Dave Olsen
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks Holger Bartel
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Kate Walser
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentationmasudakram
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furiousAnna Migas
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsChris Love
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
10 things you can do to speed up your web app today stir trek edition
10 things you can do to speed up your web app today   stir trek edition10 things you can do to speed up your web app today   stir trek edition
10 things you can do to speed up your web app today stir trek editionChris Love
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web developmentAlberto Apellidos
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09jeresig
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website AssetsChris Love
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Webphilogb
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
SEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher WorldSEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher WorldEric Wu
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceNicholas Zakas
 

Tendances (20)

Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)Optimizing web performance (Fronteers edition)
Optimizing web performance (Fronteers edition)
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks HK CodeConf 2015 - Your WebPerf Sucks
HK CodeConf 2015 - Your WebPerf Sucks
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016Responsive Web Design for Universal Access 2016
Responsive Web Design for Universal Access 2016
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
Building performance into the new yahoo homepage presentation
Building performance into the new yahoo  homepage presentationBuilding performance into the new yahoo  homepage presentation
Building performance into the new yahoo homepage presentation
 
Performance.now() fast but not furious
Performance.now()   fast but not furiousPerformance.now()   fast but not furious
Performance.now() fast but not furious
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
10 things you can do to speed up your web app today stir trek edition
10 things you can do to speed up your web app today   stir trek edition10 things you can do to speed up your web app today   stir trek edition
10 things you can do to speed up your web app today stir trek edition
 
Introduction to web development
Introduction to web developmentIntroduction to web development
Introduction to web development
 
State of jQuery '09
State of jQuery '09State of jQuery '09
State of jQuery '09
 
Lazy load Website Assets
Lazy load Website AssetsLazy load Website Assets
Lazy load Website Assets
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
SEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher WorldSEO AJAX Crawlability in a Responsive Publisher World
SEO AJAX Crawlability in a Responsive Publisher World
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 

En vedette

Rodzinne porozumiewanie się
Rodzinne porozumiewanie się Rodzinne porozumiewanie się
Rodzinne porozumiewanie się Iwona Woźniewska
 
20160610
2016061020160610
20160610arosawa
 
Beginners Guide to Camden South Carolina
Beginners Guide to Camden South CarolinaBeginners Guide to Camden South Carolina
Beginners Guide to Camden South CarolinaTripp Montgomery
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)noorcon
 
All about brizil mj and chlo
All about brizil mj and chloAll about brizil mj and chlo
All about brizil mj and chlomh1082003
 
A Big Data Approach to Energy Management in Retail
A Big Data Approach to Energy Management in RetailA Big Data Approach to Energy Management in Retail
A Big Data Approach to Energy Management in RetailShreeja Sahadevan
 
Fundamentos de economia - Hugo Ruiz
Fundamentos de economia - Hugo RuizFundamentos de economia - Hugo Ruiz
Fundamentos de economia - Hugo RuizJose Matos
 
Build Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCross
Build Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCrossBuild Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCross
Build Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCrossIshai Hachlili
 
Let's not rewrite it all
Let's not rewrite it allLet's not rewrite it all
Let's not rewrite it allMichelle Brush
 
Green-Marlを使った中心性指標プログラミング
Green-Marlを使った中心性指標プログラミングGreen-Marlを使った中心性指標プログラミング
Green-Marlを使った中心性指標プログラミングk h
 
Introduction to Big Data
Introduction to Big DataIntroduction to Big Data
Introduction to Big DataMohammed Guller
 
Accidentally Manager – A Survival Guide for First-Time Engineering Managers
Accidentally Manager – A Survival Guide for First-Time Engineering ManagersAccidentally Manager – A Survival Guide for First-Time Engineering Managers
Accidentally Manager – A Survival Guide for First-Time Engineering ManagersTheo Jungeblut
 
Clean Code II - Dependency Injection
Clean Code II - Dependency InjectionClean Code II - Dependency Injection
Clean Code II - Dependency InjectionTheo Jungeblut
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016Manoj Kumar
 
Create Influence, On Demand
Create Influence, On DemandCreate Influence, On Demand
Create Influence, On DemandBernie Maloney
 
Designing a reactive data platform: Challenges, patterns, and anti-patterns
Designing a reactive data platform: Challenges, patterns, and anti-patterns Designing a reactive data platform: Challenges, patterns, and anti-patterns
Designing a reactive data platform: Challenges, patterns, and anti-patterns Alex Silva
 

En vedette (20)

Rodzinne porozumiewanie się
Rodzinne porozumiewanie się Rodzinne porozumiewanie się
Rodzinne porozumiewanie się
 
20160610
2016061020160610
20160610
 
Beginners Guide to Camden South Carolina
Beginners Guide to Camden South CarolinaBeginners Guide to Camden South Carolina
Beginners Guide to Camden South Carolina
 
Lab fisica montbrun
Lab fisica montbrunLab fisica montbrun
Lab fisica montbrun
 
Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)
Introduction to Game Programming: Using C# and Unity 3D - Chapter 7 (Preview)
 
All about brizil mj and chlo
All about brizil mj and chloAll about brizil mj and chlo
All about brizil mj and chlo
 
A Big Data Approach to Energy Management in Retail
A Big Data Approach to Energy Management in RetailA Big Data Approach to Energy Management in Retail
A Big Data Approach to Energy Management in Retail
 
Fundamentos de economia - Hugo Ruiz
Fundamentos de economia - Hugo RuizFundamentos de economia - Hugo Ruiz
Fundamentos de economia - Hugo Ruiz
 
Build Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCross
Build Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCrossBuild Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCross
Build Cross Platform Mobile Apps for iOS & Android with Xamarin & MvvmCross
 
Word power
Word powerWord power
Word power
 
Let's not rewrite it all
Let's not rewrite it allLet's not rewrite it all
Let's not rewrite it all
 
Etnias
EtniasEtnias
Etnias
 
Green-Marlを使った中心性指標プログラミング
Green-Marlを使った中心性指標プログラミングGreen-Marlを使った中心性指標プログラミング
Green-Marlを使った中心性指標プログラミング
 
Introduction to Big Data
Introduction to Big DataIntroduction to Big Data
Introduction to Big Data
 
Accidentally Manager – A Survival Guide for First-Time Engineering Managers
Accidentally Manager – A Survival Guide for First-Time Engineering ManagersAccidentally Manager – A Survival Guide for First-Time Engineering Managers
Accidentally Manager – A Survival Guide for First-Time Engineering Managers
 
Clean Code II - Dependency Injection
Clean Code II - Dependency InjectionClean Code II - Dependency Injection
Clean Code II - Dependency Injection
 
React js
React jsReact js
React js
 
ES6 PPT FOR 2016
ES6 PPT FOR 2016ES6 PPT FOR 2016
ES6 PPT FOR 2016
 
Create Influence, On Demand
Create Influence, On DemandCreate Influence, On Demand
Create Influence, On Demand
 
Designing a reactive data platform: Challenges, patterns, and anti-patterns
Designing a reactive data platform: Challenges, patterns, and anti-patterns Designing a reactive data platform: Challenges, patterns, and anti-patterns
Designing a reactive data platform: Challenges, patterns, and anti-patterns
 

Similaire à Html5 Fit: Get Rid of Love Handles

Core Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCore Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCakra Danu Sedayu
 
Wordcamp 2017-toronto-sam lalonde
Wordcamp 2017-toronto-sam lalondeWordcamp 2017-toronto-sam lalonde
Wordcamp 2017-toronto-sam lalondewcto2017
 
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress PerformanceDouglas Yuen
 
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersAditya Singh
 
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...Nirvana Canada
 
Demystifying Website Performance and Its Impact on Revenue
Demystifying Website Performance and Its Impact on RevenueDemystifying Website Performance and Its Impact on Revenue
Demystifying Website Performance and Its Impact on Revenuesection_io
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016jancbeck
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersDistilled
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorDan Taylor
 
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance Jessica Ervin
 
Cgs Infotech Ltd Sales Presentation
Cgs Infotech Ltd   Sales PresentationCgs Infotech Ltd   Sales Presentation
Cgs Infotech Ltd Sales PresentationCGS Infotech
 
GlobalDots - How Website Speed Affects Conversion Rates
GlobalDots - How Website Speed Affects Conversion RatesGlobalDots - How Website Speed Affects Conversion Rates
GlobalDots - How Website Speed Affects Conversion RatesGlobalDots
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuningJohn McCaffrey
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...John McCaffrey
 
How to Fix a Slow WordPress Site (and get A+ scores)
How to Fix a Slow WordPress Site (and get A+ scores)How to Fix a Slow WordPress Site (and get A+ scores)
How to Fix a Slow WordPress Site (and get A+ scores)Lewis Ogden
 

Similaire à Html5 Fit: Get Rid of Love Handles (20)

Core Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web ExperienceCore Web Vitals - The Modern Web Experience
Core Web Vitals - The Modern Web Experience
 
Wordcamp 2017-toronto-sam lalonde
Wordcamp 2017-toronto-sam lalondeWordcamp 2017-toronto-sam lalonde
Wordcamp 2017-toronto-sam lalonde
 
www.feedbackearning.com
www.feedbackearning.comwww.feedbackearning.com
www.feedbackearning.com
 
Optimizing WordPress Performance
Optimizing WordPress PerformanceOptimizing WordPress Performance
Optimizing WordPress Performance
 
Website speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmastersWebsite speed optimization guide for technically advanced webmasters
Website speed optimization guide for technically advanced webmasters
 
WEB BUZZ SOLUTION
WEB BUZZ SOLUTIONWEB BUZZ SOLUTION
WEB BUZZ SOLUTION
 
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
Is Poor Performance Dragging You Down? Here are Five Strategies to Maximize P...
 
Demystifying Website Performance and Its Impact on Revenue
Demystifying Website Performance and Its Impact on RevenueDemystifying Website Performance and Its Impact on Revenue
Demystifying Website Performance and Its Impact on Revenue
 
WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016WordPress Theme Performance - WP Vienna meetup 8.6.2016
WordPress Theme Performance - WP Vienna meetup 8.6.2016
 
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital MarketersSearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
SearchLove San Diego 2018 | Mat Clayton | Site Speed for Digital Marketers
 
Web components
Web componentsWeb components
Web components
 
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan TaylorOptimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
Optimization 2020 | Using Edge SEO For Technical Issues ft. Dan Taylor
 
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance WPblog's Ultimate WordPress Guide to Boost Your Website Performance
WPblog's Ultimate WordPress Guide to Boost Your Website Performance
 
Cgs Infotech Ltd Sales Presentation
Cgs Infotech Ltd   Sales PresentationCgs Infotech Ltd   Sales Presentation
Cgs Infotech Ltd Sales Presentation
 
GlobalDots - How Website Speed Affects Conversion Rates
GlobalDots - How Website Speed Affects Conversion RatesGlobalDots - How Website Speed Affects Conversion Rates
GlobalDots - How Website Speed Affects Conversion Rates
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
Ruby on Rails Performance Tuning. Make it faster, make it better (WindyCityRa...
 
How to Fix a Slow WordPress Site (and get A+ scores)
How to Fix a Slow WordPress Site (and get A+ scores)How to Fix a Slow WordPress Site (and get A+ scores)
How to Fix a Slow WordPress Site (and get A+ scores)
 
Technial SEO
Technial SEOTechnial SEO
Technial SEO
 
Responsive Design
Responsive DesignResponsive Design
Responsive Design
 

Plus de Chris Love

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API IntroductionChris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsChris Love
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsChris Love
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for EducationChris Love
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...Chris Love
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingChris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereChris Love
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Chris Love
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft EdgeChris Love
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basicsChris Love
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignChris Love
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App TodayChris Love
 
A night at the spa
A night at the spaA night at the spa
A night at the spaChris Love
 
Responsive web design
Responsive web designResponsive web design
Responsive web designChris Love
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5Chris Love
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampChris Love
 

Plus de Chris Love (19)

Quick Fetch API Introduction
Quick Fetch API IntroductionQuick Fetch API Introduction
Quick Fetch API Introduction
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Introduction to Progressive Web Applications
Introduction to Progressive Web ApplicationsIntroduction to Progressive Web Applications
Introduction to Progressive Web Applications
 
Progressive Web Apps for Education
Progressive Web Apps for EducationProgressive Web Apps for Education
Progressive Web Apps for Education
 
The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...The server is dead going serverless to create a highly scalable application y...
The server is dead going serverless to create a highly scalable application y...
 
Real World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker CachingReal World Lessons in Progressive Web Application & Service Worker Caching
Real World Lessons in Progressive Web Application & Service Worker Caching
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work EverywhereUsing Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere Using Responsive Web Design To Make Your Web Work Everywhere
Using Responsive Web Design To Make Your Web Work Everywhere
 
An Introduction to Microsoft Edge
An Introduction to Microsoft EdgeAn Introduction to Microsoft Edge
An Introduction to Microsoft Edge
 
Single page applications the basics
Single page applications the basicsSingle page applications the basics
Single page applications the basics
 
There Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web DesignThere Is No Mobile: An Introduction To Responsive Web Design
There Is No Mobile: An Introduction To Responsive Web Design
 
Touch the web
Touch the webTouch the web
Touch the web
 
10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today10 Things You Can Do to Speed Up Your Web App Today
10 Things You Can Do to Speed Up Your Web App Today
 
SPAs Are Easy
SPAs Are EasySPAs Are Easy
SPAs Are Easy
 
A night at the spa
A night at the spaA night at the spa
A night at the spa
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Developing and deploying a website with html5
Developing and deploying a website with html5Developing and deploying a website with html5
Developing and deploying a website with html5
 
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code CampDoing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
Doing Modern Web, aka JavaScript and HTML5 in the Enterprise NYC Code Camp
 

Dernier

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIUdaiappa Ramachandran
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 

Dernier (20)

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
RAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AIRAG Patterns and Vector Search in Generative AI
RAG Patterns and Vector Search in Generative AI
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 

Html5 Fit: Get Rid of Love Handles

  • 2. My Fitness Journey Lost over 90 pounds Regained my health Became a fit athlete again AND Noticed many parallels with the modern web LOVE2DEV.COM
  • 3. 10 Days to HTML5 Fitness A 10 Day Email Course to Help You Get Your Web Sites In Shape. http://bit.ly/html5fit LOVE2DEV.COM
  • 4. “We have remade the web in our own image...obese" Jason Grigsby, Mobile and Web Strategist and Co-Founder Cloud Four LOVE2DEV.COM
  • 5. Average web page is now larger than DOOM installation. LOVE2DEV.COM
  • 6. HTML5 Fitness LOVE2DEV.COM HTML5 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.
  • 7. Web Sites Are Obese & Out of Shape LOVE2DEV.COM http://httpArchive.org as of 5/15/2016 117 File Requests – 2.4+MB 22 JavaScript Files - 399KB 7 CSS Files – 75KB 60 Images – 1.5MB 40 TCP Connections 21 Domains 43% Cacheable
  • 8. Web Sites Are Obese & Out of Shape LOVE2DEV.COM
  • 9. LOVE2DEV.COM Original Web was Lean & Fit During dial-up days, HTML was pre-rendered on server We assumed little to no bandwidth available
  • 10. Broadband expansion Browsers got better, stronger and faster Mobile devices proliferated We assumed broadband was ubiquitous We moved processing to the client Developers ignored mobile Web Got Older & Obese Web (WWW) Developers LOVE2DEV.COM
  • 11. We are obese because… We Eat Too Much LOVE2DEV.COM
  • 13. We Eat the Wrong Things LOVE2DEV.COM We are obese because…
  • 14. LOVE2DEV.COM Web became obese because… We Load the Wrong Things
  • 15. We don’t know how to cook LOVE2DEV.COM We are obese because…
  • 17. We Don't Eat Real Food Anymore LOVE2DEV.COM We are obese because…
  • 19. LOVE2DEV.COM We are obese because… We Rely on Fast and Processed Food
  • 22. We are out of shape because… We Don't Exercise LOVE2DEV.COM
  • 23. Web is out of shape because… We Don't Analyze Our Web Sites or Apps LOVE2DEV.COM
  • 24. We are out of shape because… We Assume Exercise Is Hard LOVE2DEV.COM
  • 25. Web is out of shape because… We Assume Analyzing Web Client is Hard LOVE2DEV.COM
  • 26. We are out of shape because… We Don't Know How to Exercise LOVE2DEV.COM
  • 27. Web is out of shape because… We Don't Know How to Analyze Our Web Clients LOVE2DEV.COM
  • 28. We are out of shape because… We Think We Don't Have Enough Time LOVE2DEV.COM
  • 29. Web is out of shape because… We Don't Budget Time or Resources to Analysis LOVE2DEV.COM
  • 30. We are out of shape because… We Let Real Life Get in Our Way LOVE2DEV.COM
  • 31. Web is out of shape because… We are distracted by too many shiny balls and suffer from JavaScript fatigue LOVE2DEV.COM
  • 32. Why Is HTML5 Fitness Important? LOVE2DEV.COM
  • 33. User Experience is to the customer. EVERYTHING LOVE2DEV.COM
  • 34. IS KEY TO YOUR BUSINESS PERFORMANCE LOVE2DEV.COM
  • 35. LOVE2DEV.COM Matt Young Technology Evangelist & Writer, Radware http://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
  • 37. Faster Sites Rank Higher Faster is Better User Experience http://bit.ly/1Ezmko6 Mobile First Web Applications Rank Higher Mobilegeddon http://bit.ly/1JFpsmE SEO & Web Performance LOVE2DEV.COM
  • 38. Faster Sites Have Higher Conversion Rates http://bit.ly/S1fHSZ http://bit.ly/WajJbB http://bit.ly/S3UoAj http://bit.ly/RIQMDM LOVE2DEV.COM
  • 39. 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 performance By Terrence Dorsey http://oreil.ly/1UZu2Tl
  • 40. Performance Affects User Experience Over 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 Phone LOVE2DEV.COM http://bit.ly/SuBLDR
  • 41. “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
  • 42. “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
  • 44. Web Performance Optimization Web 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
  • 46. 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.” LOVE2DEV.COM Tim Kadlec http://bit.ly/1CUAfGx
  • 47. Set Performance Baseline Page Load Time Time to Full Render Time to First Interaction Page Speed Index LOVE2DEV.COM
  • 48. Select Performance Metrics Typical Load Time Shoot for < 2 Seconds Over Broadband My Standard < 1 Second LOVE2DEV.COM
  • 49. Select Performance Metrics Page Weight What Does My Web Site Cost? http://whatdoesmysitecost.com LOVE2DEV.COM
  • 50. Select Performance Metrics HTTP Chattiness # of Requests LOVE2DEV.COM
  • 51. Web Performance Tools F12 Performance Budget Google Page Insights LOVE2DEV.COM What Does My Site Cost? 3rd party script visualization WebPageTest.org
  • 53. webpagetest.org LOVE2DEV.COM http://bit.ly/1dibffr Open Source Available to Create Private Instance Can be Scripted & Automated
  • 55. webpagetest.org – film strip view LOVE2DEV.COM
  • 57. Identify Your Focus LOVE2DEV.COM What is Increasing Load time? What is Delaying Rendering? Is Overall User Experience Poor? (e.g. users wait for action confirmation)
  • 58. Act Now to Get Rid of Your Web Site's Love Handles LOVE2DEV.COM
  • 60. Image Problems • Too Large • Not Optimized LOVE2DEV.COM
  • 61. Tools to Optimize Images • pngCrush • ImageOptm • GruntIcon • Kraken.io LOVE2DEV.COM
  • 62. 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 LOVE2DEV.COM
  • 63. <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 Resolutions Optimize Media Usage
  • 64. Responsive Images • Allow Us to Create and Use an Array of properly sized images • Browser downloads ‘best’ image for browser viewport LOVE2DEV.COM
  • 66. 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">
  • 67. 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 LOVE2DEV.COM
  • 68. Image Formats: PNG, JPEG, JPEG-XR Optimize Media Usage PNG (Default) Website Elements, Logos JPEG Photographs JPEG-XR High Resolution Photographs Don’t Get Distracted GIF, TIFF, BMP, WebP, etc.
  • 69. 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
  • 71. 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
  • 72. Right-Left Rule • .main-content > article #myArticleId p • Translates to: • #myArticleId p • Think More Like the Browser When Defining Selectors
  • 73. 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
  • 75. BEM Naming Convention • Block • Element • Modifier • Bootstrap and Primer Good Examples • Create Rules Based on UI Expectations, Not Specific Elements
  • 76. BEM Naming Convention • .btn {…} • .btn-primary {…} • .btn-primary:disabled {…} • .btn-xs {…} • Might also see __ between words
  • 77. 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>
  • 78. Inline CSS • AMP Requires CSS Be Inlined in HEAD • Eliminates HTTP Requests • Enables Browser to Render as Fast As Possible LOVE2DEV.COM
  • 79. Loading CSS Optimization Load Only Used CSS / Remove Unused CSS UNCSS Module Identify Critical CSS Example: Most Bootstrap Sites Use <10% of Bootstrap Bootstrap Adds up to 600kb to Page Weight LOVE2DEV.COM
  • 80. Javascript Optimization • Still Blocking Call • Use Async & Defer • Load Only Scripts you will use • Think Portion Control LOVE2DEV.COM
  • 81. <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 Architecture Efficiently Structure Markup
  • 82. <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 Cool Efficiently Structure Markup
  • 83. Javascript Optimization Avoid 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
  • 85. 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
  • 86. Bundle & Minify Text Assets Eliminate Excess HTTP Requests Reduce Data Footprint If Production Version Bundle & aim for a Single JS and Single CSS file LOVE2DEV.COM
  • 87. Gzip Text Content Browsers support Gzip & deflate algorithms Reduces text base content size Makes it easier to traverse Intertubes 14kb Critical Packet Size This is due to HTTP’s Slow Start This is the goal for Optimal Mobile Performance LOVE2DEV.COM
  • 88. • Request • GET / HTTP/1.1 • Accept: */* • Accept-Language: en-us • UA-CPU: x86 • Accept-Encoding: gzip, deflate • Host: www.live.com Response HTTP/1.1 200 OK Content-Length: 3479 Expires: -1 Date: Sun, 14 Mar 2017 21:30:46 GMT Pragma: no-cache Content-Encoding: gzip GZIP Compress Network Traffic Minimize Bytes Downloaded
  • 89. Configure Gzip in IIS LOVE2DEV.COM
  • 90. Configure Gzip in Amazon S3 | CloudFront LOVE2DEV.COM
  • 91. Use a CDN 1. Globally Distributes Resources Closer to Client 2. Was Expensive 3. Amazon CloudFront & Azure cost pennies a month LOVE2DEV.COM
  • 92. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 93. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 94. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 95. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 96. Use Content Distribution Networks (CDN’s) Quickly Respond to Network Requests
  • 97. 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 LOVE2DEV.COM
  • 98. • Request • GET /images/banner.jpg HTTP/1.1 • Host: www.microsoft.com Response HTTP/1.1 200 OK Content-Type: image/jpeg Expires: Fri, 20 Apr 2017 00:00:00 GMT Provide Cacheable Content Minimize Bytes Downloaded
  • 99. jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, success: callback }); Cached jQuery Data Request jQuery.ajax({ url: url, dataType: 'json', data: data, cache: true, success: callback }); Cache Data Requests Minimize Bytes Downloaded
  • 100. Use LocalStorage For Storage & Caching LOVE2DEV.COM Allows You to Keep Data Locally in a Hash Table localStorage sessionStorage Approximately 5-10MB Replace Cookies Great For Caching Use IndexDB for Larger Data Sets
  • 101. Use A Client Build System Bundling & Minification is OK Grunt 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 tools http://bit.ly/1kcrpuo LOVE2DEV.COM
  • 102. Slide Deck & Source Code http://GitHub.com/docluv LOVE2DEV.COM slidesha.re/15YTrTT

Notes de l'éditeur

  1. Update these #s before the presentation as they are always updating
  2. Update chart from latest httpArchive stats
  3. UPDATE THIS SLIDE WITH LATEST RADWARE STATS