Esistono diversi modi per aumentare la velocità di caricamento della pagina:
- memorizzazione nella cache
- compressione di file css e js
- ottimizzazione delle immagini
In questo articolo analizzeremo in dettaglio l'ultimo punto e mostreremo quali risultati si possono ottenere.
Quando si utilizza il caricamento lento (caricamento lento) per le immagini, il peso della pagina diminuisce, quindi la pagina inizia a caricarsi più velocemente.
Il principio di funzionamento è semplice: le immagini vengono caricate dinamicamente non appena entrano nell'area di visibilità dell'utente. Ad esempio, il browser non ha bisogno di scaricare immediatamente tutte le foto dei prodotti di una categoria, è sufficiente scaricare e visualizzare le immagini di più prodotti che cadono nella prima schermata. Se la pagina mostra molti prodotti, questo accelererà notevolmente il download.
Ci sono 2 modi per integrare il carico pigro in virtùmart:
- manualmente apportando alcune modifiche al modello
- utilizzando un plug-in che ti consentirà di terminare il lazy load per tutte le immagini sul sito
Aggiunta manuale del carico pigro
Esistono molti script che possono essere utilizzati per integrare il carico pigro in un sito Web. Sto usando echo.js . La versione compressa dello script pesa solo 2 KB. Un esempio di lavoro può essere visto in questa pagina.
Collega lo script nella pagina della categoria. In altre pagine, non credo che abbia molto senso usare il caricamento lento. Se è necessario aggiungere un carico pigro per tutte le immagini del sito, è meglio utilizzare un plug-in LLFJ - Carico pigro per Joomla!, di cui si parlerà nella prossima sezione.
Quindi, copia i file di script nella cartella del modello /modelli/nome_modello/eco/ .
Sostituiamo il codice di output dell'immagine nella categoria.
Per virtù 3
In archivio /components/com_siteblayouts/products.php sostituire
< a title = "(!LANG: nome_prodotto ?>" !} href=" collegamento. $Str.Oggetto ; ?>"> echo $prodotto -> immagini[ 0] -> < / a > |
Per virtù 2
Nel file, sostituisci
< a title = "(!LANG: nome_prodotto ?>" !} href=" collegamento ; ?>"> echo $ prodotto -> immagini [ 0 ] -> displayMediaThumb ("class="browseProductImage"" , false ); < / a > |
Aggiungi una chiamata allo script alla fine del file /components/com_virtuemart/views/category/tmpl/default.php(per tutte le versioni di vm).
$documento = JFactory::getDocument(); $documento -> aggiungiScript( "/templates/nome_modello/echo/echo.min.js") ;
Leggi anche |
