Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Become
a
Frontend
Developer
Ninja

using
HTML5,
JavaScript
and
CSS3

Marco Casario
CTO Comtaste - m.casario@comtaste.com
Friday, April 11, 14

Chi
sono
Www.Marcocasario.Com 2
Marco Casario
CTO Comtaste
www.linkedin.com/in/marcocasario

I
miei
ulCmi
libri

I
miei
corsi
HTML5, RWD, JS
training.codemotion.it

Agenda
AutomaCng
&
TesCng
Best
PracCces
OpCmizaCons

WHAT
MAKES
YOU
A

FRONTEND
NINJA
DEVELOPER


Languages
+
Libraries
+
Frameworks

Velocity
What are the the ingredients of
a Frontend Developer Ninja ?

Page
weight
grows
http://httparchive.org/trends.php?s=Top1000&minlabel=Nov
+15+2010&maxlabel=Apr+1+2014#bytesTotal&reqTotal

Mobile
Devices
&
Large
Screens
https://www.flickr.com/photos/lukew

Velocity
Desktop users are more or less
satisﬁed with the status quo
(but pages are going bigger)

Measuring
the
load
Cme

Velocity
Take your time to code.
When you invest time you can
get closer to a core of a
problem.

Velocity
DISCLAIMER.

OPTIMIZATIONS

Why
is
it
important
?
You can’t optimize
what you can’t measure

Why
is
it
important
?
Learning how the browsers
load your web pages, helps you:
make better decisions,
justify the approaches and the
development best practices.
-- Paul Irish

Browser’s
rendering
ﬂow

Browser’s
rendering
ﬂow
It’s not a linear ﬂow.
Each time a resource needs to
be downloaded, it blocks the
rendering.
http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

How
to
opCmize
In order to optimize you:
1. identify & mesure a scenario
2. deﬁne what the fastest you
can get is

How
to
opCmize
The Speed Index
https://sites.google.com/a/webpagetest.org/docs/
using-webpagetest/metrics/speed-index

How
to
opCmize
The Speed Index is the average time at
which visible parts of the page are
displayed. It is expressed in
milliseconds and dependent on size of
the view port.
It measures when pixels are shown on
screen.

How
to
opCmize
The Speed Index is the "area above the
curve" calculated in ms and using 0.0-1.0
for the range of visually complete.

How
to
opCmize
Identify the Load Time & the
End of Activity

How
to
opCmize

How
to
opCmize
Get a visual representation of
the user’s perception of what’s
happening

How
to
opCmize
http://www.webpagetest.org/video/compare.php?tests=140410_4Y_KVY-r:1-c:0

How
to
opCmize
Focus on:
the speed index value
the total load time
the render time
the bandwidth

How
to
opCmize
Is the bandwidth so important
for faster pages ?

How
to
opCmize
For getting fast pages, what is
the right number of requests
and optimal page size ?

How
to
opCmize
Measuring performance by the KB is
like measuring eﬀectiveness of your
diet by the pound.
Measuring performance by the number
of requests is like measuring your diet
by number of things you ate - in both
cases, who cares about what you
actually ate, right ?

How
to
opCmize
Moreover, not all requests are
made equal.
Where are they initiated?
What part of the UX do they
block ?

How
to
opCmize
Moreover, not all the bytes are
made equal.
Bytes of diﬀerent content-types
have diﬀerent impact on
performance.

How
to
opCmize
What's the critical path on
loading a page ?

How
to
opCmize
Bandwidth + Latency =
Performance

How
to
opCmize
You need to understand the
components of an HTTP
request

How
to
opCmize
1. DNS lookup to resolve the hostname
to IP address
2. New TCP connection requires a
handshake roundtrip to the server
3. HTTP request requires minimum of a
one roundtrip to the server plus server
processing time

How
to
opCmize
http://www.webpagetest.org/result/
140410_XJ_CHT/1/details/

How
to
opCmize
Focus on:
DNS Lookup
TCP connection
HTTP requests
Bandwidth used

How
to
opCmize
What does it happen when
there is a gap in the bandwidth
chart ?

How
to
opCmize
http://chimera.labs.oreilly.com/books/1230000000545/
ch10.html#LATENCY_BOTTLENECK

How
to
opCmize
Latency is the performance
bottleneck for HTTP as well as
all the web.

How
to
opCmize
Focus on how resources that
are requested from a diﬀerent
origin consume network time
http://www.webpagetest.org/video/compare.php?
tests=140410_AT_DST-r:1-c:0

How
to
opCmize
What will your gain be if you
load zeptojs instead of Jquery ?
What if you reduce the blocking
resources and make parallel
loading ?

How
to
opCmize
How can you write better code
to render the page faster ?

How
to
opCmize
Eliminate render-blocking JS
Load JS asynch

How
to
opCmize
<script src="ﬁle.js" defer></script>
<script src="ﬁle.js" async></script>

How
to
opCmize
Use a library like RequireJS

How
to
opCmize
Double check the size of the
Cookies
(Resources Tab of the Dev Tools)

How
to
opCmize
Serve the content in the initial
part of html
Avoid redirects for html

How
to
opCmize
Use Gzip.
http://www.gidnetwork.com/tools/gzip-
test.php

How
to
opCmize
No really, Use Gzip.

How
to
opCmize
Don't F*#k Around, use gzip.

How
to
opCmize
Have a look at SPDY: An
experimental protocol for a
faster web

How
to
opCmize
Minimize your JavaScript and
CSS ﬁles.
It's easy and it can be
automated.

How
to
opCmize
Minimize render-blocking CSS:
separate critical from non
critical CSS if your CSS payload
is larger that 15kb
Avoid including large data URIs

How
to
opCmize
Talking about rendering, how
you can write better CSS to
render the page faster ?

How
to
opCmize
External CSS stylesheets are
render-blocking, meaning the
browser won’t paint content to
the screen until all of your CSS
– speciﬁcally, media=’screen’
CSS – arrives.

How
to
opCmize
The solution to this is inlining
the initially needed (above-the-
fold) CSS for your page and
loading the rest of your CSS
when the page is ready.

How
to
opCmize
Inline CSS
Ready and available for the
page.
Single HTTP request to view
content.

How
to
opCmize
Inline CSS
Shave 500-700 ms oﬀ start
rendering the
DOMContentReady
Use only for the critical CSS

How
to
opCmize
How can you deﬁne your critical
content?
What the user expects to ﬁrst
see on the page when it’s
loaded.

How
to
opCmize
Load CSS from local storage
http://addyosmani.github.io/
basket.js/

How
to
opCmize
Remove
orphan
CSS
statements.
www.sitepoint.com/dustmeselectors/

How
to
opCmize
Op9mize
images
Use
the
Sprite
technique.
h>p://alistapart.com/ar9cle/sprites
h>p://spriteme.org/

How
to
opCmize
Use
the
icon
fonts
h>p://icomoon.io/

How
to
opCmize
Compress images
http://imageoptim.pornel.net/
http://developer.yahoo.com/yslow/smushit/
http://pmt.sourceforge.net/pngcrush/

AUTOMATING
&
TESTING

Author,
TesCng,
Automate
Use the right tool to author,
testing and automate

Yeoman
It’s a tool to help optimize your workﬂow
when developing web applications
http://www.yeoman.io

Yeoman

Yeoman
Before Yeoman
Make a list of libraries to use in your
project (es. Bootstrap, HTML5
Boilerplate, Backbone etc)
Download the libraries
Organize the folders
Include the libraries to the project
Write the code
Maintain and update the libraries

Yeoman
With Yeoman
yo webapp
HTML5 Boilerplate
Twitter Bootstrap
Project Structure
RequireJS (optional)
Modernizr (optional)
Build process
...

Yeoman
yo webapp
# scaﬀold out a skeleton web app
project
bower install underscore
# install a dependency for your project
from Bower
grunt
# build the application for deployment

Yeoman
One of the sub-tsk that Grunt executes
is the -usemin that makes the following:

<script src="bower_components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>

After your grunt build task completes,
you will end up with this:
<script src="scripts/c155266f.main.js"></script>

Yeoman
Bower is a package manager
for web application
www.bower.io

Yeoman
bower.json
{
"name": "yowebapp",
"version": "0.1.0",
"dependencies": {
"sass-bootstrap": "~3.0",
"requirejs": "~2.1.4",
"jquery": "~1.9.1",
"angular":"1.0.7"
},
"devDependencies": {}
}

Chrome
Dev
Tools
Chrome Developer Tools

Chrome
Dev
Tools
Remote Debugging

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Recommended

Recommended

More Related Content

Similar to Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario

Similar to Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario (20)

More from Codemotion

More from Codemotion (20)

Recently uploaded

Recently uploaded (20)

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Casario