• I
    User •

    Ottimizzare il PageSpeed di un sito in Wordpress

    Salve a tutti,

    è da giorni che sto cercando di ottimizzare, a livello di velocità di caricamento, il mio sito mtlook.it fatto in Parallax. Un limite del parallax sta proprio nel fatto che, caricando tutti i contenuti in un'unica pagina, la home risulta abbastanza pesante.

    Facendo un PageSpeed di Google, infatti, il punteggio è abbastanza deludente: 40. Il consiglio più importante che mi viene dato è quello di abilitare la compressione... cosa che ho fatto abilitando la voce "Compressione delle pagine" in WP Super Cache, ma il problema rimane. Google continua a dirmi di abilitare la compressione. Come mai?

    Mi date qualche dritta? Magari su come abilitare la cache anche lato server? Grazie mille!

    0
  • A
    User Attivo •

    Con il tool GTMETRIX potresti iniziare a sostituire le tue immagini con versioni ottimizzatte senza perdere qualità.
    Dando un occhiata alle richieste ajax del tuo sito non risponde proprio velocisimo, un servizio di hosting dedicato sicuramente incrementerebbe le performance.

    0
  • I
    User •

    Innanzitutto grazie mille per l'interessamento. Diciamo che il cambio hosting vorrei tenerlo come ultima chance... Nel senso che, da quanto ho capito, ho ancora molto da ottimizzare a livello di tecniche/codice...

    Le immagini le ho salvate tutte con photoshop con il formato jpeg (salva per web), ma forse ho sbagliato qualcosa. Sul sito da te indicato (che non conoscevo) non trovo nessun tool per comprimere le immagini, ma forse devo controllare meglio 🙂

    0
  • A
    User Attivo •

    Devi fare analizzare un sito, poi vai sulla riga che tratta delle ottimizzazione delle immaggini e clicci sul link sulla destra, dentro trovi le immagini ottimizzate.

    0
  • overclokk
    Moderatore •

    Ciao iGianni84,
    nel tuo sito non ci sono solo le immagini da ottimizzare: http://www.giorgiotave.it/speedoo/result/140123_VQ_9/1/details/

    C'è da fare un lavoro certosino ma si possono comunque ottenere risultati discreti, comincia dalle immagini, puoi seguire il consiglio di artasdog o anche installare wpsmushit che ti comprime le immagini già caricate.

    Ad ogni modo ti consiglio di leggere la categoria delle perfomrance che trovi qui sul seo blog: http://seoblog.giorgiotave.it/category/web-performance-optimization almeno per avere un'infarinatura generale delle cose.

    Quello che dovrai far successivamente è lavorare sui file css e js.

    Intanto comincia a togliere tutto quello che non ti serve, elimina i plugin disattivati.

    Ciao
    Enea

    0
  • I
    User •

    Innanzitutto grazie per aver perso tempo ad analizzare il mio sito e a darmi consigli. Ho ripetuto il test che hai fatto direttamente dal sito ufficiale e questo è stato il risultato:

    imagizer.imageshack.us/v2/800x600q90/69/acg4.jpg

    Sono pur sempre quattro A 😄

    Comunque si, ho utilizzato quel tool per le immagini, ma sembra che ancora non ci siamo. Non pare funzionare proprio alla perfezione. Poi a giorni (se riesco) attivo anche il CDN che sto facendo su Amazon (mi hanno riferito che è gratuito). Purtroppo riguardo i CDN ne so poco e niente e non riesco a trovare guide per Wordpress + W3 Total Cache, ma continuerò a cercare.

    Ma voi avete notato che c'è un leggero lag dal momento in cui cercate di aprire la pagina mtlook.it? Cioè una volta digitato l'indirizzo web e dato invio, è come se il caricamento si bloccasse e partisse solo dopo qualche secondo. Da cosa può dipendere ciò?

    Grazie mille.

    0
  • overclokk
    Moderatore •

    Il problema lo vedi dal test che hai eseguito, risposta del server e inizio rendering della pagina, per il server puoi fare poco, ovvero cambiare hosting, per le altre cose invece hai più possibilità di migliorare 🙂

    Con W3TC puoi usare anche cloudflare come cdn, altrimenti puoi attivare la cdn di wordpress usando jetpack, sono tutte gratuite.

    Ciao
    Enea

    0
  • I
    User •

    Infatti il problema principale (oltre alle immagini) è proprio l'inizio render che, da quanto ho capito, dipende dal mio file .htaccess abbastanza articolato. Il fatto è che stato creato da W3TC stesso per cui penso sia fatto bene... tuttavia rallenta di molto l'inizio di caricamento pagina.

    Sareste così gentili da darci un occhio?

    # BEGIN W3TC Browser Cache
<IfModule mod_mime.c>
    AddType text/css .css
    AddType text/x-component .htc
    AddType application/x-javascript .js
    AddType application/javascript .js2
    AddType text/javascript .js3
    AddType text/x-js .js4
    AddType text/html .html .htm
    AddType text/richtext .rtf .rtx
    AddType image/svg+xml .svg .svgz
    AddType text/plain .txt
    AddType text/xsd .xsd
    AddType text/xsl .xsl
    AddType text/xml .xml
    AddType video/asf .asf .asx .wax .wmv .wmx
    AddType video/avi .avi
    AddType image/bmp .bmp
    AddType application/java .class
    AddType video/divx .divx
    AddType application/msword .doc .docx
    AddType application/vnd.ms-fontobject .eot
    AddType application/x-msdownload .exe
    AddType image/gif .gif
    AddType application/x-gzip .gz .gzip
    AddType image/x-icon .ico
    AddType image/jpeg .jpg .jpeg .jpe
    AddType application/json .json
    AddType application/vnd.ms-access .mdb
    AddType audio/midi .mid .midi
    AddType video/quicktime .mov .qt
    AddType audio/mpeg .mp3 .m4a
    AddType video/mp4 .mp4 .m4v
    AddType video/mpeg .mpeg .mpg .mpe
    AddType application/vnd.ms-project .mpp
    AddType application/x-font-otf .otf
    AddType application/vnd.oasis.opendocument.database .odb
    AddType application/vnd.oasis.opendocument.chart .odc
    AddType application/vnd.oasis.opendocument.formula .odf
    AddType application/vnd.oasis.opendocument.graphics .odg
    AddType application/vnd.oasis.opendocument.presentation .odp
    AddType application/vnd.oasis.opendocument.spreadsheet .ods
    AddType application/vnd.oasis.opendocument.text .odt
    AddType audio/ogg .ogg
    AddType application/pdf .pdf
    AddType image/png .png
    AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
    AddType audio/x-realaudio .ra .ram
    AddType application/x-shockwave-flash .swf
    AddType application/x-tar .tar
    AddType image/tiff .tif .tiff
    AddType application/x-font-ttf .ttf .ttc
    AddType audio/wav .wav
    AddType audio/wma .wma
    AddType application/vnd.ms-write .wri
    AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
    AddType application/zip .zip
</IfModule>
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>
<IfModule mod_deflate.c>
    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json
    <IfModule mod_mime.c>
        # DEFLATE by extension
        AddOutputFilter DEFLATE js css htm html xml
    </IfModule>
    </IfModule>
</IfModule>
<FilesMatch "\.(css|htc|js|js2|js3|js4|CSS|HTC|JS|JS2|JS3|JS4)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
<FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|JSON|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$">
    FileETag MTime Size
    <IfModule mod_headers.c>
        Header set Pragma "public"
        Header append Cache-Control "public"
    </IfModule>
</FilesMatch>
# END W3TC Browser Cache
# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^(.*\/)?w3tc_rewrite_test/?$ $1?w3tc_rewrite_test=1 
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteRule .* - [E=W3TC_ENC:_gzip]
    RewriteCond %{REQUEST_METHOD} !=POST
    RewriteCond %{QUERY_STRING} =""
    RewriteCond %{REQUEST_URI} \/$
    RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wordpress_logged_in|wptouch_switch_toggle) 
    RewriteCond "%{DOCUMENT_ROOT}/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index.html%{ENV:W3TC_ENC}" -f
    RewriteRule .* "/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index.html%{ENV:W3TC_ENC}" 
</IfModule>
# END W3TC Page Cache core
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteRule ^index\.php$ - 
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php 
</IfModule>


# END WordPress
    0
  • overclokk
    Moderatore •

    L'inizio render è causato dai file js e css che prima di essere "eseguiti" il browser se li deve scaricare tutti.

    Dovresti spostare almeno i js nel footer e poi non sarebbe una brutta idea spostare anche i css nel footer e tenere nell'header solo quello che effettivamente serve per il rendering della parte visibile (qui), con le immagini e i social usi il lazyloading (qui).

    Già con queste pratiche dovresti velocizzare molto il caricamento.

    Ciao
    Enea

    0
  • I
    User •

    Grazie ancora per i consigli overclokk. Oggi mi stavo sbizzarrendo con il CDN... Credo di aver configurato bene W3TC con Amazon CloudFront ed ora sta facendo l'upload dei file... Il problema è che ci sta mettendo tantissimo tempo e come "file processed" mi da sempre 0. Come se ad un certo punto l'upload si bloccasse.

    Ora, visto che ho fatto tutto un po' ad occhio, mica sapresti consigliarmi qualche guida fatta bene per configurare tutto alla perfezione? Ho cercato anche in Jetpack (che già avevo installato), ma non c'è nessuna voce che rimanda al cdn...

    0
Effettua l'accesso per rispondere