Web Marketing Now - WPO

www.andrea-cardinale.it

[email protected]

@CardinaleAndrea

www.webandtech.it

Andrea CardinaleWeb Developer & Web Marketing SpecialistWeb Performance Specialist

+ Andrea Cardinale

http://www.andrea-cardinale.it


mailto:[email protected]


https://twitter.com/cardinaleandrea


http://www.webandtech.it


https://plus.google.com/u/0/105123558530541749555/about


Blog : www.andrea-cardinale.itE-mail : [email protected]

Twitter : @CardinaleAndreaGoogle Plus : + Andrea Cardinale

Andrea Cardinale

Perchè?






http://www.gdgnebrodi.info/



Andrea Cardinale

Perchè?1) Ranking









Andrea Cardinale

Using site speed in web search rankinghttp://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.htmlWebmaster Level: AllFriday, April 09, 2010 at 11:00 AM

“You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed.”

Posted by Amit Singhal, Google Fellow and Matt Cutts, Principal Engineer, Google Search Quality Team







http://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.html

http://googlewebmastercentral.blogspot.it/2010/04/using-site-speed-in-web-search-ranking.html



Andrea Cardinale

Perchè?1) Ranking

2) Conversioni









Andrea Cardinale

Tasso di abbandono









Andrea Cardinale

Ricerche / Analisi / Studi

Condotte da grandi aziende

(anche se un po' vecchiotte restano valide)









Andrea Cardinale

Ricerche / Analisi / StudiBingUna pagina di 2 secondi più lenta provoca un calo del 4,3% dei ricavi/utente.









Andrea Cardinale

Ricerche / Analisi / StudiGoogle400 millisecondi di ritardo causa un calo dello 0,59% nelle ricerche/utente.









Andrea Cardinale

Ricerche / Analisi / StudiYahoo400 millisecondi di rallentamento provocano un calo del 5-9% del traffico.









Andrea Cardinale

Ricerche / Analisi / StudiShopzillaVelocizzare il sito di 5 secondi ha aumentato il tasso di conversione del 7-12%, raddoppiato il numero di sessioni di search engine marketing, ed ha dimezzato il numero di server necessari.









Andrea Cardinale

Ricerche / Analisi / StudiMozillaLa diminuizione di 2,2 secondi del caricamento delle loro landing pages ha aumentato le conversioni di download del 15,4%, ovvero 60 milioni di download di Firefox in più all'anno.









Andrea Cardinale

Ricerche / Analisi / StudiNetflixLa sola adozione di un fattore di ottimizzazione, la compressione gzip, ha determina un aumento di velocità del 13-25% e ridotto il traffico di rete in uscita del 50%.









Andrea Cardinale

Fonte: http://www.watchingwebsites.com







http://www.watchingwebsites.com



Andrea Cardinale

Perchè?1) Ranking

2) Conversioni

3) Mobile









Andrea Cardinale

Fonte: Human Highway

● 2012 => 4%

● 2013 => 10%

● crescita a tripla cifra(+165% anno su anno)

e-Shopping







http://http//www.humanhighway.it/



Andrea Cardinale

Fonte: What Users Want from Mobile

● 74% degli utenti abbandona dopo aver atteso il caricamento per cinque secondi

● Il 46% non ritornerà in un sito lento

● 71% degli utenti mobile si aspettano che sul proprio smartphone i siti web siano veloci almeno quanto lo sono sul proprio PC/Notebook

Performance







http://www.gomez.com/wp-content/downloads/19986_WhatMobileUsersWant_Wp.pdf



Andrea Cardinale

Perchè?"10 Golden Rules for Successful Apps" by Fred WilsonFonte: http://blog.apps-builder.com/10-golden-rules-for-successful-apps/

1. Speed

"Speed is more than a feature.It’s the most important feature."







http://blog.apps-builder.com/10-golden-rules-for-successful-apps/



Andrea Cardinale

I tempi di caricamento dipendono per almeno

80%dal front-end









Andrea Cardinale









Andrea Cardinale

Diminuire il numero di richieste

Averlo più piccolo (il tempo di ogni richiesta)









Andrea Cardinale

PageSpeedhttps://developers.google.com/speed/pagespeed/

Yahoo! YSlowhttp://developer.yahoo.com/yslow/

WebPagetesthttp://www.webpagetest.org/

GTmetrixhttp://gtmetrix.com/

Pingdomhttps://www.pingdom.com/

Akamai's Mobitesthttp://mobitest.akamai.com/m/index.cgi

Which loads faster?http://whichloadsfaster.com/

Load Impacthttp://loadimpact.com/

Speedoohttp://www.giorgiotave.it/speedoo/

WebPagetest







https://developers.google.com/speed/pagespeed/

https://developers.google.com/speed/pagespeed/

http://developer.yahoo.com/yslow/

http://developer.yahoo.com/yslow/

http://www.webpagetest.org/

http://www.webpagetest.org/

http://gtmetrix.com/

http://gtmetrix.com/

https://www.pingdom.com/

https://www.pingdom.com/

http://mobitest.akamai.com/m/index.cgi

http://mobitest.akamai.com/m/index.cgi

http://whichloadsfaster.com/

http://whichloadsfaster.com/

http://loadimpact.com/

http://loadimpact.com/

http://www.giorgiotave.it/speedoo/

http://www.giorgiotave.it/speedoo/



Andrea Cardinale

Unire più files CSS / JS

Minori richieste al serverMinor tempo di latenza

primo.css + secondo.css + terzo.css unico.cssprimo.js + secondo.js + terzo.js unico.js









Andrea Cardinale

Diminuire il peso dei CSS / JS

Riduzione download dati

Esempio: jQuery 1.8.3

Development version: 247KBMinified version: 93,6KB -62%









Andrea Cardinale

Prima (16 richieste) Dopo (2 richieste)









Andrea Cardinale

Diminuire il peso delle risorse

Riduzione download datiEsempio: jQuery 1.8.3

Development version: 247KBMinified version: 93,6KBGzipped version: 32KB -87%









Andrea Cardinale

Evitare continui downloadsdella stessa risorsa

Minori richieste al server









Andrea Cardinale

Sfruttiamo la cache del browser

Risorse statiche:Implementare una policy "Never expire" impostando una data molto lontana (es.: 1 anno)

Risorse dinamiche:Utilizzare una data appropriata per il Cache-Control header e utilizzare il Last-Modified header per segnalare un'eventuale update della risorsa









Andrea Cardinale

Esempio tramite .htaccess<IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType text/html A3600</IfModule>

<FilesMatch "\.(css|js|CSS|JS)$"> <IfModule mod_headers.c> Header set Pragma "public" Header set Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule></FilesMatch>









Andrea Cardinale

First View(16.176s)

19 richieste

Repeat View(0.543s)

4 richieste









Andrea Cardinale

Il browser e il server web riutilizzanola stessa connessione per trasferire i files

● Riduce la latenza dei trasferimenti HTTP

● Riduce l'utilizzo della CPU









Andrea Cardinale

Cookie-less domain

Parallelize downloads across hostnames









Andrea Cardinale

www.miosito.itHTML + componenti dinamici

static1.miosito.it static2.miosito.itcomponenti statici (img, css, js)









Andrea Cardinale

● Consente di massimizzare downloads paralleli

● Massimo 2/4 domini altrimenti si ha una penalizzazione DNS lookup

● Evitiamo il trasferimento di inutili dati relativi ai cookies che non utilizziamo

● Esempi: Yahoo! → yimg.com YouTube → ytimg.com Amazon → images-amazon.com









Andrea Cardinale









Andrea Cardinale

<link rel="dns-prefetch" href="//fakecdn.domain.com">









Andrea Cardinale

diminuire i tempi di latenza

diminuire il carico di lavoro del server

CloudFronthttp://aws.amazon.com/cloudfront/

CloudFlarehttps://it.cloudflare.com/

Akamaihttp://www.akamai.com/

MaxCDNhttp://www.maxcdn.com/

Imgixhttp://www.imgix.com/









Andrea Cardinale

Un'unica immagine per n immagini

Minori richieste al web server

Es.: Google CSS Sprite









Andrea Cardinale

offrire immagini non scalate

attributi width e height del tag img

corrispondenti alle dimensioni dell'immagine









Andrea Cardinale

Ridurre la dimensione delle immagini

● JPEG progressive

● WebP









Andrea Cardinale

JPEG non ottimizzata

331.2KB

Progressive JPEG

306.6KB

-8%

WebP220.7KB

-33.3%









Andrea Cardinale

nuovo tool

www.reimgize.com







http://www.reimgize.com





Andrea Cardinale

Lazy loading

Non carichiamo l'immagine a priorima solo solo se è visibile

Aumento velocià percepitaEvitiamo richieste inutili

Risparmiamo banda









Andrea Cardinale

Lazy loading

da 18 richieste (384KB) a 9 richieste (142KB)









Andrea Cardinale

Single Point Of Failure

Esempiby Steve Souders

http://stevesouders.com/tests/spof/slow-script.php?t=1368886996

La causa principalescript esterni

Altre cause:fogli di stile @font-face inline

Fogli di stile con @font-face Script seguito da @font-face











Andrea Cardinale

Single Point Of Failure

Finche lo script non viene caricato

la pagina mostrerà una schermata bianca









Andrea Cardinale

Script esterni

Facebook widgetTwitter widget

Advertising scripts

altri widgets altri scripts









Andrea Cardinale

Asynchronous / Deferprima









Andrea Cardinale

Asynchronous / Defer

dopo









Andrea Cardinale

● modulo per Apache● permette l’ottimizzazione automatica di pagine web● Comprende le ultime tecniche di ottimizzazione web● 40 filtri di ottimizzazione configurabili● Possibilità di convertire le immagini in webP

Ottima soluzione per ottimizzarevelocemente e senza agire sul codice

siti già realizzati osu cui è difficile applicare soluzioni custom







www.andrea-cardinale.it

[email protected]

@CardinaleAndrea

www.webandtech.it

Andrea CardinaleWeb Developer & Web Marketing SpecialistWeb Performance Specialist

+ Andrea Cardinale











Web Marketing Now - WPO

Documents

Transcript of Web Marketing Now - WPO