{"id":11384,"date":"2016-09-26T15:24:54","date_gmt":"2016-09-26T13:24:54","guid":{"rendered":"https:\/\/xlogic.org\/blog\/?p=11384"},"modified":"2018-02-09T16:57:21","modified_gmt":"2018-02-09T15:57:21","slug":"velocizza-il-tuo-sito-wordpress-con-amp","status":"publish","type":"post","link":"https:\/\/xlogic.org\/blog\/velocizza-il-tuo-sito-wordpress-con-amp.html\/","title":{"rendered":"Velocizza il tuo sito WordPress con AMP"},"content":{"rendered":"<p><img decoding=\"async\" class=\"wp-image-11388 aligncenter\" src=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-speed-rocket-launch-ss-1920.jpg\" alt=\"google-amp-speed-rocket-launch-ss-1920\" width=\"450\" height=\"253\" srcset=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-speed-rocket-launch-ss-1920.jpg 1920w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-speed-rocket-launch-ss-1920-300x169.jpg 300w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-speed-rocket-launch-ss-1920-768x432.jpg 768w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-speed-rocket-launch-ss-1920-1024x576.jpg 1024w\" sizes=\"(max-width: 450px) 100vw, 450px\" \/><\/p>\n<p><strong>Velocizza il tuo sito WordPress con AMP.<\/strong>\u00a0Quando un visitatore tenta di accedere in\u00a0un sito web dal proprio Smartphone deve attendere un tempo notevole e questo il pi\u00f9 delle volte implica l&#8217;abbandono dal sito e di conseguenza la perdita dell&#8217;utente.<\/p>\n<p>AMP \u00e8 un progetto di Google e significa Accelerated Mobile Pages ed \u00e8 stato realizzato in collaborazione con gli editori proprio per risolvere questo problema, infatti il suo principale scopo \u00e8 quello di velocizzare il caricamento dei contenuti dei siti web da Mobile.<\/p>\n<p>Come obiettivo ha non solo il caricamento istantaneo dei contenuti &#8220;pesanti&#8221; ma anche un linguaggio di codice pi\u00f9 funzionale su pi\u00f9 piattaforme e dispositivi con la\u00a0caratteristica fondamentale di rimanere sempre uguale nonostante il dispositivo che viene utilizzato, in breve con AMP il codice del sito web sar\u00e0 sempre lo stesso ma funzioner\u00e0 perfettamente da qualsiasi dispositivo, quindi da Smartphone, Tablet, PC, etc&#8230;<\/p>\n<p>Il modello si basa su AMP HTML, un framework costruito interamente sulla base di tecnologie web esistenti e permette di costruire pagine web pi\u00f9 leggere.<\/p>\n<p>Questo progetto Open Source vede coinvolte moltissimi Colossi del Web, come ovviamente Google, Twitter, Pinterest, Linkedin, WordPress e molti altri.<\/p>\n<p>Per raggiungere questo scopo e rendere il sito web performante anche da Mobile \u00e8 necessario lavorare su tre fronti:<\/p>\n<ul>\n<li><strong>HTML AMP<\/strong>, \u00e8 un estensione del linguaggio HTML con delle propriet\u00e0 dedicate AMP; \u00e8 necessario in una pagina AMP sostituire alcuni TAG HTML con i TAG AMP HTML, impara ad utilizzare i TAG AMP seguendo questa <a href=\"https:\/\/github.com\/ampproject\/amphtml\/blob\/master\/spec\/amp-html-format.md\" target=\"_blank\" rel=\"nofollow noopener\">guida<\/a>.<\/li>\n<li><strong>AMP JS<\/strong>, Le librerie AMP JS offrono la possibilit\u00e0 di utilizzare il codice Javascript per migliorare le prestazioni, gestire correttamente il carico di Download degli Script ed il supporto per i TAG AMP HTML, visualizzare il codice <a href=\"https:\/\/github.com\/ampproject\/amphtml\/tree\/master\/src\" target=\"_blank\" rel=\"nofollow noopener\">Java Script<\/a>. Ricordiamo inoltre che \u00e8 vietato l&#8217;utilizzo di Tag Script, Form ed Iframe tanto per citarne alcuni.<\/li>\n<li><strong>AMP CDN<\/strong>, verr\u00e0 utilizzato un CDN per il tuo sito web, questo significa che acquisirai ulteriore velocit\u00e0 e performance.<\/li>\n<\/ul>\n<p>Tutte le risorse vengono caricate esternamente ed in modo asincrono in maniera tale da non bloccare la visualizzazione dei contenuti nel processo di Rendering della pagina.<\/p>\n<p>Vengono caricate solamente le risorse necessarie per permettere di acquisire ulteriore velocit\u00e0, quindi da Mobile le immagini pesanti ed i video non verranno caricati, ma il visitatore visualizzer\u00e0 solo il contenuto.<\/p>\n<p>Il progetto AMP non \u00e8 altro che un Framework HTML in grado di generare pagine dalle funzionalit\u00e0 ridotte al minimo, al fine di aumentare la velocit\u00e0 di visualizzazione.<\/p>\n<p>Ma chi potrebbe davvero beneficiare di tutto questo? Secondo noi, gli utenti pi\u00f9 propensi all&#8217;utilizzo di AMP sono i proprietari di Blog, testate giornalistiche, insomma di siti web che producono molto traffico grazie alle notizie sempre aggiornate.<\/p>\n<p>Per conoscere meglio il progetto AMP puoi leggere questa <strong><a href=\"https:\/\/www.ampproject.org\/docs\/get_started\/about-amp.html#google-amp-cache\" target=\"_blank\" rel=\"nofollow noopener\">guida<\/a><\/strong>!<\/p>\n<p>Su WordPress \u00e8 possibile attivare AMP senza mettere mano al codice, incredibile non trovi?<\/p>\n<p>Quindi se hai un sito WordPress puoi tranquillamente abilitare AMP Google, come?<\/p>\n<h2>Installa il Plugin<\/h2>\n<p>Installa ed attiva il seguente Plugin: <a href=\"https:\/\/wordpress.org\/plugins\/amp\/\" target=\"_blank\" rel=\"nofollow noopener\"><strong>Amp WordPress<\/strong><\/a><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-11389\" title=\"Velocizza il tuo sito WordPress con AMP\" src=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-wordpress.png\" alt=\"Velocizza il tuo sito WordPress con AMP\" width=\"400\" height=\"130\" srcset=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-wordpress.png 772w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-wordpress-300x97.png 300w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/google-amp-wordpress-768x249.png 768w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<h2>Salva nuovamente i Permalink<\/h2>\n<p>Dopo aver attivato il plugin, accedi nelle impostazioni di WordPress &gt; Impostazioni &gt; Permalink e salva nuovamente i Permalink.<\/p>\n<h2>Svuota la Cache di WordPress<\/h2>\n<p>Dopo aver salvato i Permalink, svuota la cache di WordPress; se non hai ancora attivato la Cache in WordPress leggi questo articolo:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/xlogic.org\/blog\/guida-wp-super-cache-wordpress.html\/\" target=\"_blank\" rel=\"noopener\">WP Supercache<\/a><\/strong><\/li>\n<\/ul>\n<h2>Attiva Pagefrog<\/h2>\n<p>Installa ed attiva il Plugin <strong><a href=\"https:\/\/wordpress.org\/plugins\/pagefrog\/\" target=\"_blank\" rel=\"nofollow noopener\">PageFrog<\/a><\/strong>\u00a0che ti permetter\u00e0 di dare un minimo di stilizzazione alle tue notizie e di inserire i codici di Google Analytics e di Google Adsense, sfruttando l&#8217;autenticazione con Google.<\/p>\n<p>Una volta attivato il Plugin dovrai specificare su quali tipologie di Post vorrai attivare queste funzionalit\u00e0, per far questo dovrai accedere nel menu del Plugin &gt; Mobile Formats &gt; Settings.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-11390\" src=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/pagefrog-amp.jpg\" alt=\"pagefrog-amp\" width=\"400\" height=\"130\" srcset=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/pagefrog-amp.jpg 772w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/pagefrog-amp-300x97.jpg 300w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/pagefrog-amp-768x249.jpg 768w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<h2>Glue for Yoast SEO<\/h2>\n<p>Se hai installato il Plugin WordPress SEO By Yoast (leggi la <strong><a href=\"https:\/\/xlogic.org\/blog\/installazione-e-configurazione-del-plugin-yoast-wordpress-seo.html\/\" target=\"_blank\" rel=\"noopener\">guida<\/a><\/strong> su come installarlo e configurarlo) per fare SEO nel tuo sito web devi semplicemente installare anche il plugin <a href=\"https:\/\/it.wordpress.org\/plugins\/glue-for-yoast-seo-amp\/\" target=\"_blank\" rel=\"noopener\">Glue for Yoast SEO<\/a> per servire correttamente i metadati sulle pagine AMP<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-11391\" src=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/yoast-amp.png\" alt=\"yoast-amp\" width=\"400\" height=\"130\" srcset=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/yoast-amp.png 772w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/yoast-amp-300x97.png 300w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/yoast-amp-768x249.png 768w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<h2>Attendi che Google si accorga dei cambiamenti<\/h2>\n<p>Ora non ti rimane che attendere che Google si accorga dei cambiamenti ed aggiorni il tutto, per tenere sotto controllo l&#8217;indicizzazione delle pagine loggati negli strumenti per Webmaster di Google e verifica lo stato d&#8217;indicizzazione su Aspetto nella ricerca &gt; Accelerated Mobile Pages.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-11392 alignnone\" src=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/gwt-amp.png\" alt=\"gwt-amp\" width=\"400\" height=\"130\" srcset=\"https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/gwt-amp.png 772w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/gwt-amp-300x97.png 300w, https:\/\/xlogic.org\/blog\/wp-content\/uploads\/2016\/09\/gwt-amp-768x249.png 768w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Alla prossima!<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Velocizza il tuo sito WordPress con AMP.\u00a0Quando un visitatore tenta di accedere in\u00a0un sito web dal proprio Smartphone deve attendere un tempo notevole e questo il pi\u00f9 delle volte implica l&#8217;abbandono dal sito e di conseguenza la perdita dell&#8217;utente. AMP \u00e8 un progetto di Google e significa Accelerated Mobile Pages ed \u00e8 stato realizzato in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[5,1401],"tags":[1252,1254,1255,1256,1253],"class_list":["post-11384","post","type-post","status-publish","format-standard","hentry","category-news","category-wordpress","tag-amp","tag-mobile-performance","tag-speed-mobile","tag-speed-website","tag-velocizzare-sito-web"],"modified_by":"Andrea (Xlogic.org)","_links":{"self":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/posts\/11384","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/comments?post=11384"}],"version-history":[{"count":0,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/posts\/11384\/revisions"}],"wp:attachment":[{"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/media?parent=11384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/categories?post=11384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlogic.org\/blog\/wp-json\/wp\/v2\/tags?post=11384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}