HAI BISOGNO DI INFORMAZIONI?
+39 06452216038
LIVE SUPPORT
Parla con un operatore

Hosting Per Te - HelpDesk

LIVE SUPPORT
Parla con un operatore
 
 Categorie Notizie
(14)Domini (3)dominio (36)Blog (67)Sicurezza (47)Wordpress (1)Cross-Site (1)vulnerabilità (8)wordpress (1)zero day (8)sicurezza (1)sitelock (19)News (1)google (1)indicizzazione (1)mobilegeddon (9)seo (21)Hosting (4)hosting (1)multi (1)reseller (1)rivenditore (1)provider (19)Email (32)Server (3)email (2)imap (1)imapsync (2)migrazione (1)posta (1)affiliazione (2)guadagnare (79)Ecommerce (3)e-commerce (2)ecommerce (4)VPN (1)wi-fi (1)backup (2)server (33)marketing (1)ppc (1)search-engine-optimization (1)seo pay-per-click (1)domini (2)gTLD (1)IP (1)IP-condiviso (1)IP-dedicato (2)cloud (1)virtuale (3)vps (21)Blogging (4)blog (2)blogging (46)CMS (3)cms (1)sito di successo (1)campagne e-mail (1)criptare dati (2)ssl (1)plugin e-commerce (1)newsletter (1)rivenditori (1)server vps smtp (1)SMTP (1)design responsivo (1)responsive design (1)responsive web design (2)hacking (4)malware (1)phishing (1)server upgrade (2)prestashop (2)campagna e-mail (3)e-mail marketing (1)contenuti sito (1)struttura pagina web (1)call-to-action (1)promozione sito (1)ottimizzare sito (1)cookie law (1)psicologia web design (1)vendita siti (1)website flipping (1)titolo (1)alternativa google analytics (2)monitoraggio (1)keyword (1)programmazione (1)facebook marketing (1)colori (2)clienti (1)privacy whois (1)crimini informatici (1)Cyber crime (1)search console di google (1)supporto managed (1)hacker (1)copyright (1)referrer spam (1)Split testing A/B (1)freelance (4)magento (1)Linux (2)Windows (1)upgrade piani hosting (1)Google SpeedTest (1)landing page (1)seo friendly (1)struttura link (1)errori wordpress (2)psicologia dei prezzi (1)metodi di pagamento (1)effetti sonori (2)APP (1)webmaster (1)fatturazione elettronica (1)sito web (1)backup wordpress (1)fan facebook (1)Exchange ActiveSync (1)POP3 (1)firma e-mail (1)web agency (1)ergonomia (1)editor (3)adwords (1)quality score (1)errori ecommerce (20)startup e business (1)errori azienda (1)sql injection (1)monetizzare (1)regole successo (1)nameserver (2)mailing list (1)responsive email (2)pec (2)bootstrap (1)Bing (1)Bing Ads (1)Foundation (3)framework (1)statistiche mobile (1)adwords per mobile (1)about page (1)chi siamo (1)seo vs ppc (1)errori webmaster principianti (22)SEO (1)PDF e SEO (1)ottimizzare pdf (53)strumenti (1)relazionarsi con i clienti (1)FAQ (1)tld srl (1)traffico (1)keywords (1)parole chiave (1)trend estero (3)statistiche (1)K.I.S.S. (1)plugin sicurezza wordpress (2)certificato ssl (1)template (1)black hat (1)Creative Common Zero (1)blog ecommerce (1)Google Smart Goals (1)web design (1)facebook ads (1)SFTP (1)FTP (2).htaccess (1)statistiche e-commerce (1)url brevi (2)cloud computing (1)HDD (1)grafici (1)librerie js (2)antivirus (1)framework css (1)Google Panda (2)Internet of Things (2)ransomware (1)TeslaCrypt (2)tecnologia (1)telelavoro (1)mobile friendly (1)proxy (2)cryptolocker (1)Processore AMD (1)rapporto clusit 2016 (2)truffe online (1)plugin monitoraggio (2)bug linux (1)ranking tools (1)social network (1)deep web (1)tor (1)plugin sottoscrizioni (1)link building (3)plugin wordpress (1)design (1)siti di successo (1)ottimizzare immagini (2)widget (1)sito monopagina (1)VPS Economici (1)trend del marketing (1)realtà aumentata (1)ip dinamico (1)progettazione sito (1)Redirect 301 e 302 (1)notifiche push (1)velocità sito (1)ottimizzazione contenuti (1)guadagnare con un blog (1)costi e-commerce (1)social media (1)frode amichevole (1)e-commerce wordpress (4)drupal (4)joomla (1)travel blog (2)php (1)chargeback (1)e-mail (1)plug-in video wordpress (1)sito sportivo (1)plug-in seo (1)drupal vs magento (1)portfolio (1)plug-in portfolio (1)sottodomini di terzo livello (1)sicurezza e-commerce (1)pubblicità su facebook (1)visualizza numero utenti (1)affiliate marketing (1)cartella nascosta android (1)creare app (2)Infiniband (1)Intel LGA 3647 (1)furto di dati sensibili (1)marketing diretto (1)record DNS (2)ddos (1)Mobile shopping (1)Malware su Skype (1)virus (1)youtube (1)seo immagini (1)web marketing (1)vendita online (1)food blogger (1)Plesk Onyx (1)Bug Fedora ed Ubuntu (1)Micro SSD (1)IoT (1)Chip Kaby Lake (1)primo e-commerce (1)blog di fitness (2)plug-in WordPress (1)SPF e DKIM (1)Cyber sicurezza (1)file robots.txt (1)AMD Naples (1)Vulnerabilità REST API WordPress (1)trasferimento da Blogger a WordPress (1)plug-in WordPress per musicisti (1)Crittazione (2)CPU (1)Legge antibufale (1)Strumenti di marketing (1)CPU AMD (1)nda (1)Let's Encrypt (1)Hosting Linux o Windows (1)progress bar (1)blog di cucina (1)PrestaShop oppure WooCommerce (1)carte di credito (1)librerie javascript (1)DDR5 (1)plugin monetizzazione (1)Wireless (2)drag and drop (1)web server (1)Curricula digitali (1)name server (2)Autenticazione a due fattori (1)Trend Tech (1)business online (1)Keylogger (1)infopreneur (1)E-book (1)WanaKiwi (1)file LNK (1)hub (1)router (1)switch (1)pdf (1)hosting provider gratuito (1)Shopify (1)Usabilità web (1)temi (1)confronto file (1)quiz (1)mockup (1)hosting provider (1)chat (1)ristoranti (1)database (1)spam (1)tool (1)Javascript (1)automazione (1)forum (1)compressione (1)webserver (1)Caching (1)video (1)Normative (1)Collaborazione (1)unicorn (1)robots.txt
Feed RSS
Notizie
giu
20

Le pagine web contengono risorse che non necessariamente devono essere visualizzate immediatamente. Immagini, video, i-frame, audio, ecc. possono tranquillamente essere scaricati solo quando l’utente li richiede o comunque in un secondo momento a tutto vantaggio dei tempi di caricamento della pagina.  In questo articolo mostreremo quali sono le specifiche CSS e HTML da utilizzare per implementare il cosiddetto Lazy Load.

 

 

 

 

Attributo Lazy Load

L’attributo Lazy Load HTML5 gestisce il load delle pagine web e le ottimizza per il network contention. Le risorse LazyLoad sono scaricate sempre in maniera asincrona. Facciamo un esempio:

 

<!doctype html>

<html>

    <head>

        <title>Attributo Lazy Load</title>

    </head>

    <body>

        <img src=”Im-1.png” lazyload />

        <img src=” Im -2.png” />

        <img src=” Im -3.png” lazyload />

        <img src=” Im -4.png” />

    </body>

</html>

 

Osservazioni:

  1. Le immagini sono sempre scaricate in maniera asincrona dal browser. Lo stesso accade per le risorse LazyLoad. In assenza di problemi di network contention le 4 immagini vengono scaricate così come sono ma l’evento onload si verifica appena le immagini Im -2.png e Im -4.png  vengono scaricate senza attendere anche il download delle immagini Im -1.png e Im -3.png.
  2. In caso di network Contention il download delle immagini Im -1.png e Im -3.png viene messo in pausa fino a quando il problema non viene risolto.

 

 

Elementi HTML che supportano l’attributo LazyLoad

Diversi elementi HTML supportano tale attributo:

  • Img
  • Audio
  • Video
  • Embed
  • Iframe
  • Object
  • svg feImage
  • svg image
  • svg use
  • svg script
  • svg tref tags

 

Script

Quattro I possibili scenari quando LazyLoad è applicato ai tag <script>

  • Attributi LazyLoad e async presenti. Il comportamento LazyLoad è quello previsto.
  • Attributi LazyLoad e defer presenti. L’attributo defer prevale su LazyLoad.
  • Presente solo l’attributo LazyLoad. Il comportamento è quello previsto.
  • Se l’attributo IDL dell’elemento è impostato su FALSO, l’attributo LazyLoad non ha nessun effetto.

 

Link

Se l’attributo LazyLoad è utilizzato su un elemento link, il foglio di stile ad esso collegato viene scaricato in maniera asincrona e LazyLoad agisce come previsto.

 

 

Attributo HTML PostPone

Quando l’attributo PostPone viene applicato il download dell’immagine avviene solo quando l’utente visualizza l’elemento.

La risorsa è scaricata in maniera asincrona.

L’evento onload non aspetta che l’elemento PostPone sia scaricato e si verifica appena tutte le altre risorse sono state scaricate.

 

Elementi che supportano l’attributo PostPone

  • Img
  • Audio
  • Video
  • Embed
  • Iframe
  • Object
  • svg feImage
  • svg image
  • svg use
  • svg script
  • svg tref

 

 

Come applicare LazyLoad e PostPone tramite CSS

È possibile applicare questi due attributi agli elementi HTML che li supportano utilizzando la proprietà resource-priorities CSS.

<!doctype html>

<html>

    <head>

        <title>Lazy Load Attribute</title>

        <style type=”text/css”>

            .class1

            {

                resource-priorities: lazyload;

            }

 

            .class2

            {

                resource-priorities: postpone;

            }

        </style>

    </head>

    <body>

        <img src=”1.png” class=”class1″ />

        <img src=”2.png” class=”class2″ />

        <img src=”3.png” class=”class1″ />

        <img src=”4.png” class=”class2″ />

    </body>

</html>

 

 

L'articolo Lazy Load. Un metodo efficace per abbassare i tempi di download di un sito sembra essere il primo su Blog Hosting Per Te.





Hosting Per Te
© 2015 - ARMADA
Partita IVA 00873530943
REA IS-38469
Tel +39 06452216038
Fax +39 0689280222
Il tuo IP: 54.174.43.27
Hosting Per Te Facebook   Hosting Per Te Twitter   Hosting Per Te Blog
ARMADA
Chiedi ad un nostro Operatore