Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion Milan 2014

Become
a
Frontend
Developer
Ninja
using
HTML5,
JavaScript
and
CSS3
Marco Casario
CTO Comtaste - m.casario@comtaste.com
Wednesday, December 3, 14

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

I
miei
ulCmi
libri

I
miei
corsi
training.codemotion.it

AGENDA

Agenda
OpCmizaCons
Best
PracCces

WHAT
MAKES
YOU
A
FRONTEND
NINJA
DEVELOPER

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

Languages
+
Libraries
+
Frameworks

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
satisfied with the status quo
(but pages are going bigger)

Measuring
the
load
Cme

Velocity
DISCLAIMER.

OPTIMIZATIONS

Why
is
it
important
?
Start from Page Insights

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
flow

Browser’s
rendering
flow
It’s not a linear flow.
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. define 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 effectiveness 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 different content-types
have different impact on
performance.

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

How
to
opCmize
Bandwidth + Latency =
Performance

BEST
PRACTICES

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

How
to
opCmize
600 ms of time has already been used up by
network overhead: a DNS lookup to resolve the
hostname (e.g. google.com) to an IP address, a
network roundtrip to perform the TCP handshake,
and finally a full network roundtrip to send the
HTTP request. This leaves us with just 400 ms!

How
to
opCmize
OUR GOAL
To give the Perception of page
loading in 200ms

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 different
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
Stop Spamming
http://idontwantyourfuckingapp.tumblr.com/

How
to
opCmize
Eliminate render-blocking JS
Load JS asynch

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

How
to
opCmize
Use a library like RequireJS

How
to
opCmize
Pay Attention to Media Queries
They block the rendering of the
page

How
to
opCmize
Pay Attention to Media Queries
1. Load Media Queries CSS
async (inject <LINK> after rendering)
2.Mix server-side detection with
RWD (WURLF or DeviceAtlas)

How
to
opCmize
Web Fonts are render blocking
Defer loading after first
rendering

How
to
opCmize
Cache content
Use Application Cache for
critical content
IndexedDB on iOS 8

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 files.
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
– specifically, 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 off start
rendering the
DOMContentReady
Use only for the critical CSS

How
to
opCmize
How can you define your critical
content?
What the user expects to first
see on the page when it’s
loaded.

How
to
opCmize
Loss Of Caching
Inlining the content makes the code not
cacheable and the resources are re-downloaded
every time.
The first page load on a new site may be
faster, but subsequent pages or return
visitors would experience a slower page load.

How
to
opCmize
First Visit Inlining
On the first visit, inline the critical CSS and set a
cookie
Once the page loads, download all the resources
as individual files, or store the data into a
Scriptable Cache (http://www.blaze.io/technical/browser-cache-
2-0-scriptable-cache/)
If a user visits the page and has the cookie,
assume it has the files in the cache, and don’t
inline the data.

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 workflow
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
# scaffold 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 - Marco Casario - Codemotion Milan 2014

More Related Content

Similar to Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion Milan 2014

More from Codemotion

Recently uploaded

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion Milan 2014