Ho utilizzato le informazioni di Google Page Speed per cercare di migliorare le prestazioni del mio sito e finora si è dimostrato estremamente efficace. Cose come il differimento degli script hanno funzionato magnificamente, dato che avevo già una versione interna di jQuery.ready()
per differire gli script fino a quando la pagina non era stata caricata completamente, tutto quello che dovevo fare era incorporare quella particolare funzione e spostare gli script completi alla fine della pagina. Ha funzionato alla grande.
Ma ora mi ritrovo a fissare un punto giallo rimasto nell'elenco di controllo: "Elimina i CSS di blocco del rendering nei contenuti above the fold".
Il modo in cui il mio CSS è impostato è di avere un _.css
file globale contenente stili che si applicano alla struttura della pagina in generale o che sono utilizzati in più di una o due posizioni nel sito. La maggior parte delle pagine ha quindi un file CSS associato (ad esempio, party.php
ha party.css
) contenente stili specifici per quella particolare pagina. Tutti i file CSS vengono memorizzati nella cache a tempo indeterminato, come ho aggiunto /t=FILEMTIME
ai nomi dei file (e successivamente li rimuovo con .htaccess) al fine di garantire che i file vengano aggiornati quando vengono modificati.
Ad ogni modo, Google consiglia di includere gli stili critici necessari per i contenuti above the fold. Il problema è ... beh, dai un'occhiata a questo screenshot: http://prntscr.com/1qt49e
Come puoi vedere ... TUTTO il contenuto è above the fold! Le persone odiano lo scorrimento, specialmente in un gioco che prevede il caricamento di molte pagine. Quindi ho progettato il sito per adattarlo a uno schermo (presupponendo una risoluzione abbastanza buona). Ciò significa che ... TUTTI gli stili si applicano ai contenuti above the fold! Quindi ... c'è qualche soluzione? O sono bloccato con quel segno giallo su un punteggio altrimenti quasi perfetto?