Segreti dell'ottimizzazione dei motori di ricerca di progetti di notizie. Dove trovare URL statici per sostituire il codice PHP

Probabilmente lo sai già per promuovere un sito web in motori di ricerca, il sito deve essere ottimizzato. In questo articolo parlerò di come effettuare SEO di base ottimizzare il sito da solo. È importante capire che questo esempio di ottimizzazione è solo basilare. Molto spesso è necessario esaminare il sito in dettaglio ed eseguire l'ottimizzazione individuale del sito, poiché alcune cose dipendono da come è costruito il sito. Andiamo!

Ottimizzazione del modello WordPress

Effettueremo l'ottimizzazione SEO di base del modello per il tuo sito web.

Faremo tutto completamente da soli e in un solo giorno

Nozioni di base sulla SEO Ottimizzazione WordPress Il modello serve a garantire che non siano presenti testi non necessari e spazzatura nei tag di intestazione H1-h6. Questo di solito si verifica quando il modello viene acquistato in forma finita, ad esempio nel negozio Templateonster. Forse il fatto è che gli sviluppatori di modelli non hanno familiarità con la SEO: questo è abbastanza normale. Pertanto, la prima cosa che devi fare è ottimizzare i tag del titolo.

I siti WordPress sono basati su modelli, quindi la prima cosa che devi fare è ottimizzare il modello. Ogni pagina del sito deve contenere un tag, che solitamente è il titolo della pagina. Si consiglia inoltre di inserire il testo nella pagina nei tag , , , , . Pertanto è necessario utilizzare questi tag nei template WordPress e nei testi delle pagine.

Ottimizzazione del modello header.php

Il modello header.php solitamente contiene il nome del sito, che è il titolo della pagina principale. Titolo del sito attivo pagina iniziale dovrebbe essere racchiuso tra tag, come questo:

Pertanto, nella pagina principale il titolo del sito sarà incorniciato da tag e in tutte le altre pagine il titolo avrà la forma di un collegamento alla pagina principale.

Ottimizzazione del modello index.php

Se viene visualizzata la home page del tuo sito ultime voci, allora ti consigliamo di racchiudere i nomi delle voci nei tag.

Dovranno essere sostituiti, rispettivamente, con un titolo e una descrizione statici. Se all'improvviso, dopo aver salvato questo, invece delle lettere russe, escono caratteri scadenti (leggi le codifiche della lingua russa e i problemi che sorgono con esse), quindi apri di nuovo il file per modificarlo in Notepad++ (la sua descrizione sopravvive), seleziona "Codifica " dal menu in alto - " Converti in UTF-8 senza BOM" e quindi salva nuovamente il file.

Se hai anche una descrizione del menu principale in HEADER, puoi inserire manualmente lì un collegamento alla pagina principale, sostituendo il codice dinamico per generare questo collegamento. Nell'originale, questa riga di codice potrebbe assomigliare a questa:

query in pochi secondi.

Di conseguenza, dopo aver caricato la pagina, in fondo (nell'area del footer), vedrai quante chiamate sono state effettuate al database:

Nota: è attivata la versione adattiva del sito, che si adatta automaticamente alle dimensioni ridotte del browser e nasconde alcuni dettagli del sito per facilitare la lettura. Buona visione!

Ciao. Oggi continueremo l'argomento sull'ottimizzazione del layout del sito Web HTML, che abbiamo iniziato nell'articolo su.

Capiamo prima perché questo è importante e poi passiamo ai consigli pratici.

Un modello di sito web realizzato (progettato) correttamente:

• Può accelerare notevolmente il caricamento della pagina (soprattutto se prima tutto era in esecuzione);
• Rende più facile per le tue pagine arrivare in cima risultati della ricerca(non solo a causa del caricamento veloce);
• Aumenterà le tue possibilità di piena compatibilità tra browser, ovvero il sito verrà visualizzato ugualmente correttamente in tutti i browser;
• Darà una piccola garanzia che dopo molti anni non dovrai riprogettare i tuoi siti per nuovi browser (o per nuove versioni di vecchi browser).

Suggerisco di passare dalle cose semplici a quelle più interessanti.

Parte 1: seguire gli standard HTML e CSS

Per ogni evenienza, dirò che oltre a HTML e CSS, possiamo anche ottimizzare le parti JS e PHP dei nostri siti, che richiedono più risorse e rallentano notevolmente la velocità di caricamento della pagina. Tuttavia, a parte la velocità di caricamento delle pagine, i componenti JS e PHP non influiscono in alcun modo sulla promozione del sito (purché non lo interrompano), a differenza del markup HTML, ovvero del template del sito.

1.1 Chiudi sempre i tag.

Compresi quelli che non hanno bisogno di essere chiusi, anche se odi lo standard XHTML, è meglio attenersi a questa regola. Esempio:

• Voce dell'elenco
• Voce dell'elenco
• Voce dell'elenco

Ogni tag li è chiuso, sebbene ciò non sia richiesto.

1.2 Osservare il corretto annidamento dei tag.

Secondo il principio: primo ad aprire, ultimo a chiudere. Un esempio di come è sbagliato:

testo

Come farlo correttamente:

testo

1.3 Non scrivere mai CSS e JS all'interno del layout HTML e degli attributi dei tag.

Mai! In altre parole, dimentica l'esistenza dell'attributo style e del tag style:

testo

p( colore:rosso; dimensione carattere:20px; allineamento testo:centro)

Descrivi tutti gli stili in un file .css separato

Puoi utilizzare l'attributo style solo eseguendo il rendering dinamico utilizzando JavaScript per alcune azioni. Ad esempio, se facendo clic su un'immagine è necessario modificare il colore di tutto il testo della pagina, solo in questo caso è possibile creare dinamicamente un attributo di stile con i valori necessari per il tag desiderato (in questo esempio, per il corpo). Perché? Perché i robot di ricerca non lo vedranno comunque e nessuno (compresi gli utenti) scaricherà codice aggiuntivo, poiché l'azione avviene dopo che la pagina è stata completamente caricata.

Tuttavia, in questi casi, consiglierei comunque di aggiungere una classe CSS predefinita al tag desiderato anziché aggiungervi un attributo di stile. Questo è almeno più conveniente per le modifiche successive.

Lo stesso vale per JS; tutto il codice JS dovrebbe trovarsi in un file separato e non all'interno del layout o, peggio ancora, tra gli attributi dei tag.

1.4 Dimentica il Caps Lock e le lettere maiuscole.

Scrivi tutti i tag, gli attributi e i loro significati in lettere minuscole (minuscole), lo stesso vale per i fogli di stile CSS.

Quasi tutto quanto sopra descritto è contenuto nelle specifiche HTML e CSS ufficiali e si riferisce alla validità del documento.

Tengo quindi a precisare che aderendo agli standard W3C, cioè mantenendo la validità del documento, si ottengono i seguenti vantaggi SEO:

• Codice pulito e, di conseguenza, ulteriore fiducia dei motori di ricerca nel tuo sito;
• Caricamento della pagina più veloce, poiché il browser non deve perdere tempo nel debug di un documento non valido.

Tuttavia, non dovresti concentrarti sulla validità, dovresti cercare di rispettarla il più possibile, ma non a scapito di tutto il resto (tempo, funzionalità, ecc.).

Parte 2. Accelerare il caricamento della pagina - uno dei fattori di ranking 2.1 Indicare le dimensioni effettive dell'immagine.

Il punto qui è due cose:

• Assicurati di includere gli attributi larghezza e altezza per il tag img: Ciò accelererà il caricamento delle immagini, poiché il browser saprà in anticipo quale dimensione visualizzare.
• Assicurati di inserire un'immagine della stessa dimensione specificata negli attributi.

Se l'immagine è più grande del necessario, non è necessario risparmiare tempo riducendola utilizzando HTML o CSS. Prenditi il ​​tempo necessario per accedere a Photoshop o ai suoi equivalenti e ridurre l'immagine alla dimensione che desideri vedere sul sito, questo può accelerare notevolmente il caricamento della pagina.

2.2 Usa CSS3 invece di JS.

JS può rallentare in modo significativo il caricamento delle tue pagine e continuare a creare carico anche dopo che la pagina è stata caricata (vari effetti, come un ticker e altri elementi dinamici), che può rallentare il browser mentre la scheda con il sito è aperta .

Oggi, molti effetti belli e interessanti possono essere ottenuti solo attraverso l'uso delle proprietà CSS3 (ad esempio, transizione, box-shadow, border-radius, opacità, trasformazione, dimensione dello sfondo) e abili .

Tutto quanto sopra può essere riassunto in una frase: ovunque tu possa (sospettare come) sostituire JS con CSS3, usa CSS3 senza esitazione!

Per trovare tali frammenti, ti consiglio di esplorare le nuove funzionalità di CSS3.

2.3 Meno Photoshop - più CSS 3.

Questo motto è stato utilizzato da molti webmaster per molto tempo. Puoi creare bellissimi pulsanti ed elementi di design con sfumature uniformi, angoli morbidi, ombre (interne ed esterne) e un bellissimo testo in alto solo con CSS. Ovunque sia possibile sostituire gli elementi di progettazione grafica con codice CSS, fallo! Esempio:

O il mio pulsante "Iscriviti!" alla fine di ogni articolo. A proposito, non dimenticare di iscriverti alle notifiche su nuovi articoli utili, niente spam o pubblicità.

Oltre alle proprietà CSS3 elencate sopra, hai anche accesso al formato di descrizione del colore RGBA.

Per creare un gradiente cross-browser con CSS, puoi utilizzare servizi gratuiti come questo da colorzilla.com.

2.4 Combina immagini in sprite CSS.

Quelle immagini che non potremmo disegnare usando CSS 3 devono essere combinate in un'unica immagine (idealmente). Ciò è necessario per ridurre il numero di richieste al server durante il caricamento della pagina. Questo elemento può ridurre significativamente il carico sul tuo server web e allo stesso tempo accelerare il caricamento della pagina, due piccioni con una fava!

Per capire meglio di cosa sto parlando, basta dare un'occhiata al mio sprite CSS:

Non male, vero? C'è un'immagine di sfondo per tutti gli elementi, basta spostarla e sostituire la parte desiderata dell'immagine sullo sfondo di un determinato elemento grazie alla proprietà background-position, ad esempio, in questo modo:

Sarebbe meglio creare uno sprite manualmente utilizzando Photoshop, ma questo potrebbe sembrarti piuttosto complicato, quindi puoi utilizzare servizi gratuiti che faranno tutto per te, compreso anche scrivere il codice CSS per te. Il mio servizio preferito è SpriteMe. Ma non mi stancherò di ripeterlo: è sempre meglio fare tutto manualmente, soprattutto, così lo sprite potrà risultare molto più compatto (nelle dimensioni e, quindi, nel peso), e quindi più efficiente.

2.5 Posiziona correttamente i file JS.

Tutti i file JS inclusi nel tuo sito dovrebbero essere posizionati il ​​più in basso possibile nel codice; non è necessario includerli all'interno della "testa" del sito (tra i tag head): questo rallenta notevolmente il caricamento della pagina. Il massimo l'opzione migliore includerà i file JS prima del tag body di chiusura, ovvero nella parte inferiore della pagina, non c'è nessun posto più in basso.

E un altro consiglio molto utile: idealmente, tutti i tuoi file JS dovrebbero essere combinati in uno solo, cioè ritagliare (Ctrl + X) il codice da tutti i file e copiarlo in uno solo, in modo che alla fine avrai uno in basso, prima del tag body di chiusura del singolo file:

...

Ciò può accelerare notevolmente il caricamento delle tue pagine poiché ridurrà il numero di richieste al tuo server web. Posizionare il file JS in fondo alla pagina ne ritarderà il caricamento e l'elaborazione, accelerando l'output della parte principale della pagina. E non dimenticare di abbreviare (comprimere) il file JS finale.

2.6 Posiziona correttamente i file CSS.

Il file CSS, che, tra l'altro, dovrebbe essere anche l'unico e unico (per gli stessi motivi), deve essere posizionato nella direzione opposta nel codice, il più in alto possibile!

Ma non è necessario posizionarlo sopra il tag del titolo, è il più importante per la SEO ed è meglio lasciarlo in alto. Personalmente inserisco il file CSS immediatamente dopo il tag del titolo e tutti i meta tag, dopodiché puoi collegare, ad esempio, una favicon (l'icona del sito Web in una scheda del browser), ecc.

Parte 3. Layout corretto del layout SEO 3.1 Codice di navigazione del sito.

Tutta la navigazione del sito (menu, breadcrumb, elenchi di produttori nei negozi online, ecc.) dovrebbe essere implementata utilizzando elenchi non numerati (tag ul, li) e non utilizzando tag div e a.

In primo luogo, scrivere un menu in questo modo è considerato una buona forma e, in secondo luogo, sarà più facile per i motori di ricerca capire dove e come è organizzata la navigazione, poiché sono abituati a progetti con elenchi non numerati e non a blocchi con uno sconsiderato elenco dei link. Esempio come farlo correttamente:

• voce di menu 1
• voce di menu 2
• voce di menu 3

3.1.1 Sottigliezze del menu orizzontale.

Se hai bisogno di implementare un menù orizzontale, allora voglio darti 2 consigli gratuiti:

• Non utilizzare mai la proprietà CSS float per questo (floating, fa sì che altri elementi si avvolgano attorno ad essa), utilizzare invece il seguente codice: ul.menu li(display:inline-block;)
• Non è necessario che il codice inizi ogni nuova voce di menu su una nuova riga, come nell'esempio sopra. È meglio scrivere tutto su una riga e regolare la distanza tra gli elementi utilizzando il margine . Esempio:

ul.menu li( display:blocco in linea; margine:0 5px; )

• voce di menu 1
• voce di menu 2
• voce di menu 3

Un'interruzione di riga in HTML è uguale a uno spazio, ovvero se inserisci Invio nel codice tra le voci di menu, gli utenti sulla pagina del sito avranno degli spazi tra di loro. Cosa c'è di sbagliato in questo? Ogni browser può avere una larghezza dello spazio bianco diversa e alcuni potrebbero ignorarla del tutto. Di conseguenza, il tuo sito avrà un aspetto diverso ovunque e, a volte (per esperienza personale), ciò può persino distorcere seriamente il design.

Pertanto, ho la mia regola durante la progettazione: non dovrebbero esserci spazi o interruzioni di riga tra gli elementi del blocco in linea (non solo quelli del menu)! Allo stesso tempo, questo è insignificante, ma riduce il peso complessivo delle tue pagine, perché come ho già scritto: 1 carattere (inclusi spazi e interruzioni di riga) = +1 byte al peso delle tue pagine.

3.2 Attributo Alt per le immagini

Assicurati di includere l'attributo alt nel tag img:

In primo luogo, questo è necessario se vuoi superare un controllo di validità (esattamente in XHTML, non ricordo l'HTML, in un modo o nell'altro dovresti sempre rispettare i severi standard XHTML), in secondo luogo, se l'immagine non si carica, poi l'utente invece L'immagine mostrerà almeno il testo scritto in alt (di cosa si tratta). In terzo luogo, ciò aumenterà la possibilità che le tue immagini vengano incluse nelle ricerche di immagini di Google e Yandex, il che può attirare ulteriori visitatori sul tuo sito.

E l'ultima cosa: le parole specificate nell'attributo alt vengono prese in considerazione durante il posizionamento del tuo sito, il che significa che puoi inserire parole chiave lì, ma in nessun caso esagerare, è meglio creare un alt per le persone, inserendo solo occasionalmente parole chiave lì .

Se tutti i tuoi attributi alt sono riempiti con le stesse parole chiave, allora aspettati sicuramente delle penalità.

3.3 Utilizza al massimo le intestazioni HTML h1-h6.

h1 è l'intestazione più grande e importante e dovrebbe contenere il nome della pagina corrente. Mentre h6 è la voce più piccola e meno significativa. Molti esperti SEO consigliano vivamente di utilizzare l’intestazione h1 solo una volta su una pagina, e questo è logico. Puoi utilizzare le intestazioni rimanenti un numero qualsiasi di volte, purché le utilizzi con saggezza.

La stessa presenza di intestazioni HTML nel layout del tuo sito web è già un vantaggio per la promozione sui motori di ricerca e un posizionamento abile può raddoppiare il risultato. Ecco cosa scrive lo stesso Yandex al riguardo.

Le pagine ben progettate e strutturate sono più attraenti per l'utente; rendono molto più facile trovare le informazioni di cui hai bisogno.

Nella graduatoria si tiene conto non solo del rispetto formale del testo della richiesta, della completezza delle informazioni presentate e della loro pertinenza, ma anche del modo in cui queste sono strutturate e presentate.

Penso che tu sia già convinto dell'importanza dei titoli quando crei un layout, ma non è necessario provare a inserire tutte le parole chiave possibili nei titoli (anche se a volte lo faccio io stesso) prima funzionava, ma ora non funzionerà . I titoli dovrebbero essere utilizzati ai fini della navigazione dell'utente, non per manipolare la pertinenza.

Personalmente, racchiudo tutti i sottotitoli di un articolo in h2, i sottotitoli dei sottotitoli in h3 e i sottotitoli piccoli in h4. Sotto ogni articolo c'è un modulo di iscrizione e un blocco con pulsanti reti sociali, ho racchiuso i loro nomi in h6. Nella colonna di destra del sito i nomi delle sezioni sono racchiusi in h5.

Come puoi vedere, utilizzo al massimo le intestazioni HTML e la logica mi dice automaticamente di disporre tutto dall'alto verso il basso nel codice. Anche se per un idillio completo era necessario scambiare i titoli h6 e h5, ma sarebbe troppo pedante :) e non così importante.

3.4 Collegamenti rapidi al sito.

Continuando l'argomento dei titoli, voglio parlare dell'importanza di h1 e di come scriverlo correttamente. Innanzitutto, consiglio vivamente di usarlo solo 1 volta per pagina! Monitoralo nel tuo CMS. In secondo luogo, h1 ha un grande effetto sulla SEO (secondo solo al titolo), ma ti consiglio di duplicare il testo del titolo in h1.

Yandex scrive:

Per aiutare Yandex a evidenziare correttamente i collegamenti rapidi, il testo nel tag delle pagine chiave deve corrispondere al suo nome (con il titolo della pagina, evidenziato, ad esempio, con il tag) e ai testi dei collegamenti che puntano a questa pagina.

3.5 Utilizza tutte le opzioni di formattazione del testo.

Abbiamo già scoperto che i motori di ricerca amano i siti che hanno una struttura chiara, comprensibile e corretta. Pertanto, oltre alle intestazioni, dovresti utilizzare quante più funzionalità possibili:

• Utilizzare elenchi numerati e non numerati (ul, ol);
• Racchiudi il testo principale non nei tag div, ma nei tag di paragrafo: p;
• Accompagnare il testo con immagini e video;
• Disegna tabelle HTML;
• Usa (con moderazione!) il testo logico evidenziando i tag: strong, em, u.

3.6 Utilizzare saggiamente le parole chiave e i meta tag delle descrizioni.

Nella descrizione, scrivi in ​​un linguaggio accessibile di cosa tratta la tua pagina; non è necessario cercare di includervi il più possibile parole chiave. Crea una descrizione per le persone, pensa solo a questo, altrimenti puoi solo farti del male con un'ottimizzazione eccessiva. Lo stesso vale per il meta tag delle parole chiave. Ecco la pagina ufficiale Yandex, che ti spiega come scrivere correttamente una meta-descrizione di un sito: leggi in una nuova finestra.

Attenzione: non utilizzare meta tag inutili (questo è inutile), massimo tre: parole chiave, descrizione e un meta tag per indicare la codifica del sito:

Se il tuo CMS ne genera di più (Autor, Generator, ecc.), sentiti libero di eliminarli! Il sito non deve contenere spazzatura non necessaria, sia nel testo che nel codice.

3.7 Ottimizza il tuo codice.

Una volta terminato il tuo sito, pensa a come potresti ridurre il markup HTML, ad esempio utilizzando , e presta attenzione anche a se tutti i tuoi tag fanno qualcosa. Se al tag non sono applicate proprietà CSS, perché l'hai aggiunto? Per verificarlo, utilizzare . Spesso i principianti creano molti tag div extra. Dai un'occhiata, meno codice è, meglio è!

3.8 Accorciare il codice.

Una volta completato tutto il lavoro, abbrevia il codice HTML, CSS e JS. Come accorciare? Scrivi tutto in una riga, questo sarà l'ideale. E questo non è uno scherzo, rimuovi tutti gli spazi tra i tag e tutte le interruzioni di riga nel layout HTML! Quando premi Ctrl + U nel browser, dovresti vedere una singola linea continua.

Ho scritto questo punto nella parte SEO per un motivo, perché l'assenza di tabulazioni, interruzioni di riga e spazi aggiuntivi nel layout HTML aiuta i robot di ricerca a elaborare più velocemente il testo principale della pagina.

Il modo più semplice per abbreviare CSS e JS è tramite servizi appositi; per JS puoi utilizzare, ad esempio, Closure Compiler di Google (attenzione, dopo l'ottimizzazione il tuo codice potrebbe non funzionare più); per CSS è adatto csscompressor.com Tuttavia, di solito utilizzo un unico servizio (per JS e CSS), di cui parleremo alla fine dell'articolo.

Parte 4. Continuiamo a ottimizzare il layout del sito per i motori di ricerca 4.1 Quanto più alto è il testo principale, tanto più alta è la posizione nei motori di ricerca.

2 parametri sono importanti:

• Per quanto tempo l'utente deve scorrere (scorrere) la pagina fino al contenuto pertinente (secondo i motori di ricerca);
• Quanto in alto nel codice (vicino all'inizio) è il contenuto rilevante.

E se il secondo punto molto probabilmente non influisce molto sulla posizione, allora vale sicuramente la pena prestare molta attenzione al primo punto quando si costruisce la struttura e il design del sito.

Yandex scrive:

• L'essenza principale del documento dovrebbe essere chiara nella prima schermata del browser.
• Non è consigliabile utilizzare elementi di progettazione che rendano l'accesso al testo non evidente per gli utenti: finestre a scorrimento, blocchi a discesa nascosti, ecc.

Google ha anche uno speciale algoritmo chiamato , che determina quanto è necessario scorrere il tuo sito per raggiungere la parte utile (pertinente alla query) della pagina. L'immagine seguente illustra l'azione di questo algoritmo; l'algoritmo controlla la risoluzione media dello schermo (1024*768):

Inoltre, entrambi i motori di ricerca prestano molta attenzione al numero di annunci e banner nella prima schermata del browser.

Ricorda, più tempo è necessario per scorrere la pagina fino al contenuto principale, minore sarà la preferenza rispetto ai concorrenti, la cui parte principale del testo è visibile all'inizio della pagina.

Un paio di consigli utili su questo argomento:

• Rendi l'intestazione del sito la più piccola possibile in altezza (un esempio di come non farlo: questo blog);
• Cerca di non ingombrare il sito con la pubblicità;
• Se in un layout a due colonne non puoi decidere se posizionare una colonna aggiuntiva a destra o a sinistra della colonna principale, posizionala sempre a destra. I robot di ricerca, come le persone, guardano il tuo sito da sinistra a destra, il che significa che è meglio avere il contenuto principale a sinistra!

Ora parliamo un po' del secondo punto. In questo blog, prima dell'output della parte principale, cioè il testo degli articoli, c'è esattamente una riga di codice (anche se lunga), la seconda riga è l'inizio del primo paragrafo dell'articolo. Come ho già scritto oggi: idealmente, l'intero sito dovrebbe essere di una riga, ed è auspicabile che il testo principale sia il più vicino possibile all'inizio.

C'è un altro trucco a questo proposito. Ad esempio, abbiamo 2 colonne del sito: principale e aggiuntiva. Allo stesso tempo, nonostante la SEO, vogliamo davvero che la colonna aggiuntiva sia a sinistra; non c’è nulla di fatale in questo. Tuttavia, in questo caso, tutto il codice e tutte le informazioni della colonna aggiuntiva (a sinistra) avranno un codice più alto rispetto alla parte principale e possiamo risolvere questo problema!

Per questo utilizzeremo la proprietà float CSS. Quando creiamo un layout HTML, posizioneremo la colonna principale (a destra) a sinistra di quella aggiuntiva (sopra il codice):

La parte principale del sito. Colonna aggiuntiva a sinistra.

Ora scambiamoli usando i CSS:

#text(float:right;) #left(float:left;) .clear(clear:both;) /* nessun ritorno a capo */

Penso che tu abbia capito il punto. Potrei omettere le terze righe in entrambi i frammenti di codice, poiché si tratta di dettagli di layout che esulano dallo scopo di questo articolo. Tuttavia, questo suggerimento aiuterà a ridurre i possibili problemi per i progettisti di layout alle prime armi, in particolare quelli che hanno sentito parlare per la prima volta della proprietà CSS float, e ancora di più in modo chiaro.

Parte 5. Velocità della pagina di Google

Google Page Speed ​​​​è un meraviglioso servizio online di Google, nonché un plug-in per Chrome e Mozilla, che diventerà per te un assistente indispensabile durante l'analisi del modello di sito Web HTML + CSS. Ti dirà tutte le carenze e, soprattutto, ti fornirà soluzioni specifiche.

È anche lo stesso servizio che mi piace utilizzare per abbreviare il codice HTML, JS e CSS, dopo averlo utilizzato le prestazioni sono garantite al 100%.

Inizia a lavorare con Google Page Speed ​​​​e aumenterai notevolmente il tuo livello nella corretta ottimizzazione lato client del modello del tuo sito web.

Grazie per l'attenzione. Buona giornata e ci vediamo!