plugin versione mobile

goden

plugin versione mobile

Salve,
Utilizzo un tema responsive quindi si adatta tranquillamente, inoltre ha un bel layout grafico e il pulsante a scorrimento per le sezioni del menù, solo che è troppo lento, su pagespeed di google nella versione mobile ottengo un risultato di 57

Cosa mi conviene fare per velocizzarlo? Utilizzare qualche plugin? Quali mi consigliate?

P.S. Il mio sito web è goden.it

fda

Ciao Goden.
Non hai che l'imbarazzo della scelta. Da dove vuoi iniziare?
La prima priorità è ridurre il numero delle richieste. La seconda è presentare contenuti più snelli ai dispositivi mobile. Poi le altre questioni, alcune delle quali potrebbero sistemarsi con plugin (ho detto alcune).
Fammi una richiesta specifica e ti dico come procedere.
F.

goden

Intanto ti ringrazio, che come al solito trovo te sempre disponibile e preparatissimo, mi chiedo ancora come mai non fai parte dello staff.
Comunque scusa la mia ignoranza, come riduco le richieste e in che senso? Con un plugin cosa risolvo? e che plugin mi consigli? COnosco solo WP Touch
Poi ho visto un layout carino ad esempio sul sito ispazio che credo sia un plugin, perchè ho visto lo stesso anche in altri siti

fda

Ciao Goden.
@Goden said:

Intanto ti ringrazio, che come al solito trovo te sempre disponibile e preparatissimo, mi chiedo ancora come mai non fai parte dello staff.
*Soltanto quelli più belli diventano azzurri *(Cit.)
Grazie, comunque.
Per adesso ti dico delle risorse.
La pagina per caricarsi ha bisogno di tante cose: immagini, script da file javascript, stili dai css e altro. Ognuna di queste cose equivale a una richiesta e ogni richiesta che viene fatta incide sul tempo di caricamento della pagina, a volte più di quanto non faccia il peso della pagina.
Se quindi tu hai una pagina di 1,5MB e 100 richieste, per velocizzarla devi occuparti prima di ogni cosa di diminuire quel 100 a qualcosa che somigli a 70, 60 o anche 50.
Uno degli interventi più sostanziosi è l'accorpamento di tutti i fogli di stile in un solo file e di tutti i .js in un unico file. Questo non è sempre possibile, ma se ad esempio accorpi 16 javascript su 20, avrai comunque risparmiato ben 15 richieste!
Tu hai 20 javascript e 14 css, quindi puoi potenzialmente risparmiare fino a un massimo di 19+13=32 file, portando le richieste da 104 a 72 (questo leggo al momento in homepage).
Mi preme dire che per adesso stiamo ragionando sul sito "desktop", pensando a interventi che varranno per tutte le risoluzioni di monitor e tutti i device: successivamente potrai "truccarlo" come si faceva ai miei tempi con i motorini, facendo qualcosa di straordinario soltanto per il mobile. Prima però fai gli interventi generali.

Come si accorpano javascript e fogli di stile?
Esistono due modi:

fare copia e incolla del testo mettendolo tutto in un unico file, quindi andare a modificare a manina il codice per fare in modo che nell'head ci sia solo la riga relativa al nostro nuovo file unico (comodo per pochi file e se il sito è tuo, ma con tanti file e WP puoi anche impazzire);
affidarsi a un qualcosa di esterno e, al limite, intervenire a mano laddove l'automazione non riesce.
Io spesso ho usato/uso mod_pagespeed. Ho letto sul wiki una bella guida, ma forse è poco pratico iniziare da lì.
Esistono plugin e servizi che risolvono in parte il problema.
Cloudflare, ad esempio, ti permette di avere un account gratuito.

Servizi come cloudflare sono utilissimi per migliorare l'esperienza utente, e questo per più motivi. Intanto la CDN fornisce una copia dei file statici (soprattutto immagini, javascript, css) vicina all'utente, migliorando la navigazione degli utenti che provengono da aree geografiche diverse da quella in cui risiede il server dell'hosting. C'è anche un altro vantaggio: le risorse sono esterne e quindi si scaricano in parallelo. Se non erro, cloudflare accorpa anche i javascript, ma dovrei controllare, sto andando a memoria.

La parallelizzazione è un concetto semplice. Se tu devi portare a termine 2 compiti da 10 minuti hai due modi per farlo: esegui il primo compito e poi in sequenza il secondo, spendendo quindi 10+10=20minuti; oppure ti fai aiutare da qualcuno e, mentre tu esegui il primo compito, un'altra persona esegue il secondo, impiegando quindi 10+10=...10minuti! Ecco, mettendo le risorse statiche su un altro dominio tu scarichi in parallelo. Più o meno, spiegazione grezza e semplicistica.

Altro intervento per risparmiare richieste: mettere le icone in sprite CSS. Questo sistema lo puoi adottare anche per le immagini che hanno lunga vita, ad esempio il logo e alcuni elementi del template. Sulle immagini in sprite magari, se serve, apri un altro topic.

Per completare il discorso richieste, va detto che l'ottimale sarebbe:

accorpare tutti i js e tutti i css;
usare sprite css dove possibile;
mettere tutte le risorse statiche su un altro dominio (ad esempio un tuo terzo livello, tipo static.goden.it);
usare un servizio come mod_pagespeed o alternative (da valutare anche in ragione di altre esigenze e della piattaforma, tu hai WP; questi servizi di solito fanno molte cose, ad esempio comprimono i file);
valutare se usare un servizio come cloudflare o una cdn.

Io di solito faccio una copia del sito su un dominio e me lo ottimizzo facendo dei test, quando ho trovato il giusto equilibrio implemento le modifiche sull'originale.

Può aiutarti osservare la tua timeline durante il caricamento. Usa il programma che ti piace. Ti posto questo di gtmetrix che è gratuito:
gtmetrix . com /reports/goden. it/HoPqZOT0
Se guardi nel tab "timeline" noterai un sacco di barre con predominanza di rosa. La lunghezza delle barre è proporzionale al tempo impiegato, e il colore rosa indica un tempo morto durante il quale la risorsa è bloccata. Capirai bene che il tuo sito impiega 6-7 secondi in tutto, ma potrebbe metterci meno tempo a caricare se le risorse non fossero bloccate da altre risorse. Da qui la necessità di diminuirle in numero e di parallelizzare tutto quello che si può.

Spero di esserti stato utile.
Poi ti rispondo sugli altri punti.
F.:)

fda

Precisazione sulle risorse statiche su altri domini.
Non è che puoi mettere i file dove ti pare e non è sempre positivo averli all'esterno, specialmente quando non ne hai il controllo.
Questo sia perché è meglio non collegarsi a molti domini, sia perché questi domini potrebbero non essere veloci, e infine perché non disponi fisicamente del file (se lo cancellano o rinominano?)
Tu hai ad esempio due immagini che dovresti copiare e mettere insieme alle altre sul tuo sito. Se adotti il sistema suggerito da me, queste risorse sono comunque esterne, ma stanno tutte su un unico dominio che scegli tu (quindi veloce) e che controlli.
Le due immagini sono:
congres-medical-congress.com/1333687218_icontexto-inside-rss. png
negativeseo.it/wp-content/uploads/2013/03/backlink-generator. jpg

fda

Quattro interventi:

Mettere in sprite CSS le 5 icone social ed eventualmente anche il logo (risparmi 4 richieste)
Le immagini della slideshow vanno caricate in dimensioni diverse secondo il monitor/device (responsive): in questo modo risparmi anche peso, specialmente per il mobile.
Analogamente a quanto detto per la slideshow, alcune cose nel mobile non le devi mostrare, anche per motivi di usabilità: scegli cosa tagliare.
Alcune immagini si ridimensionano, ad esempio le anterpime 70x70 sono originariamente 150x150: non sarebbe male che fossero caricate già delle giuste dimensioni.
Occorre mettere un po' di codici a manina per specificare le dimensioni delle immagini.

Per i punti 1 e 2 posso postarti le soluzioni senza accedere. Se ti interessa apri due topic.
Ciao!
F.

goden

Dato che ho wordpress e non ne so molto di css (javascript lo sto studiando ora ma ancora sono alle basi) l'accorpamento di essi in unici fogli per diminuire le richieste mi verrebbe un po' alquanto difficoltoso.. Non c'è un qualche plugin o altro con cui posso fare questo lavoro?

Per lavorare nella versione mobile e seguire i tuoi consigli uso un plugin?

fda

Ciao Goden.
Prima fai le cose "a mano", poi vai di plugin e servizi esterni (ma solo dopo).
Se usi qualcosa come total cache e poi cloudflare hai risolto quasi tutto, a patto che - lo ripeto - prima fai a mano le cose per benino.
Se hai bisogno qui sul forum puoi chiedere sempre.;)
F.

fda

Lista plugin:

W3 Total Cache: http: //wordpress. org/plugins/w3-total-cache/
Asynchronous Javascript: http: //wordpress. org/plugins/asynchronous-javascript/
WP Deferred Javascripts: http: //wordpress. org/plugins/wp-deferred-javascripts/

Attenzione agli ultimi due plugin, insieme ad altri potrebbero dare problemi.

Lista servizi:

mod_pagespeed: https: //developers. google. com/speed/pagespeed/module
Cloudflare: https: //it. cloudflare. com/

Se usi Cloudflare con WordPress hai bisogno di un plugin come questo: http: //wordpress. org/plugins/cloudflare/
Se usi su WP sia Cloudflare sia W3 Total Cache, allora non installare quest'altro plugin perché esiste un'opzione di configurazione in W3 Total Cache.

Overclokk ha segnalato in un altro topic questi due articoli:

http: //seoblog. giorgiotave. it/caricamento-asincrono-jquery/3798
http: //seoblog. giorgiotave. it/caricare-jquery-asincrono-wordpress/3963

F.