Una creatività HTML5 fa riferimento solitamente ad annunci creati con HTML, CSS e JavaScript. Le creatività HTML5 offrono numerose opportunità per comprimere i file. Quasi tutti i suggerimenti riportati di seguito possono essere attuati in meno di 15 minuti.
Argomenti trattati nell'articolo:
Utilizzare Google Web Designer
Google Web Designer è un'applicazione web per lo sviluppo in HTML5 che si integra perfettamente con Studio e Raccolta di asset. Google Web Designer è dotato anche di una funzionalità integrata per la compressione di immagini e codice, oltre a supportare caratteri web di Google, file SVG, animazione CSS e molto altro ancora.
Guida introduttiva di Google Web Designer
Controllare le dimensioni del file
Prima di ridurre le dimensioni del file, controlla le dimensioni correnti e consulta le seguenti linee guida e termini.
Dimensioni del file non elaborato e dimensioni del file compresso a confronto
Per controllare la dimensione del file non elaborato:
- In Studio, verifica le Dimensioni totali file nel passaggio Gestione file del flusso di lavoro delle creatività in Studio.
- In Google Web Designer, fai clic su Pubblica > Pubblica a livello locale per vedere le dimensioni totali (non elaborate) nella finestra di dialogo. Puoi vedere le dimensioni attuali del file nel riquadro Strumento di convalida degli annunci.
Google Web Designer comprime le creatività avvalendosi del software senza costi aggiuntivi gzip. Se non utilizzi Google Web Designer, puoi scaricare una copia senza costi di gZip, per comprimere le creatività nel tuo spazio di lavoro locale e controllare il file.
Dimensioni file di base
Prima di sviluppare la creatività, è essenziale comprendere le specifiche di pubblicazione degli annunci del publisher. Molti publisher, comunque, si attengono alla raccomandazione dello IAB in merito a creatività con un caricamento iniziale di 200 kB (compresso) e 300 kB o 500 kB di dimensioni totali (a seconda del formato). Il caricamento iniziale si riferisce alle dimensioni totali del file compresso che contiene tutti gli asset della creatività inviati al browser per la pubblicazione iniziale dell'annuncio. Sono inclusi tutti i tipi di file: immagini, HTML, CSS e JavaScript.
Dimensioni del file Enabler
Lo script Enabler deve essere incluso nelle creatività Studio. Tuttavia, poiché lo stesso script viene caricato per ogni creatività Studio, i browser web ne memorizzano una copia nella cache. La dimensione dello script Enabler è 25 kB (compresso) e 75 kB (non elaborato).
Per maggiori dettagli, consulta le linee guida dello IAB e di Studio:
- Linee guida dello IAB per HTML5 (in formato .PDF, consulta le pagine 4 e 6)
- Linee guida per le creatività di Studio
Informazioni sugli interventi di Chrome per annunci eccessivi
- Se la creatività contiene molte immagini, video, animazioni oppure oggetti 3D, segui le linee guida di Chrome per testarla e assicurarti che non venga eseguito l'unload.
- Utilizza la demo degli interventi di Chrome per annunci eccessivi in modo da scoprire se la creatività verrà bloccata.
Caricamento "polite" e specifiche del publisher
Il caricamento "polite" ritarda il caricamento degli altri asset della creatività (ad esempio, immagini e video) fino al momento in cui viene caricata la pagina del publisher. Ciò differisce dal caricamento iniziale, che fa riferimento alle dimensioni totali del file compresso che contiene tutti gli asset della creatività inviati al browser per la pubblicazione iniziale dell'annuncio. Alcuni publisher richiedono il caricamento "polite", tuttavia è buona norma includerlo anche quando non se ne fa richiesta. Scopri come impostare il caricamento "polite"
Esamina le specifiche HTML5 per Rich Media. I publisher potrebbero infatti calcolare le dimensioni del file in base al formato gzip compresso oppure prediligere quelle del file non elaborato. Le specifiche del singolo publisher possono essere diverse dalle specifiche dello IAB in funzione di posizionamento, tipo di annuncio e così via. Alcuni publisher possono essere più propensi a venire a compromessi in termini di specifiche della build. Inoltre, tieni presente eventuali limiti specificati per la riproduzione di animazioni o video.
Ridurre le dimensioni delle immagini
Prima di tentare di ridurre le dimensioni di un'immagine, valuta se l'immagine sia davvero necessaria. Alcuni elementi figurativi possono essere sostituiti con gli stili CSS. Di seguito sono riportati alcuni suggerimenti e risorse per ridurre il numero di immagini nella creatività e ottimizzare le immagini considerate irrinunciabili.
Utilizzare CSS per creare colori a tinta unita o sfumatureLe immagini GIF, JPG e PNG sono basate su pixel ("raster") e hanno dimensioni maggiori. Le immagini SVG sono elementi grafici basati sul collegamento di punti ("vettori") e possono ridurre di molto le dimensioni del file.
Scopri di più su SVG
Tutorial su SVG di W3School
Come utilizzare le immagini SVG
Comprimere le immagini SVG
I caratteri "icona" sono caratteri normali che hanno le stesse modalità d'impiego dei caratteri standard. Sono spesso basati su vettori che riducono le dimensioni del file. Se utilizzi le stesse icone più volte, crea un tuo carattere "icona".
Risorse sui caratteri "icona"
Programma di creazione caratteri "icona" Icomoon
Icone CSS NounProject
Icone CSS FontAwesome
Uno sprite sheet è un'unica immagine affiancata che viene caricata una sola volta. Con CSS, vengono mostrati i singoli riquadri dell'immagine complessiva. L'utilizzo di uno sprite sheet riduce il numero di richieste HTTP. Quanto più basso è il numero di richieste HTTP, tanto più velocemente viene caricata la creatività. È comunque importante identificare la compressione appropriata per lo sprite sheet.
Risorse sugli sprite sheet
Panoramica sugli sprite di immagini CSS di W3School
Generatore di sprite sheet online Stitches
Se vengono richieste immagini basate su pixel, devi comprimerle il più possibile senza, tuttavia, comprometterne la qualità. Forse conosci Salva Per Web di Photoshop, ma sono disponibili molti altri strumenti online che offrono funzionalità di compressione avanzata.
Compressori di immagini senza costi aggiuntivi
TinyPNG
TinyJPG
Creare animazioni con CSS
Prendi in considerazione l'utilizzo di animazioni CSS3 per le transizioni e le trasformazioni invece di JavaScript. Le trasformazioni CSS utilizzano la GPU (unità di elaborazione grafica) invece della CPU (unità di elaborazione centrale) per visualizzare le animazioni, migliorando le prestazioni e riducendo la dimensione del file JavaScript.
Per animazioni più complesse (incluse le animazioni particellari), prendi in considerazione l'utilizzo delle raccolte di animazioni JavaScript di GreenSock (GSAP). GreenSock semplifica gli aspetti più onerosi dell'animazione CSS, come la regolazione della tempistica di più animazioni e l'animazione indipendente delle proprietà delle trasformazioni.
Non utilizzare le raccolte o i framework JavaScript che ricorrono al metodo di animazione setInterval di JavaScript e non utilizzare il metodo setInterval nel tagging manuale. setInterval sfrutta infatti in modo eccessivo le risorse del browser, influisce sulle prestazioni e richiede molto codice. Se le animazioni JavaScript sono obbligatorie, allora prendi in considerazione l'utilizzo del metodo requestAnimationFrame, ideato in modo specifico per le animazioni.
Scopri come ottimizzare le prestazioni delle animazioni
Utilizzare requestAnimationFrame
Animazioni CSS e JavaScript a confronto
Prima di caricare i file CSS in Studio, minimizza i CSS con CSS Minifier.
Ridurre le dimensioni del file JavaScript
Ecco alcuni suggerimenti per ridurre le dimensioni del file JavaScript:
Non utilizzare jQueryInvece di caricare le librerie JavaScript insieme alla creatività, sostituisci i riferimenti alle librerie JavaScript comuni con URL ospitati da Studio. Queste librerie sono ospitate sullo stesso dominio in cui si troverà il tuo annuncio pubblicato.
Studio collabora con lo IAB in modo che queste risorse vengano condivise e memorizzate nella cache da molte creatività, per poterle escludere dal caricamento iniziale dell'annuncio.
Risparmia tempo e codice decidendo a priori i browser e i dispositivi target della tua campagna. Non aggiungere codice per browser o dispositivi non supportati. Questo espediente ridurrà anche i tempi dei test.
Risorse di supporto per i browserSupporto di browser e dispositivi per Studio
Can I Use: supporto aggiornato dei browser per le proprietà JavaScript e CSS
Combinare e comprimere il codice JavaScript
Se hai più file JavaScript, uniscili in uno solo. Serviti di strumenti che rimuovono commenti e spazi in più da JavaScript.
- Tieni una copia non compressa a portata di mano per aggiornamenti futuri.
- Studio richiede file JavaScript con estensione
.jse non.min.js. - Se minimizzi i file JavaScript, puoi facilmente aggiungere la funzione di monitoraggio. Aggiungi il monitoraggio prima di minimizzare il file JavaScript.
Ottimizzare i caratteri
Se utilizzi un carattere diverso da quelli web standard, valuta l'utilizzo di Google Fonts, un'ampia raccolta di caratteri senza costi aggiuntivi. Per ridurre le dimensioni del file, assicurati di richiedere solo il numero di caratteri strettamente necessari invece dell'intero carattere tipografico.
Tuttavia, è anche importante tenere presente che solo gli URL assoluti vengono memorizzati nella cache dal browser. Anche se l'URL http://fonts.googleapis.com/css?family=Philosopher&text=Hello corrisponde alla dimensione più piccola per una specifica creatività, verrà comunque considerato come una richiesta a parte rispetto all'URL http://fonts.googleapis.com/css?family=Philosopher&subset=latin, che potrebbe essere già stato memorizzato nella cache della cronologia del browser. Cogli qualsiasi opportunità di memorizzazione nella cache in modo da velocizzare il caricamento delle creatività.
Scopri di più sui caratteri web
Ottimizzare le richieste di caratteri con i caratteri web di Google
Creare sottoinsiemi di caratteri per Typekit e caratteri web in self-hosting