Risolvere problemi di prestazioni su siti lenti

Se il tuo sito si muove come uno di quei bradipi del DMV in Zootopia, ci sono modi in cui puoi risolvere qualsiasi cosa lo rallenti. Calcolare la causa del problema è metà della battaglia, quindi una volta isolate le cause, avrai almeno le risposte per risolvere il problema.

L'hosting di bassa qualità è il colpevole più probabile

Quando si parla di web hosting, il concetto di bassa qualità non sempre significa la stessa cosa che fa in altri contesti. Ad esempio, il prezzo che si paga per l'hosting non è sempre un riflesso accurato della qualità che ci si può aspettare. Né è la popolarità del servizio o quanto è noto il nome del marchio.

In effetti, alcuni dei marchi di hosting più popolari sono le peggiori scelte, semplicemente perché troppe persone le stanno utilizzando. Dipende un po 'dalla qualità della loro infrastruttura. Se stanno investendo correttamente nella loro tecnologia, potrebbero non verificarsi problemi di prestazioni significativi. D'altra parte, potresti condividere un singolo server con centinaia di altri siti e tale problema aumenterà con la continua crescita della capacità di archiviazione su disco.

Pertanto, in tale situazione, è possibile che passare a un servizio di hosting web più piccolo e meno noto con una buona tecnologia possa essere una scelta migliore. Fare questo potrebbe anche significare ottenere un servizio clienti più personale, ad un livello di qualità più alto di quello che otterresti da un colosso. Vale la pena pensarci, ed è facile da testare semplicemente comprando un abbonamento di un mese sul nuovo host e confrontando le prestazioni con il tuo sito esistente.

Usa la tua chiave F12

La maggior parte dei browser Web è sintonizzata per consentire l'accesso alla console di debug tramite la chiave F12 e probabilmente la tua non è un'eccezione. E a proposito di eccezioni, è più o meno quello che stai cercando, o per essere precisi, errori nel tuo codice JavaScript che generano eccezioni e influiscono sulle prestazioni.

Troverai questi errori sia nel tuo codice che nelle librerie di codici importate come jQuery. Solo perché jQuery è grande e popolare non significa che sia impeccabile. Ecco un esempio del tipo di cosa che stai cercando:

Gli errori contrassegnati in blu sono solo errori CSS e generalmente ci si può aspettare di vedere quelli dovuti alla quantità di sviluppatori di spessori da fare quando si costruiscono fogli di stile, semplicemente perché non esiste ancora un singolo standard che sia stato adottato su tutti i browser. Normalmente non dovrebbero influenzare le prestazioni a meno che non si stiano utilizzando molte animazioni o effetti a transistione.

Ma questo errore contrassegnato in arancione è un errore JavaScript, e non solo, in questo caso è il jackpot perché ci dice in modo specifico che questo particolare errore farà sì che il codice funzioni molto lentamente.

Ricevi alcuni consigli gratuiti da Google

Sapevi che Google può analizzare la tua pagina web gratuitamente e darti consigli su come risolvere eventuali problemi? Tutto ciò che devi fare è visitare la pagina di Google Page Speed ​​Insights e inserire l'URL della pagina che desideri analizzare.

Non potrebbe davvero essere più semplice, anche se potresti non voler seguire religiosamente tutti i loro consigli. Il sistema di Google è in grado di capire cosa potrebbe rallentare la pagina, ma alcune correzioni potrebbero non risolvere tutti i problemi che creano.

Idealmente, vuoi vedere i punteggi sopra 85. Mentre nessuno lo sa per certo, i tempi di caricamento delle pagine sono ampiamente pensati per avere un'influenza significativa sul tuo page rank in Google. Non disperare se il tuo sito non è proprio lì in cima alla zona verde, perché molti siti Web importanti non ottengono punteggi fantastici.

Alcuni esempi degni di nota includono:

  • http://bbc.com (70m/77d)
  • http://cnn.com (47m/65d)
  • http://whitehouse.gov (58m/56d)
  • http://microsoft.com (49m/71d)
  • http://apple.com (61m/72d)
  • http://linux.com (33m/44d)
  • http://ubuntu.com (69m/81d)
  • http://linuxmint.com (59m/67d)
  • http://youtube.com (53m/69d)
  • http://facebook.com (49m/81d)

Nessuno di questi esempi è davvero una scusa per lasciare che il proprio sito funzioni male, ma dimostra che un sito lento non è necessariamente sinonimo di fallimento.

Usa le immagini correttamente

Se qualcuno sapesse i formati immagine corretti da usare e quando, dovrebbero essere i designer, giusto? Ma incredibilmente sembra che molti di voi non lo sappiano, o quando lo fate, pensate che non importi. Bene, ecco la notizia: importa, sempre.

Questo problema sta prendendo slancio poiché un determinato modello di modello è stato adottato come standard de facto per i siti aziendali, ed è una tendenza che non mostra segni di rallentamento. Come designer professionista, devi a te stesso e ai tuoi clienti non cadere nella trappola delle scorciatoie del design.

Una di queste sfortunate scorciatoie ha utilizzato immagini PNG di grandi dimensioni per le unità di eroi nella parte superiore di una pagina (o in qualsiasi altro luogo, ma è lì che normalmente le troverai). Ora, è ovvio che non dovresti mai farlo, mai, anche se hai bisogno di sezioni trasparenti nell'immagine.

Ecco i fondamenti che dovresti tenere a mente quando crei quel capolavoro:

  • Usa le immagini grandi con parsimonia se non del tutto

Le immagini grandi sono un'idea terribile perché più l'immagine è grande, più tempo ci vuole per caricare. Ora ci sono alcune tecniche diverse che puoi usare per far funzionare le immagini di grandi dimensioni in modo molto più efficiente, ma prima di iniziare, diciamo che dovresti usare le immagini più piccole il più delle volte, e salvare quelle grandi per quando sono davvero necessario.

  • Impostare il valore PPI / DPI in modo appropriato

A seconda di quale editor di grafica si utilizza, potrebbe mostrare valori per DPI o PPI. Quest'ultimo è migliore, perché indica che il tuo editor di grafica è progettato per l'uso sul Web anziché per la stampa. Il problema con la modifica del DPI in alcune versioni di PhotoShop è che regoleranno non solo il DPI, ma anche le dimensioni fisiche dell'immagine. Questo non è un problema nell'ultima versione di PhotoShop (che usa PPI), quindi se stai usando una versione precedente, è tempo di aggiornare. Oppure usa GIMP.

  • Taglia le immagini di grandi dimensioni

È qui che inizia la magia. Troverai molte persone che ti dicono che tagliare le tue immagini non migliora i tempi di caricamento perché stai ancora scaricando lo stesso numero di byte e qualsiasi miglioramento percepito è puramente psicologico. Queste persone usano la versione più pigra del taglio delle immagini, quindi non conoscono le reali possibilità.

Dopo aver affettato la tua immagine, hai la possibilità di ottimizzarla. Supponendo che l'immagine originale fosse in formato PNG, ora puoi convertire qualsiasi porzione non trasparente in formato JPG e salvare molti byte, lasciando le porzioni che richiedono trasparenza come immagini PNG.

Successivamente puoi giocare con il livello di compressione di ogni singola fetta fino a quando quella fetta è perfettamente ottimizzata. L'effetto complessivo di questa ottimizzazione può comportare risparmi superiori a 50% rispetto all'immagine originale non ottimizzata.

Anche il video può essere ottimizzato

L'arte della compressione video si basa su due cose: il formato di destinazione e il codec che usi per la codifica. Il formato che selezioni dipende interamente dalle tue esigenze. In generale, se hai bisogno di alta qualità, MP4 con codifica H.264 offre la migliore qualità ad alta compressione, ma quando non hai bisogno di quella alta qualità, WebM e FLV forniscono file di dimensioni più ridotte. Il tuo software di editing video può comunque offrire FLV come opzione, ma non è consigliabile utilizzare questo formato.

Se hai bisogno della qualità del DVD, MP4 con la codifica H.264 sta per dare risultati eccellenti, ma ha il costo di essere un download pesante. Per lo streaming di video, WebM offre una compressione molto migliore. Il problema è che non tutti i sistemi operativi mobili supportano ancora WebM (dovrebbero, ma sembrano avere una pazza ragione per non farlo, possibilmente seguendo la regola d'oro dello sviluppatore mobile: tu avrai disagi e confonderesti il ​​tuo cliente quanto più puoi).

Dovresti usare il codec MPEG-4 invece di H.264 con i video MP4? Generalmente no, perché si traduce in file di dimensioni maggiori allo stesso livello di qualità. Ma se il tuo video avrà dimensioni fisiche ridotte e desideri una perfetta trasmissione del video per lo streaming, MPEG-4 è un buon codec perché ha una correzione degli errori integrata per garantire l'integrità dei dati.

Che mi dici di WMV? Bene, questo è un caso speciale. Offre praticamente la stessa qualità video di MP4, ma con una compressione ancora migliore. Il lato negativo è che gli utenti Mac e iOS possono visualizzare il tuo video solo se utilizzano un convertitore di video payware, che introduce un ritardo nella riproduzione, che è esattamente ciò che stavamo cercando di evitare per ottimizzare la nostra pagina.

I file WMV non hanno alcun problema per gli utenti di Android, Windows o Linux. Ma con 12.5% della comunità Internet che utilizza dispositivi Apple, dovrai decidere se valga la pena di scomodarli. Personalmente non ti consiglierei di farlo solo per ottenere un tempo di caricamento più veloce.

E infine, perché è un video su Internet, se non stai permettendo la riproduzione a schermo intero o in modalità teatro, riduci le dimensioni fisiche del video alle dimensioni che mostrerai sulla tua pagina e guarda quanti byte puoi salvare .

Bogdan Rancea

Bogdan è membro fondatore di Inspired Mag, avendo accumulato quasi 6 anni di esperienza in questo periodo. Nel tempo libero ama studiare musica classica ed esplorare le arti visive. È piuttosto ossessionato dai fissaggi. Possiede già 5.