Speed up my Website

[Thodoris_Gamos]

Γεια σας

Έχω μια νέα ιστοσελίδα σε Joomla 3 θα ήθελα να μάθω πως μπορώ να επιταχύνω – αυξήσω την ταχύτητα της ιστοσελίδας μου, πχ αν ενεργοποιήσω το gzip ή το Cashe του joomla??? Ή αν υπάρχει κάτι άλλο ή κάποια άλλη εφαρμογή???

Η ιστοσελίδα μου είναι: http://www.gamosinfo.gr www.gamosinfo.gr

[seeder]

Βαλε το YSlow στο Firebug του Firefox και θα δεις το παρακάτω





Στην συνεχεια προσπάθησε να τα αυξησεις τις βαθμολογιες αναλογα με την περιπτωση...

Πχ. για το F στο Add Expires headers πρεπει να προσθεσεις καποιες γραμμες στο .htaccess

[changlee]

Και με ποια σύνταξη ακριβώς;

[johnl1924]

Αν και ερασιτέχνης με το joomla, θα προσπαθήσω να σε βοηθήσω.
Κάποιες σελίδες για να μετρήσεις την ταχύτητα σου είναι τα:

tools.pingdom.com

gtmetrix.com/

https://developers.google.com/speed/pagespeed/insights/

Τα παραπάνω σου δίνουν και προτάσεις για την βελτίωση.
Πρώτα απ'όλα μπορείς να βελτιώσεις τις φωτογραφίες. Το gtmetrix, μικραίνει τις φωτογραφίες χωρίς να χρειαστεί να τις επεξεργαστείς εσύ.
Βλέπω ότι χρησιμοποιείς template της shape5. Αν έχεις σε ισχύ λογαριασμό μπορείς να κατεβάσεις το Shape 5 CSS and JS Compressor , το οποίο συμπιέζει τα css και javascript αρχεία. Άλλο εργαλείο (δωρεάν) είναι το JCH Optimize. Και τα δύο θέλουν δοκιμές για να δεις με ποια ρύθμιση δουλεύει το site καλύτερα. Κάνε πρώτα backup, γιατί ορισμένες από τις επιλογές τους μπορούν να "κατεβάσουν" ή να χαλάσουν την εικόνα του site. Δοκιμάζεις άλλες ρυθμίσεις και προχωράς.

Για να βελτιώσεις τα: Leverage browser caching, Add Expires headers, Enable gzip compression, Enable Keep-Alive, Specify a Vary: Accept-Encoding header, πρέπει να δημιουργησεις στον φάκελο του joomla (μέσω ftp) ένα αρχείο .htaccess (προσοχή στο όνομα. δεν είναι htaccess.txt είναι .htaccess (χωρίς όνομα).

Μέσα στο .htaccess κάνε επικόληση τα:

Κώδικας: Επιλογή όλων

##
# @package		Joomla
# @copyright	Copyright (C) 2005 - 2012 Open Source Matters. All rights reserved.
# @license		GNU General Public License version 2 or later; see LICENSE.txt
##

##
# READ THIS COMPLETELY IF YOU CHOOSE TO USE THIS FILE!
#
# The line just below this section: 'Options +FollowSymLinks' may cause problems
# with some server configurations.  It is required for use of mod_rewrite, but may already
# be set by your server administrator in a way that dissallows changing it in
# your .htaccess file.  If using it causes your server to error out, comment it out (add # to
# beginning of line), reload your site in your browser and test your sef url's.  If they work,
# it has been set by your server administrator and you do not need it set here.
##

## Can be commented out if causes errors, see notes above.
Options +FollowSymLinks

## Mod_rewrite in use.

RewriteEngine On

## Begin - Rewrite rules to block out some common exploits.
# If you experience problems on your site block out the operations listed below
# This attempts to block the most common type of exploit `attempts` to Joomla!
#
# Block out any script trying to base64_encode data within the URL.
RewriteCond %{QUERY_STRING} base64_encode[^(]*\([^)]*\) [OR]
# Block out any script that includes a <script> tag in URL.
RewriteCond %&#123;QUERY_STRING&#125; &#40;<|%3C&#41;&#40;&#91;^s&#93;*s&#41;+cript.*&#40;>|%3E&#41; &#91;NC,OR&#93;
# Block out any script trying to set a PHP GLOBALS variable via URL.
RewriteCond %&#123;QUERY_STRING&#125; GLOBALS&#40;=|\&#91;|\%&#91;0-9A-Z&#93;&#123;0,2&#125;&#41; &#91;OR&#93;
# Block out any script trying to modify a _REQUEST variable via URL.
RewriteCond %&#123;QUERY_STRING&#125; _REQUEST&#40;=|\&#91;|\%&#91;0-9A-Z&#93;&#123;0,2&#125;&#41;
# Return 403 Forbidden header and show the content of the root homepage
RewriteRule .* index.php &#91;F&#93;
#
## End - Rewrite rules to block out some common exploits.

## Begin - Custom redirects
#
# If you need to redirect some pages, or set a canonical non-www to
# www redirect &#40;or vice versa&#41;, place that code here. Ensure those
# redirects use the correct RewriteRule syntax and the &#91;R=301,L&#93; flags.
#
## End - Custom redirects

##
# Uncomment following line if your webserver's URL
# is not directly related to physical file paths.
# Update Your Joomla! Directory &#40;just / for root&#41;.
##

# RewriteBase /

## Begin - Joomla! core SEF Section.
#
RewriteRule .* - &#91;E=HTTP_AUTHORIZATION&#58;%&#123;HTTP&#58;Authorization&#125;&#93;
#
# If the requested path and file is not /index.php and the request
# has not already been internally rewritten to the index.php script
RewriteCond %&#123;REQUEST_URI&#125; !^/index\.php
# and the request is for something within the component folder,
# or for the site root, or for an extensionless URL, or the
# requested URL ends with one of the listed extensions
RewriteCond %&#123;REQUEST_URI&#125; /component/|&#40;/&#91;^.&#93;*|\.&#40;php|html?|feed|pdf|vcf|raw&#41;&#41;$ &#91;NC&#93;
# and the requested path and file doesn't directly match a physical file
RewriteCond %&#123;REQUEST_FILENAME&#125; !-f
# and the requested path and file doesn't directly match a physical folder
RewriteCond %&#123;REQUEST_FILENAME&#125; !-d
# internally rewrite the request to the index.php script
RewriteRule .* index.php &#91;L&#93;
#
## End - Joomla! core SEF Section.

########## Begin - Optimal default expiration time
## Note&#58; this might cause problems and you might have to comment it out by
## placing a hash in front of this section's lines
<IfModule mod_expires.c>
	# Enable expiration control
	ExpiresActive On
 
	# Default expiration&#58; 1 month after request
	ExpiresDefault "now plus 1 month"
 
	# CSS and JS expiration&#58; 1 month after request
	ExpiresByType text/css "now plus 1 month"
	ExpiresByType application/javascript "now plus 1 month"
	ExpiresByType application/x-javascript "now plus 1 month"
	ExpiresByType text/html A3600
 
	# Image files expiration&#58; 1 month after request
	ExpiresByType image/bmp "now plus 1 month"
	ExpiresByType image/gif "now plus 1 month"
	ExpiresByType image/jpeg "now plus 1 month"
	ExpiresByType image/jp2 "now plus 1 month"
	ExpiresByType image/pipeg "now plus 1 month"
	ExpiresByType image/png "now plus 1 month"
	ExpiresByType image/svg+xml "now plus 1 month"
	ExpiresByType image/tiff "now plus 1 month"
	ExpiresByType image/vnd.microsoft.icon "now plus 1 month"
	ExpiresByType image/x-icon "now plus 1 month"
	ExpiresByType image/ico "now plus 1 month"
	ExpiresByType image/icon "now plus 1 month"
	ExpiresByType text/ico "now plus 1 month"
	ExpiresByType application/ico "now plus 1 month"
	ExpiresByType image/vnd.wap.wbmp "now plus 1 month"
	ExpiresByType application/vnd.wap.wbxml "now plus 1 month"
	ExpiresByType application/smil "now plus 1 month"
 
	# Audio files expiration&#58; 1 month after request
	ExpiresByType audio/basic "now plus 1 month"
	ExpiresByType audio/mid "now plus 1 month"
	ExpiresByType audio/midi "now plus 1 month"
	ExpiresByType audio/mpeg "now plus 1 month"
	ExpiresByType audio/x-aiff "now plus 1 month"
	ExpiresByType audio/x-mpegurl "now plus 1 month"
	ExpiresByType audio/x-pn-realaudio "now plus 1 month"
	ExpiresByType audio/x-wav "now plus 1 month"
 
	# Movie files expiration&#58; 1 month after request
	ExpiresByType application/x-shockwave-flash "now plus 1 month"
	ExpiresByType x-world/x-vrml "now plus 1 month"
	ExpiresByType video/x-msvideo "now plus 1 month"
	ExpiresByType video/mpeg "now plus 1 month"
	ExpiresByType video/mp4 "now plus 1 month"
	ExpiresByType video/quicktime "now plus 1 month"
	ExpiresByType video/x-la-asf "now plus 1 month"
	ExpiresByType video/x-ms-asf "now plus 1 month"
</IfModule>
########## End - Optimal expiration time
<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs &#40;only needed for really old browsers&#41;
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0&#91;678&#93; no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

<ifmodule mod_mime.c>
  <filesmatch "\.html\.gz$">
    ForceType text/html
    FileETag None
  </filesmatch>
  AddEncoding gzip .gz
  AddType text/html .gz
</ifmodule>
<ifmodule mod_deflate.c>
  SetEnvIfNoCase Request_URI \.gz$ no-gzip
</ifmodule>
<ifmodule mod_headers.c>
  Header set Vary "Accept-Encoding, Cookie"
  Header set Cache-Control 'max-age=2592000, must-revalidate'
  Header set Connection keep-alive
</ifmodule>

Φυσικά είναι αυτονόητη η ενεργοποίηση της cache και του gzip μέσα από την σελίδα διαχείρισης του site.
Θα δεις μεγάλη διαφορά με τα παραπάνω.
Ελπίζω να βοήθησα.

[changlee]

Καλημέρα Γιάννη!
Ναι, όντως με βοήθησε πάρα πολύ.

...Κάποιες σελίδες για να μετρήσεις την ταχύτητα σου είναι τα:

tools.pingdom.com

gtmetrix.com/

https://developers.google.com/speed/pagespeed/insights/

Τα παραπάνω σου δίνουν και προτάσεις για την βελτίωση.
Πρώτα απ'όλα μπορείς να βελτιώσεις τις φωτογραφίες. Το gtmetrix, μικραίνει τις φωτογραφίες χωρίς να χρειαστεί να τις επεξεργαστείς εσύ.

Τα χρησιμοποιώ όλα σχεδόν καθημερινά. Αλλά το gtmetrix πως ακριβώς μικραίνει τις φωτογραφίες; Εγώ το προσπαθώ με το Photoshop μία προς μία.

Βλέπω ότι χρησιμοποιείς template της shape5. Αν έχεις σε ισχύ λογαριασμό μπορείς να κατεβάσεις το Shape 5 CSS and JS Compressor , το οποίο συμπιέζει τα css και javascript αρχεία. Άλλο εργαλείο (δωρεάν) είναι το JCH Optimize. Και τα δύο θέλουν δοκιμές για να δεις με ποια ρύθμιση δουλεύει το site καλύτερα. Κάνε πρώτα backup, γιατί ορισμένες από τις επιλογές τους μπορούν να "κατεβάσουν" ή να χαλάσουν την εικόνα του site. Δοκιμάζεις άλλες ρυθμίσεις και προχωράς.

Που το είδες αυτό το template της shape5. Με Artisteer κυρίως δουλεύουμε. Το JCH όντως κάνει θαύματα. Στο .htaccess έχω θέμα ακόμη.

Για να βελτιώσεις τα: Leverage browser caching, Add Expires headers, Enable gzip compression, Enable Keep-Alive, Specify a Vary: Accept-Encoding header, πρέπει να δημιουργησεις στον φάκελο του joomla (μέσω ftp) ένα αρχείο .htaccess (προσοχή στο όνομα. δεν είναι htaccess.txt είναι .htaccess (χωρίς όνομα).

Μέσα στο .htaccess κάνε επικόληση τα:

Κώδικας: Επιλογή όλων

##
# @package	...

Φυσικά είναι αυτονόητη η ενεργοποίηση της cache και του gzip μέσα από την σελίδα διαχείρισης του site.
Θα δεις μεγάλη διαφορά με τα παραπάνω.
Ελπίζω να βοήθησα.

Ναι, εννοείται cache καιι gzip είναι παντού ενεργοποιημένα, και το .htaccess το γνωρίζω. Άρα στο υπάρχον αρχείο προσθέτω τα ακόλουθα;

Κώδικας: Επιλογή όλων

########## Begin - Optimal default expiration time 
## Note: this might cause problems and you might have to comment it out by 
## placing a hash in front of this section's lines 
<IfModule mod_expires.c> 
   # Enable expiration control 
   ExpiresActive On 
  
   # Default expiration&#58; 1 month after request 
   ExpiresDefault "now plus 1 month" 
  
   # CSS and JS expiration&#58; 1 month after request 
   ExpiresByType text/css "now plus 1 month" 
   ExpiresByType application/javascript "now plus 1 month" 
   ExpiresByType application/x-javascript "now plus 1 month" 
   ExpiresByType text/html A3600 
  
   # Image files expiration&#58; 1 month after request 
   ExpiresByType image/bmp "now plus 1 month" 
   ExpiresByType image/gif "now plus 1 month" 
   ExpiresByType image/jpeg "now plus 1 month" 
   ExpiresByType image/jp2 "now plus 1 month" 
   ExpiresByType image/pipeg "now plus 1 month" 
   ExpiresByType image/png "now plus 1 month" 
   ExpiresByType image/svg+xml "now plus 1 month" 
   ExpiresByType image/tiff "now plus 1 month" 
   ExpiresByType image/vnd.microsoft.icon "now plus 1 month" 
   ExpiresByType image/x-icon "now plus 1 month" 
   ExpiresByType image/ico "now plus 1 month" 
   ExpiresByType image/icon "now plus 1 month" 
   ExpiresByType text/ico "now plus 1 month" 
   ExpiresByType application/ico "now plus 1 month" 
   ExpiresByType image/vnd.wap.wbmp "now plus 1 month" 
   ExpiresByType application/vnd.wap.wbxml "now plus 1 month" 
   ExpiresByType application/smil "now plus 1 month" 
  
   # Audio files expiration&#58; 1 month after request 
   ExpiresByType audio/basic "now plus 1 month" 
   ExpiresByType audio/mid "now plus 1 month" 
   ExpiresByType audio/midi "now plus 1 month" 
   ExpiresByType audio/mpeg "now plus 1 month" 
   ExpiresByType audio/x-aiff "now plus 1 month" 
   ExpiresByType audio/x-mpegurl "now plus 1 month" 
   ExpiresByType audio/x-pn-realaudio "now plus 1 month" 
   ExpiresByType audio/x-wav "now plus 1 month" 
  
   # Movie files expiration&#58; 1 month after request 
   ExpiresByType application/x-shockwave-flash "now plus 1 month" 
   ExpiresByType x-world/x-vrml "now plus 1 month" 
   ExpiresByType video/x-msvideo "now plus 1 month" 
   ExpiresByType video/mpeg "now plus 1 month" 
   ExpiresByType video/mp4 "now plus 1 month" 
   ExpiresByType video/quicktime "now plus 1 month" 
   ExpiresByType video/x-la-asf "now plus 1 month" 
   ExpiresByType video/x-ms-asf "now plus 1 month" 
</IfModule> 
########## End - Optimal expiration time 
<IfModule mod_deflate.c> 
  # Compress HTML, CSS, JavaScript, Text, XML and fonts 
  AddOutputFilterByType DEFLATE application/javascript 
  AddOutputFilterByType DEFLATE application/rss+xml 
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
  AddOutputFilterByType DEFLATE application/x-font 
  AddOutputFilterByType DEFLATE application/x-font-opentype 
  AddOutputFilterByType DEFLATE application/x-font-otf 
  AddOutputFilterByType DEFLATE application/x-font-truetype 
  AddOutputFilterByType DEFLATE application/x-font-ttf 
  AddOutputFilterByType DEFLATE application/x-javascript 
  AddOutputFilterByType DEFLATE application/xhtml+xml 
  AddOutputFilterByType DEFLATE application/xml 
  AddOutputFilterByType DEFLATE font/opentype 
  AddOutputFilterByType DEFLATE font/otf 
  AddOutputFilterByType DEFLATE font/ttf 
  AddOutputFilterByType DEFLATE image/svg+xml 
  AddOutputFilterByType DEFLATE image/x-icon 
  AddOutputFilterByType DEFLATE text/css 
  AddOutputFilterByType DEFLATE text/html 
  AddOutputFilterByType DEFLATE text/javascript 
  AddOutputFilterByType DEFLATE text/plain 
  AddOutputFilterByType DEFLATE text/xml 

  # Remove browser bugs &#40;only needed for really old browsers&#41; 
  BrowserMatch ^Mozilla/4 gzip-only-text/html 
  BrowserMatch ^Mozilla/4\.0&#91;678&#93; no-gzip 
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 
  Header append Vary User-Agent 
</IfModule> 

<ifmodule mod_mime.c> 
  <filesmatch "\.html\.gz$"> 
    ForceType text/html 
    FileETag None 
  </filesmatch> 
  AddEncoding gzip .gz 
  AddType text/html .gz 
</ifmodule> 
<ifmodule mod_deflate.c> 
  SetEnvIfNoCase Request_URI \.gz$ no-gzip 
</ifmodule> 
<ifmodule mod_headers.c> 
  Header set Vary "Accept-Encoding, Cookie" 
  Header set Cache-Control 'max-age=2592000, must-revalidate' 
  Header set Connection keep-alive 
</ifmodule> 

[johnl1924]

Καλησπέρα.
Το gtmetrix, μετά το σκανάρισμα της σελίδας σου, σου επισημαίνει τι "πρέπει" να διορθώσεις.
Στο optimize images, (κάνεις κλικ επάνω του) σου λέει ποιες φωτογραφίες θέλουν βελτίωση και κάτω από το όνομα της φωτογραφίες σου δίνει ένα link με την βελτιωμένη φωτογραφία.
(εγώ για να μικρήνω το μέγεθος (πχ. από 1000χ900 σε 500χ300) και για να μικρήνω το μέγεθος σε kb χρησιμοποιώ το irfanview. Τρομερό εργαλείο για windows (δωρεάν). Ανοίγεις την φωτογραφία, πατάς στο menu τα image/resize για να μειώσεις τις διαστάσεις και στη συνέχεια πατάς στο πληκτρολόγιο σου το Β. Ανοίγει νέο παράθυρο (batch conversion) και μπορείς να κάνεις την φωτογραφία όσα kb θέλεις (options)).

Template της shape5 είναι του φίλου παραπάνω (Thodoris_Gamos ).

Το JCH με δυσκολεύει με ορισμένα javascripts.
Επιπλέον, μπορείς να το συνδιάσεις και με τα too many files και scriptsdown (όλα μαζί). Θελουν δοκιμές για να δεις με ποιες ρυθμίσεις δουλεύουν όλα μαζί καλά. Εγώ τα χρησιμοποιώ μαζί με το Shape 5 CSS and JS Compressor.

Στο .htaccess προσθέτεις ακριβώς αυτά που επισημαίνεις (αυτό που πόσταρα είναι αντιγραφή από το δικό μου .htaccess).

Καλή επιτυχία, περιμένω νέα από την νεότερη βαθμολογία του site σου.

[johnl1924]

Δοκίμασε και αυτά τα online εργαλεία για βελτιστοποίηση των φωτογραφιών:

http://tools.dynamicdrive.com/imageoptimizer/

http://ezgif.com/optipng

http://www.smushit.com/ysmush.it/

[giannis17]

Έχω δοκιμάσει σχεδόν όλα τα εργαλεία για image optimization, μακράν το καλύτερο είναι το tinypng. Έχω πάρει το photoshop plugin και αξίζει κάθε δεκάρα.

[johnl1924]

Γιάννη το δοκίμασα, πολύ καλό. Θα το χρησιμοποιήσω.

[changlee]

1000 ευχαριστώ!

[apsuh0s]

Επειδή βλέπω πως επικεντρωθήκατε στο image optimization να αναφέρω πως υπάρχουν πολλά ακόμα που μπορείς να κάνεις για το performance.

Assets minification/concatenation, clean unused css, render blocking css (critical css), render blocking javascript(async, defer), spriting, lazy load, responsive images κλπ.

Όλα τα παραπάνω, με έναν task runner (grunt, gulp, brunch, broccoli) ξεφεύγουν από το normal workflow και γίνονται παρασκηνιακά και ο developer γλιτώνει πολύ χρόνο και αποφεύγει λάθη.

Ταυτόχρονα μπορούν να στηθούν tasks στα οποία ορίζεις performance budgets και διάφορα metrics.

Σημείωση: Για τα image assets είδα πως δεν αναφέρθηκε το WebP format το οποίο κατά τη γνώμη μου αξίζει να ασχοληθεί κάποιος.

Συμπερασματικά, υπάρχει ένα σημαντικό learning curve αν κάποιος αποφασίσει να ασχοληθεί με το front end automation αλλά είμαι σίγουρος πως η επένδυση αυτή θα αποφέρει πολύ μεγάλα κέρδη και θα βοηθήσει τον developer να επικεντρωθεί σε διαδικασίες που τον εμπνέουν και κάνουν τη δουλειά του ευχάριστη.

[Insurer]

Για joomla υπάρχει και αυτό εδώ http://extensions.joomla.org/extensions ... for-joomla το οποίο κάνει πολύ καλά την δουλειά του

[changlee]

Επειδή βλέπω πως ... και κάνουν τη δουλειά του ευχάριστη.

Post για σεμινάριο!