{"id":604,"date":"2016-03-29T21:32:40","date_gmt":"2016-03-29T19:32:40","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/performance-mostrare-vs-raccontare\/"},"modified":"2016-03-29T21:32:40","modified_gmt":"2016-03-29T19:32:40","slug":"performance-mostrare-vs-raccontare","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/performance-mostrare-vs-raccontare\/","title":{"rendered":"Performance: mostrare vs. raccontare"},"content":{"rendered":"<div class=\"paragrafo\">\n<p>Quando si discute di performance, tendiamo a focalizzarci sulle sfide tecniche, ma la parte sociale di questo lavoro, ossia far s\u00ec che i nostri colleghi curino la performance, \u00e8 in realt\u00e0 la componente pi\u00f9 difficile e pi\u00f9 cruciale dell&#8217;ottimizzazione nell&#8217;ottica della performance. Semplicemente, non \u00e8 possibile mantenere la velocit\u00e0 dell&#8217;esperienza utente dei nostri siti nel tempo senza dei leader nell&#8217;organizzazione, senza che i nostri colleghi designer e developer e i clienti riconoscano l&#8217;importanza del lavoro della performance.<\/p>\n<p>Dobbiamo mostrare a due gruppi di persone perch\u00e9 dovrebbero prestare attenzione alla performance.<\/p>\n<ul>\n<li><strong>Very Important People<\/strong> &#8211; come i manager, gli executive e i clienti &#8211; che hanno a cuore le metriche di engagement. Sono anche molto orgogliosi del proprio business e della sua performance rispetto ai competitor.<\/li>\n<li><strong>Colleghi sviluppatori e designer<\/strong> &#8211; i vostri colleghi &#8211; che hanno a cuore il proprio workflow e l&#8217;esecuzione di un buon lavoro. Vogliono creare una user experience di cui andare fieri quando la si mostra.<\/li>\n<\/ul>\n<p>Sicuramente, i due gruppi si sovrappongono: per esempio, agli sviluppatori e ai designer interessano molto le metriche di engagement. C&#8217;\u00e8 un certo numero di ottimi modi per mostrare i numeri della performance, come <a href=\"http:\/\/rizzo.lonelyplanet.com\/performance\/css-analysis\">le dashboard pubbliche di Lonely Planet<\/a>. In Etsy, noi pubblichiamo addirittura un <a href=\"https:\/\/codeascraft.com\/category\/performance\/\">report trimestrale<\/a> che mostra i cambiamenti della performance nel tempo e cosa ha causato quei cambiamenti. Tuttavia, quando cerchiamo di convincere gli altri a fare attenzione alla performance, \u00e8 semplice trovarsi impantanati tra numeri e grafici. Effettuare un autentico cambiamento culturale \u00e8 molto pi\u00f9 difficile.<\/p>\n<p>Inoltre, la performance \u00e8 sfortunatamente una parte piuttosto invisibile della user experience. Quando si \u00e8 fatto un buon lavoro, gli utenti non lo notano nemmeno! Ma la lentezza crea un&#8217;esperienza veramente spiacevole. Nel suo libro <cite><a href=\"http:\/\/chimera.labs.oreilly.com\/books\/1230000000545\/ch10.html#SPEED_PERFORMANCE_HUMAN_PERCEPTION\">High Performance Browser Networking<\/a><\/cite>, Ilya Grigorik definisce le metriche per la percezione umana della velocit\u00e0:<\/p>\n<ul>\n<li><strong>100 millisecondi<\/strong> di tempo di risposta sembrano istantanei all&#8217;utente.<\/li>\n<li><strong>100\u2013300 millisecondi<\/strong> creano un piccolo, ma percepibile, ritardo.<\/li>\n<li><strong>300 millisecondi\u20131 secondo<\/strong> sembrano come \u201cla macchina sta lavorando\u201d.<\/li>\n<li><strong>1 secondo<\/strong> costituisce un ritardo evidente per l&#8217;utente. Solo un singolo secondo di attesa interrompe il flusso dei pensieri e l&#8217;utente probabilmente comincer\u00e0 a cambiare contesto mentalmente.<\/li>\n<\/ul>\n<p>Mettetevi nei panni dei vostri colleghi designer e developer: quanto sarebbe noioso per loro far passare tutto l&#8217;elenco dei numeri? Se a una Very Important Person gi\u00e0 non interessa molto il discorso della performance come parte di un&#8217;esperienza utente generale, come possono i numeri (o i grafici che rappresentano tali numeri) far s\u00ec che comincino ad interessarsene?<\/p>\n<p>Portate il vostro messaggio a un livello pi\u00f9 alto: aiutate chi vi sta intorno a <em>sentire<\/em> l&#8217;impatto che ha la performance sulla user experience complessiva. Mostrare \u00e8 di gran lunga pi\u00f9 efficace che raccontare: presentare la user experience reale \u00e8 molto pi\u00f9 efficace che fissare dei numeri o un grafico a barre. Ma come si fa a mostrare la performance?<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Il potere di visualizzare la performance<\/h2>\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/03\/lara-mobiledash-wallmonitor.gif\" border=\"0\" width=\"100%\" \/><\/p>\n<div class=\"illustration full\"><\/div>\n<p>Il team Performance di Etsy ha sequestrato un monitor a muro nell&#8217;ufficio per raccontare la storia della nostra performance. La sua finestra a tutto schermo di Chrome storicamente ha mostrato a ciclo le tipiche informazioni correlate alla performance: metriche, grafici, alcune spiegazioni. Ma il superpotere pi\u00f9 nuovo di questa dashboard \u00e8 la capacit\u00e0 di mostrare video di come etsy.com si carica a differenti velocit\u00e0 di connessione e che esperienza fanno del nostro sito i nostri utenti nel mondo.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/03\/lara-globaldash-locations.gif\" border=\"0\" width=\"100%\" \/><\/p>\n<p><!-- fall back to a simple image --><\/p>\n<div class=\"illustration full\"><\/div>\n<p>Per creare questo tipo di dashboard, visitate <a href=\"http:\/\/www.webpagetest.org\/\">WebPageTest.org<\/a> e lanciate un test sul vostro sito.<\/p>\n<div class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/03\/webpagetest-screenshot.jpg\" border=\"0\" alt=\"Screenshot from WebPagetest.org with example settings selected for a performance test run.\" width=\"100%\" \/><\/p>\n<p>Screenshot da WebPagetest.org con setting di esempio selezionati per un test sulla performance.<\/p>\n<\/div>\n<p>Potete scegliere:<\/p>\n<ul>\n<li><strong>Test location.<\/strong> Confrontate i luoghi geografici in cui riesiedono i vostri files con un luogo a met\u00e0 strada nel mondo!<\/li>\n<li><strong>Velocit\u00e0 di connessione.<\/strong> Confrontate una connessione via cavo con una connessione 3G!<\/li>\n<li><strong>Cattura video.<\/strong> Questo \u00e8 quello che scaricher\u00f2 dopo!<\/li>\n<\/ul>\n<p>Quando vedete i risultati del test, inclusi i grafici a cascata e le metriche che spiegano quanto tempo ci ha impiegato la vostra pagina a rendere, potete scegliere di guardare un video del test o di esaminare i risultati del test in Filmstrip View.<\/p>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Come condividere via email<\/h2>\n<p>La Filmstrip View vi permette di vedere un PNG del modo in cui il vostro sito si carica nel tempo, con delle thumbnails per ciascun intervallo di tempo. Ci sono delle opzioni aggiuntive di personalizzazione per il vostro Filmstrip cos\u00ec che possiate mostrare meglio la storia del modo in cui il vostro sito si carica nel tempo. I Filmstrip sono grandiosi per mostrare la performance del vostro sito in un medium statico come l&#8217;email.<\/p>\n<div class=\"illustration full\"><img decoding=\"async\" src=\"http:\/\/alistapart.com\/it\/wp-content\/uploads\/sites\/2\/2016\/03\/webpagetest-filmstrip.jpg\" border=\"0\" alt=\"Screenshot da WebPagetest.org in Filmstrip View che mostra il modo in cui il sito s carica a intervalli di mezzo secondo.\" width=\"100%\" \/><\/p>\n<p>Screenshot da WebPagetest.org in Filmstrip View che mostra il modo in cui il sito s carica a intervalli di mezzo secondo.<\/p>\n<\/div>\n<\/div>\n<div class=\"paragrafo\">\n<h2>Come creare una video dashboard<\/h2>\n<p>Nel frattempo, sulla pagina Watch Video, avete le opzioni per scaricare e fare l&#8217;embed del vostro video. Procedete e scaricatelo, poi fate gli ulteriori test con altre opzioni di luogo e connessione e scaricate anche quei video.<\/p>\n<p>In Etsy, abbiamo salvato i video in una location centrale e creato una semplice pagina HTML che si ricarica ogni pochi secondi per mostrare i video in ripetizione. Ogni volta che la homepage di Etsy subisce un grande cambiamento, aggiorniamo i video manualmente.<\/p>\n<p>Quindi, come possiamo mirare ai nostri due audience principali per convincerli che il lavoro sulla performance \u00e8 importante? Create insiemi diversi di video che trovino il loro favore.<\/p>\n<ul>\n<li><strong>Confrontate il vostro sito con il sito dei vostri competitor.<\/strong> Poche emozioni sono pi\u00f9 potenti dell&#8217;orgoglio. Come si sentiranno la Very Important People se il sito di un competitor \u00e8 pi\u00f9 veloce?<\/li>\n<li><strong>Confrontate il prima e il dopo del lavoro di performance.<\/strong> Volete dimostrare il risultato del lavoro di performance alle Very Important People? Dovete convincere i vostri pari che vale la pena celebrare il lavoro di performance? Mostrate una pagina prima che ne venisse migliorata la performance e caricatela proprio di fianco al video post-miglioramento.<\/li>\n<li><strong>Confrontate le esperienze mobile e desktop e l&#8217;esperienza globale.<\/strong> Aiutate quelli che vi stanno intorno a provare quale sia l&#8217;esperienza dei vostri utenti su varie piattaforme, in tutto il mondo. Scegliete pagine su cui stanno lavorando dei designer e sviluppatori particolari con cui parlate, toccando di nuovo i nervi scoperti dell&#8217;orgoglio.<\/li>\n<\/ul>\n<p>Allontanatevi dai grafici e dai numeri secchi e mostrate dei video che vi possano aiutare nella vostra ricerca per la creazione di una cultura della performance. Aiutare quelli attorno a voi a <em>sentire<\/em> gli effetti della performance sulla user experience generale rende molto pi\u00f9 semplice ottenere il via libera di cui avete bisogno per rendere veloce il vostro sito e continuare a mantenerlo veloce. Molte persone hanno avuto <a href=\"https:\/\/twitter.com\/patmeenan\/status\/606901648556998657\">successo<\/a> <a href=\"https:\/\/twitter.com\/kskoeld\/status\/607255499931820032\">convincendo<\/a> <a href=\"https:\/\/twitter.com\/louisbennett\/status\/606881317435744257\">i propri<\/a> <a href=\"https:\/\/twitter.com\/AndyDavies\/status\/606920954170769408\">pari<\/a> <a href=\"https:\/\/twitter.com\/TheMattShull\/status\/607200762880352256\">e<\/a> i <a href=\"https:\/\/twitter.com\/danielsleeth\/status\/606884233672589314\">VIP<\/a> a interessarsi della performance utilizzando i video comparativi: non vedo l&#8217;ora di sentire anche la vostra storia di successo.<\/p>\n<p>Illustrazioni: {carlok}<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Gli aspetti tecnici dell&#8217;ottimizzazione della performance sono indiscutibilmente importanti, ma il lavoro sociale (ossia convincere colleghi, manager e clienti, che l&#8217;ottimizzazione della performance meriti la loro attenzione) spesso viene sottovalutato. Lara Hogan ci mostra come possiamo andare oltre i grafici e i numeri per mostrare la performance piuttosto che semplicemente parlarne e come attuare un vero cambiamento culturale nel processo.<\/p>\n","protected":false},"author":818,"featured_media":7000789,"comment_status":"open","ping_status":"open","template":"","categories":[242,142,278],"tags":[],"coauthors":[469],"class_list":["post-604","article","type-article","status-publish","has-post-thumbnail","hentry","category-browser","category-numero-124-29-marzo-2016","category-workflow-tools"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article\/604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/users\/818"}],"replies":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/comments?post=604"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media\/7000789"}],"wp:attachment":[{"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/media?parent=604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/categories?post=604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/tags?post=604"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/alistapart.com\/it\/wp-json\/wp\/v2\/coauthors?post=604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}