Come velocizzare il caricamento delle pagine web

Il tempo che i browser impiegano a raggiungere delle risorse su un server è una caratteristica fondamentale di un sito web.

Le statistiche infatti dimostrano che dopo il terzo secondo di caricamento il 40% delle persone abbandonano il sito.

Da qualche anno a questa parte i siti web sono sempre più ricchi di immagini e funzionalità che vanno a rallentare inesorabilmente il caricamento delle pagine. Nonostante questo, anche se il peso, o la dimensione del byte, dei nostri siti è in aumento questi non necessariamente aumentano il tempo che un utente deve aspettare prima di visualizzare il contenuto cui si sta cercando di accedere. E’ possibile infatti visualizzare una pagina molto prima che termini il caricamento. Tutte le volte che ci si trova ad utilizzare vari software per il Crawling dei siti web come Seo Tester online o Seo Site Chekup e via dicendo, nei risultati che ci indicano lo “stato di salute SEO” del sito c’è tutta una parte che fa riferimento a:

  • Inline CSS Test
  • Site Loading Speed Test-Page Cache Test (Server Side Caching)
  • JS Minification Test
  • CSS Minification Test

Velocizzare il caricamento delle pagine web. Il Percorso di rendering

Tutti questi punti fanno riferimento a quello che accade quando scriviamo su un motori di ricerca una Parola Chiave e ci viene restituita una lista di siti web , ovvero una serie di risorse caricate su server. Questo processo è definito percorso di Rendering e ha inizio con ilParsing ( conversione ) del codice html del sito e poi alla creazione del DOM ( Document Object Model), una sorta di mappa dove i tag HTML vengono relazionati in una struttura ad albero. Questo stesso processo viene seguito con i fogli di stile che il browser trova nei tag link nell’head della pagina e sulla base di questi costruisce il CSSOM

Piu le risorse html e css sono ordinate e pulite e meno tempo ci vorrà per costruire il DOM e il CSSOM. L’unione di queste due risorse consentire al browser di eseguire il rendering dei pixel sullo schermo in una fase definita Costruzione del Render Tree. Il browser scansiona i nodi del DOM elaborando per primi quelli visibili ( escludendo quindi script, meta ) e applicando le regole che trova nel CSSOM ( anch’èsse visibili quindi escludiamo none, hidden ecc.). Una volta collegati i Tag con le rispettive regole CSS il browser può costruire il Layout della pagina in base alla Viwport ovvero la dimensione dello schermo. Per rendere il Caricamento della pagine più veloce quello che dobbiamo fare è abbreviare il percorso di rendering in modo che possa essere completato nel minor numero possibile di passaggi. Una delle cose che possiamo fare è indicare al browser di procedere con il caricamento della pagina in uno dei due modi seguenti:

1)Richiedere i file in modo asincrono in modo che possano essere caricati ed eseguiti durante il rendering della pagina

2) Includere il codice in linea direttamente nella nostra pagina HTML.

Velocizzare il caricamento delle pagine web – RENDERING ASINCRONO

Per il rendering asincrono, possiamo farlo per i file JavaScript, facilmente nei moderni browser aggiungendo un Attributo Asincrono ad un elemento script.

<head>
...
<script src="/path/to/script.js" async></script>
...
</head>

però async è supportato solo dai browser più recenti. E’ possibile anche aggiungere del codice JavaScript ( load.js scaricabile al https://github.com/filamentgroup/loadJS/blob/master/loadJS.js) per far si che i file vengano caricati in modo asincrono: Ecco come integrare loadJS nella pagina

 
 <head> ... <script> // include loadJS here... function loadJS( src ){ ... } // load a file with loadJS loadJS( "path/to/script.js" ); </script> ... </head> 

Inoltre c’ è una specifica progettata appositamente per caricare risorse come CSS in modo asincrono: rel=”preload”. Ecco un esempio di come possiamo usare rel=”preload” per caricare e applicare un file CSS in modo asincrono (in un browser che lo supporta):


<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

alcuni browser non supportano il tag preload , a tale proposito la FilamenGroup ha progettato un loadCSS scaricabile al link (https://github.com/filamentgroup/loadCSS/), ovvero uno script chiamato cssrelpreload. js, che fa funzionare rel=”preload” per i file CSS in browser che non lo supportano nativamente Ecco come usarlo:

webpagetest. org è uno strumento che ci aiuta a capire i tempi di caricamento di ogni risorsa.


Fonti: https://www.filamentgroup.com/lab/async-css.html
https://www.filamentgroup.com/lab/performance-rwd.html

https://www.speedywordpress.it/percorso-di-rendering-critico-cose-e-come-
funziona/#Il_percorso_di_rendering


Come creare Cinemagraphs

Come creare Cinemagraphs con Blender

Una Cinemagrafia è una fotografia digitale in cui è presente un piccolo movimento. Si tratta di una foto che contiene uno o più elementi che prendono vita e si muovono. Una via di mezzo tra una foto e un video.

Tra i programmi per creare Cinemagraph troviamo Flixel, Gif me , Lumia e Blender. Blender è uno dei principali software per la modellazione e l’elaborazione grafica 3D, open source, e con molte funzionalità interessanti.

Cominciamo impostando il programma su video editing cliccare su questa icona e scegliere video editing(1)

andare su add, movie,(3) scegliere il video da caricare dal pc e cliccare su add movie strip.

la striscia blu che vedremo in basso sarà il nostro video,nel mio caso ce ne sono due una blu che rappresenta il video e una azzurra che sarebbe la traccia audio. Sulla destra ci sono le specifiche del video in particolare la lunghezza che dovremo assicurarci essere la stessa nella parte bassa della finestra di blender. Per cui se sono diverse copiamo e incolliamo il valore da destra nella parte bassa dove vediamo scritto “end”(4)

cliccare sulla finestra sinistra e scegliere UV image editor(5)

andare su view e scegliere mask(6),

cliccare su new e scegliere un nome per la maschera,(7)

cliccare su open (sempre sulla stessa barra )e scegliere lo stesso video scelto in precedenza.

Andare poi su view properties (8)

scrollare giu sulla destra e scegliere match movie and check auto refresh (always refresh image on frame changes)(9), questo assicurerà che entrambi i video saranno riprodotti insieme.

Levare la finestra delle proprietà cliccando di nuovo su view e poi su properties.

andare sul video di sinistra e selezionare con ctrl click l’aria che si vuole far muovere(10)

andare su add menu e aggiugere affect strip e selezionare adjustment layer,(11)

questo livello di aggiustamento sarà di colore verde (12) selezionarlo e impostare la stessa lunghezza del video sulla destra

dopo che avremo fatto questo la barra verde si sarà allungata

sempre qui cliccare su modifiers e scegliere add strip modifier(13) e scegliere mask, cliccare su mask e scegliere la maschera che abbiamo creato (15)

tornare su add, movie (3), scegliere sempre lo stesso video

Ora cliccare la freccia destra della tastiera per muoverci avanti di un frame.(15.2)

Vedremo la striscia verde verticale muoversi di un unico frame, poi assicuriamoci che l’ultimo video che abbiamo aggiunto sia selezionato (dovrebbe essere la prima barra blu in alto) andare su strip menu e cliccare su cut hard at frame (16)

cliccare sulla striscia blu con il tasto destro del mouse(16.2) premere canc sulla tastiera del pc e cliccare si erase strips

a questo punto cambiare la lunghezza con quella del video e impostare blend a alfa under(17).

Per salvare cliccare su animation (18)

cliccare su animation (19)

scegliere il percorso, il nome del file e il formato (20)

Analisi visiva ed usabilità dei siti web

In questo articolo ho voluto elencare alcuni Tool di Web Analytics che presentano delle funzionalità interessanti utili da affiancare ai dati di Google Analytics.

Screen Lab e Yandex Metrica

Screen lab

E’ un’ applicazione web sia gratuita che a pagamento che ci consente di vedere le zone maggiormente cliccate del sito web. L’analisi che esegue questa App è molto utile perché ci permette di posizionare gli elementi che ci interessano di più , nelle zone maggiormente cliccate/visualizzate.

Dopo aver fatto la registrazione e inserito la URL da analizzare, sulla destra troveremo dei parametri, ogni parametro ha due termini:

  • Flusso grafico : Ovvero gli elementi grafici presenti nella pagina
  • Bilanciamento : Rapporto tra grafica e testo

L’impatto e quanto un visitatore rimane impressionato dalla pagina, mentre la semplicità è quanto è facile per l’utente accedere alle informazioni.

L’applicazione nella parte bassa della pagina fornisce anche una comparazione tra il sito che abbiamo analizzato e alcuni dei suoi competitor.

Le funzionalità elencate sono disponibili nella versione FREE mentre con un account a pagamento possiamo avere risorse aggiuntive come Test illimitati, tutta la Storeografia delle scansioni, utile per avere un’idea del risultato dei cambiamenti apportati nel tempo, sarà possibile avere Report in pdf, un supporto personalizzato o la possibilità di avere anche piu utenti per lo stesso account.

Yandex Metrica

Yandex Metrica è un’applicazione web gratuita che ci permette di monitorare click e altre azioni che gli utenti compiono sul sito. Come Screen lab anche Yandex lavora mostrandoci le zone maggiormente cliccate e i link piu rilevanti.

Per poterla utilizzare dobbiamo o eseguire l’accesso tramite account Social oppure registrarci con email e password.

La prima cosa da fare dopo la registrazione è creare un contatore per monitorare le visite.

Clicchiamo su Counter, Add new , e scegliamo un nome, aggiungiamo il dominio da monitorare, ed eventuali sottodomini, impostiamo il fuso orario del nostro paese e l’intervallo di tempo con cui vogliamo che siano monitorate le visite e le azioni degli utenti.

Una volta creato il contatore nella sezione Counter code abbiamo la possibilità di personalizzare tutta una serie di impostazioni che man mano andranno a modificare il codice del contatore che caricheremo successivamente sul sito. Come prima cosa possiamo scegliere di utilizzare un codice asincrono cliccando su Asyncronous che non penalizza le performance del sito, riducendo il tempo di caricamento dello script. Inoltre possiamo selezionare “Webvisor scroll map from analysis” che permetterà al contatore di registrare i moduli e lo scroll che eseguono gli utenti sul sito. Una volta personalizzato il counter se abbiamo wordpress, copiamo il codice e lo mettiamo alla fine del file header.php .

Dopo aver caricato il counter i risultati non tarderanno ad arrivare. Qualche giorno dopo l’applicazione ci mostrerà il pannello con una dashboard con gli utenti e i nuovi visitatori , la loro età, provenienza, il dispositivo tramite il quale hanno visualizzato il sito e il tempo di permanenza.

Nel report avremo anche la possibilità di avere informazioni sulle conversioni e sul traffico social.

Fin qui tutte funzionalità che troviamo anche in Google analytics (eccetto le mappe di calore). C’è un tipo di analisi però che Yandex metrica fa e Google analytis no e cioè l’analisi comportamentale.

Infatti nell’app è presente una sezione “Session Replay“, che ci permette di visualizzare in modalità FILMATO VIDEO illustrandoci tutte le azioni che gli utenti compiono sulla pagina, permettendoci di comprendere al meglio come questo si comporta durante la navigazione

Analisi SEO su android – Sinium Seo

Facendo una breve ricerca sulle SEO app nel web e testandone alcune ne ho trovata una che offre numerosi strumenti di analisi.

Sinium SEO Tools

racchiude 54 strumenti di analisi utili per il SEO. Tramite quest’app è possibile conoscere il SEO on-page, analizzando i metadati , gli header http e la densità delle keyword e un’analisi off page valutando i backlinks e le performances di un sito.

Con Sinium SEO possiamo fare l’analisi di un dominio e verificarne l’indirizzo IP o scoprire a chi appartiene tramite la funzione WHOIS , l’età e l’autorità . Inoltre tramite la funzione Security Toom è possibile capire se un dominio presenta problemi di sicurezza o meno.
L’app offre una serie di strumenti per analizzare il ranking come Alexa Rank Page authority. Strumenti di analisi che ci permettono di vedere la cache di google di verificare il posizionamento nella SERP per alcune parole chiave, analizzare i link di una pagina del sito oppure di avere un conteggio dei link tramite la simulazione di uno spider .

Nella sezione performance tool troviamo il Gzip , un test importante x verificare la velocità di caricamento delle pagina.

Nella sezione blog vengono analizzate la struttura degli articoli, le parole chiave e la struttura grammaticale.

Nella sezione “Other” troviamo l’estrattore di email , ovvero un tool che ci fornisce una lista di e-mail presenti su un sito, ovviamente solo quelle visibili.

Altre app che ho testato sono : Seo Scorecard e Seo Backlink Tool ma questa descritta mi sembrava la più completa!!

Migliorare la velocità del sito con la compressione gzip

Perché utilizzare la compressione gzip

Se il costante sviluppo degli algoritmi di Google e rende ad oggi la Search Engine Optimization un processo sempre più articolato e ricco di sfumature e variabili, l’ottimizzazione della velocità di un sito web rappresenta sempre più una delle strategie on-site più efficaci e immediate per migliorarne la visibilità (oltre che ad un ottimo punto di partenza per ulteriori strategie SEO). In questo senso la compressione gzip può essere uno strumento rapido ed efficace per ridurre drasticamente i tempi di caricamento del vostro sito ed ottenere un risultato rapido in termini di usabilità e posizionamento.

Cos’è la compressione gzip

Si tratta di un metodo di compressione estremamente efficace, oltre che tra i più diffusi. A un livello più basico può essere descritto come uno strumento che accorpa stringhe di testo simili o identiche all’interno dei file richiesti al server, riducendone notevolmente le dimensioni (fino al 70%).

Come controllare se sul mio sito la compressione è abilitata

Sebbene la sua diffusione ne determini l’attivazione automatica da parte di molti server, sono altrettanti i casi in cui è necessario per il gestore di un sito attivare la compressione gzip manualmente. Si deve quindi prima di tutto controllare se è già stata attivata. Ci sono diverse soluzioni possibili:

  • Chiedere direttamente al proprio servizio di hosting aprendo un ticket dell’assistenza.
  • Più semplicemente analizzare il sito con degli strumenti di audit dedicati alla velocità e quindi necessariamente attenti a controllare la presenza della di questo metodo di compressione. Sia Google PageSpeed Insights che GTmetrix hanno un controllo dedicato.

Per quanti hanno più familiarità con gli strumenti di sviluppo dei browser più utilizzati, è possibile controllare la presenza della compressione gzip negli header di risposta del sito (visualizzabili alla voce networks), verificando se includono la voce:

 Content-encoding : gzip 

Come abilitare la compressione gzip

Ancora una volta è possibile richiedere direttamente al proprio servizio di hosting l’attivazione del servizio se prevista dalla sua offerta. Ma ci sono anche delle alternative più immediate.

Siti in WordPress

Per i siti in Worpdress la compressione gzip può essere abilitata tramite strumenti dedicati specificamente al miglioramento della velocità del sito, tra cui il popolare W3 Total Cache. L’impostazione si trova alla voce Browser Cache Settings:

Tra gli altri plugin che ne permettono l’attivazione ci sono Wp Rocket (premium) e Wp Super cache Wp Super cache. L’utilizzo di questi plugin richiede permessi di scrittura per determinati file del server. Questo ci porta al secondo metodo per abilitare la compressione gzip, utile per chi non volesse ricorrere a plugin o in generale per siti internet non realizzati in WordPress, ovvero la modifica diretta dei file del server.

Server Apache

Sarà sufficiente aggiungere questo codice in fondo al file .htaccess del vostro sito (Per le modifiche del file .htaccess valgono le solite precauzioni: si tratta di un file cruciale – modificatelo prima su una copia di sviluppo del sito e mantenete sempre una copia dell’originale antecedente alle modifiche. Testate il funzionamento del sito una volta caricato il nuovo file e in generale evitate di modificarlo se avete dubbi su quanto state facendo).

<IfModule mod_deflate.c>    
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Didascalia: Il modulo deflate è specificamente dedicato alla compressione – Si tratta dell’equivalente per le versioni da Apache 2.x del modulo mod_gzip.

Server IIS

Per server IIS le istruzioni sono fornite dalla documentazione Microsoft TechNet disponibile qui.

Una volta attivata la compressione potrete fare dei test con gli strumenti elencati sopra per verificare l’attivazione del compressione gzip.

Come sfruttare al meglio la compressione gzip con CSS e HTML

Se si capisce il meccanismo fondamentale di questo metodo di compressione ci sono dei piccoli accorgimenti che permettono di sfruttarne a pieno i vantaggi. Anche se si tratta spesso di miglioramenti marginali e non di grande impatto, non c’è motivo per rinunciarvi: nell’ottimizzazione di un sito tanti piccoli dettagli possono determinare un impatto misurabile e in generale seguire buone pratiche è un fattore che fa la differenza a lungo termine, soprattutto per progetti complessi o di grandi dimensioni.

Di base la compressione gzip è efficace nel ridurre stringhe di testo ripetute nel codice delle vostre pagine o dei file utilizzati dal vostro sito. Di conseguenza, per trarne il massimo beneficio, è opportuno utilizzare quante più ripetizioni possibili nel codice.

Ad esempio, immaginiamo di dover aggiungere dei <div> nidificati all’interno di una pagina, ciascuno con la sua classe per aggiungere le istruzioni di stile. In apparenza una scrittura come la seguente è valida come qualsiasi altra:

<div class= “main-container”>
<div class= “portfolio-object”>
    <div class=“single-picture”>
       <div>
</div>
</div>

Tuttavia volendo ottimizzare per la compressione gzip, possiamo osservare come nel testo ci sia una diversificazione delle stringhe non necessaria. Una scrittura più adeguata sarebbe a seguente:

<div class= “portfolio-container”>
<div class= “portfolio-object”>
    <div class=”portfolio-picture”>
      <div>
</div>
</div>

Nonostante il maggior numero di caratteri impiegati la seconda scrittura sarebbe più economica e corretta, considerando il vantaggio che la compressione gzip trae dalla ripetizione di stringhe identiche (in questo caso la stringa “portfolio”).

Più semplicemente spiegato, il meccanismo è il seguente:

Tutto ciò viene ripetuto può essere facilmente compresso. Quindi non è c’è motivo di inserire nel codice distinzioni non necessarie, per una questione sia di chiarezza che di economicità nella compressione. In definitiva la compressione gzip premia un codice che sia ben scritto e ben strutturato e orientato su criteri di ottimizzazione e logica. Per chi è abituato ad ragionare in questi termini e a seguire buone pratiche questo non sarà certamente una sorpresa. Per chi invece approccia questo genere di problemi per le prime volte, lo sfruttamento della compressione gzip può essere un buon criterio per porsi problemi nuovi sulla scrittura corretta di codice in generale.