Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3

Marco CasarioCTO 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

Best PracCces

OpCmizaCons

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

You can’t optimize what you can’t measure

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

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 scenario2. 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

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

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 valuethe total load time

the render timethe 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 LookupTCP connectionHTTP 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/Www.Marcocasario.Com 28

How to opCmize

Eliminate render-blocking JS

Load JS asynch

How to opCmize

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 cookieOnce 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.

http://addyosmani.github.io/basket.js/

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/spritesh>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/

How to opCmize

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

YeomanBefore Yeoman

Make a list of libraries to use in your project (es. Bootstrap, HTML5 Boilerplate, Backbone etc)Download the libraries Organize the foldersInclude the libraries to the projectWrite the codeMaintain and update the libraries

YeomanWith Yeoman

yo webapp

HTML5 BoilerplateTwitter BootstrapProject StructureRequireJS (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

YeomanOne 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:

Yeoman

Bower is a package manager for web application

www.bower.io

Yeomanbower.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 ToolsChrome Developer Tools

Chrome Dev ToolsRemote Debugging

Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3

Marco CasarioCTO Comtaste - m.casario@comtaste.com

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

Transcript of Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion...

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

Technology

Transcript of Become a Frontend Developer Ninja using HTML5, JavaScript and CSS3 - Marco Casario - Codemotion...

CSS3 Fundamentals. CSS3 Introduction CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS.

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

IBM Bluemix @Codemotion

HTML5 & CSS3

Presentazione Codemotion

CSS3 Presentation

Html5 CSS3

Learn css3

Fundamental CSS3

css3, html5

CSS3 Selectors

Taller XHTML y CSS3 - CSS3

CSS3 Layout

Every millisecond counts: Techniques, strategies, and tools for a Web Performance Jedi Wannabe - Marco Casario - Codemotion Rome 2015

Codemotion pixel art for coders - Codemotion Rome 2015

Ecs codemotion

Codemotion twitter programming

CSS3 secrets: 10 things you might not know about CSS3

Codemotion how to create a product copy - Codemotion Rome 2015

CSS3 Introduction