speed – Κατασκευή Ιστοσελίδων Χανιά & Θεσσαλονίκη

Πως να δημιουργήσετε ένα cookieless domain

Web-Design — Tue, 27 Mar 2018 22:16:01 +0000

Είναι και αυτές οι σελίδες που μετράνε την ταχύτητα της ιστοσελίδας μας (tools.pingdom.com). Είναι και το Google που τα θέλει όλα στην εντέλεια. Η λύση λοιπόν για το “serve static content from a cookieless domain” αλλά και για το “Parallelize downloads across multiple domains” είναι δύο. Η μία είναι να χρησιμοποιήσετε μία CDN (Content Delivery Network) υπηρεσία που βγάζει τα cookies ή να δίνετε τα resources από την δική σας σελίδα (από άλλο domain ή subdomain) χωρίς όμως να τα επιβαρύνετε με ένα cookie σε κάθε διαδρομή!

Πριν περάσω στα τεχνικά θα ήθελα πρώτα να συζητήσουμε την σημασία αυτών των δύο “προβλημάτων”. Το πρώτο που είναι το “serve static content from a cookieless domain”, μερικές φορές δεν είναι και τόσο σημαντικό όταν χρησιμοποιείτε πρωτόκολλα όπως το HTTP/2. Το HTTP/2 ουσιαστικά κατεβάζει παράλληλα τα static resources της ιστοσελίδα σας (images, css, js κτλ.). Το cookie κάνει ουσιαστικά piggyback σε κάθε resource που στέλνουμε, αλλά εφόσον φεύγουν όλα μαζί παράλληλα, το “κακό” ελαχιστοποιείτε.

Το δεύτερο πρόβλημα αναφορικά να πούμε ότι εμφανίζεται από το περιορισμό του HTTP/1.1 και των browsers να έχουν πολλές συνδέσεις μαζί. Τυπικά είναι 6 συνδέσεις. Αυτό το πρόβλημα εμφανίζεται συνήθως σε σελίδες που έχουν μεγάλο αριθμό από requests. Μπορείτε να το προσπεράσετε αν χρησιμοποιείτε κάποια CDN υπηρεσία που υποστηρίζει HTTP/2, ή να μοιράσετε τα δεδομένα σας σε πάνω από ένα subdomains (domain sharding).

HTTP/2: Μπορεί πάλι να δείτε κάποια βελτίωση όταν στέλνετε τα static στοιχεία της σελίδας σας από cookieless domain, αλλά ίσως όχι μεγάλη.

Serve static content from a cookieless domain in wordpress

Η διαδικασία έχει ώς εξής

ΒΗΜΑ 1

Δημιουργούμε ένα subdomain (ας πούμε static.selidamou.gr) που να δείχνει στην ιστοσελίδα μας

Λέμε στο wordpress να βάζει cookie μόνο στο www. (μέσα στο wpconfig ή από το code snippets plugin)

define("COOKIE_DOMAIN", "www.domainname.com");

Κατευθύνουμε το static content στο cookieless domain μας.

Προσοχή! Σε περίπτωση που έχετε το wordpress χωρίς τα www, τότε υπάρχουν δύο επιλογές. Η πρώτη είναι να αγοραστεί καινούριο Domain. Η δεύτερη να μπει στην σελίδα το www, γιατί στην περίπτωση που δεν υπάρχει το wordpress, τείνει να τοποθετεί το cookie σε ολόκληρο το Domain.

Παράδειγμα για CPANEL και PLESK για δημιουργία sub domain

Click στα images για να τα δείτε μεγαλύτερα..

BHMA 2

Τρόπος 1ος

Ο πρώτος τρόπος για να κατευθύνουμε το στατικό περιεχόμενο στο subdomain μας, είναι μέσω κώδικα(wp-config ή snippet plugin, όπως αναφέρθηκε παραπάνω)

define("WP_CONTENT_URL", "http://static.domainname.com");
define("WP_PLUGIN_URL", "http://static.domainname.com/plugins");

Μετά πρέπει να αλλάζουμε μέσα στη βάση των δεδομένων μας ( με phpmyadmin ) στο table wp_posts το URL που αντικαθιστά την παλιά address με την νέα, με το παρακάτω SQL query

UPDATE wp_posts SET post_content = REPLACE(post_content,
 'http://www.domainname.com/wp-content/uploads/','http://static.domainname.com/uploads/')

Click στα images για να τα δείτε μεγαλύτερα..

Τρόπος 2ος

Χρησιμοποιούμε ένα CDN plugin, όπως το CDN Enabler και ορίζουμε ως CDN URL το https://static.selidamou.gr

Εναλλακτικά, μπορείτε να το κάνετε επίσης και από κάποιο cache plugin που υποστηρίζει CDN (Litespeed cache, W3Total cache, WP Rocket cache)

Τελειώσαμε; Σχεδόν!

Παραμετροποίηση του κώδικα του Analytics account

Χρησιμοποιείτε Google Analytics; Ο κώδικας πρέπει να αλλάξει από auto στο domain σας

Ρυθμίσεις μέσα στο Analytics account

Ανοίγετε τη σελίδα https://analytics.google.com
Ανοίγετε την σελίδα και πάτε στο ‘Admin’ menu
Στην ενότητα ‘Property’ -> ‘Property Settings’ δείτε το ‘Property Name’ και ‘Default URL’ να περιέχουν το www. μέρος της σελίδας σας.
Μετά πάτε στο ‘View’ -> ‘View Settings’ και αλλάξτε και εκεί τη διεύθυνση στη σελίδας ‘Website’s URL’

Μήπως να το πούμε και στο Google?

Αν χρησιμοποιείτε το YOAST plugin, βάλτε το παρακάτω στο wp-config ή καλύτερα μέσω του code snippets

function wpseo_cdn_filter( $uri ) {
	return str_replace( 'https://www.selidamou.gr', 'https://static.selidamou.gr', $uri );
}
add_filter( 'wpseo_xml_sitemap_img_src', 'wpseo_cdn_filter' );

Δεν πιστεύω να χρησιμοποιείτε και Font awesome?

Αν χρησιμοποιείτε τα Font Awesome, όπως όλοι εμείς οι υπόλοιποι.. βάλτε το παρακάτω μέσα στο .htaccess σας.

## EXPIRES CACHING ##

# ------------------------------------------------------------------------------
# | CORS-enabled images |
# ------------------------------------------------------------------------------

        
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "https://www.selidamou.gr" env=IS_CORS
        

# ------------------------------------------------------------------------------
# | Web fonts access |
# ------------------------------------------------------------------------------

# Allow access from all domains for web fonts

    
        Header set Access-Control-Allow-Origin "https://www.selidamou.gr"

Πως να επιταχύνετέ την wordpress ιστοσελιδα σας

Web-Design — Wed, 21 Feb 2018 09:56:51 +0000

Πριν ξεκινήσουμε να απαντήσουμε στην ερώτηση, τι πρέπει να κάνετε για τη σελίδα σας ώστε να είναι γρήγορη, θα πρέπει να απαντήσουμε σε κάποιες ερωτήσεις.

Γιατί η ταχύτητα της ιστοσελίδας είναι σημαντική

Όλος ο κόσμος μέσα από ένα κινητό

Φορητές συσκευές όπως τα tablet και τα κινητά γίνονται ο πιο συνηθισμένος τρόπος για να περιηγηθείς στο internet. Καθημερινές συνήθειες όπως το surfing, το email, τα social media γίνονται πλέον μέσα από κινητές συσκευές, αφήνοντας τον υπολογιστή για πιο πολύπλοκα πράγματα. Σύμφωνα με την Gartner ως το 2018, περισσότεροι από το 50% των χρηστών θα περιηγούνται μέσα από κινητές συσκευές. Αυτό έχει ως αποτέλεσμα η ταχύτητα να είναι ολοένα και πιο σημαντική.

Οι χρήστες σας απλά δεν έχουν την υπομονή

Σχεδόν οι μισοί χρήστες του internet περιμένουν μία σελίδα να φορτώσει λιγότερο από 2 δευτερόλεπτα. Οι περισσότεροι νιώθουν λίγο ανυπόμονοι στα 3 δευτερόλεπτα και κάπου στα 5 βλέπουμε ένα μεγάλο ποσοστό χρηστών να εγκαταλείπουν μία σελίδα.

Η ταχύτητα μιας ιστοσελίδας είναι ακόμα πιο σημαντική για τα ηλεκτρονικά καταστήματα. Σύμφωνα με την εταιρία kissmetrics αν ένα eshop βγάζει 100.000 την ημέρα, μία αργοπορία ενός δευτερολέπτου μπορεί να στοιχίσει 2,5 εκατομμύρια στις ετήσιες πωλήσεις.

Το Google περιλαμβάνει την ταχύτητα μιας ιστοσελίδας στον αλγόριθμο του

Από το 2010 η Google μετράει την ταχύτητα ως ένα σημαντικό παράγοντα στην ποιότητα της ιστοσελίδας. Οι ιστοσελίδες που φορτώνουν πιο γρήγορα, είναι πιο πάνω στα αποτελέσματα αναζήτησης. Αυτό σημαίνει ότι η ταχύτητα πρέπει να είναι ένας από τους κύριους παράγοντες όταν εφαρμόζετε τεχνικές SEO. Το Google έχει δικό του εργαλείο για να κάνει έλεγχο στην ταχύτητα της ιστοσελίδας σας. Μπορείτε να το βρείτε χρησιμοποιώντας το PageSpeed Insights.

Εκτιμώντας την ταχύτητα στην ιστοσελίδα σας

Πόσος χρόνος χρειάζεται για το πρώτο byte

Αυτό είναι ο χρόνος που χρειάζεται ο server για να αρχίσει να προβάλει την ιστοσελίδα σας. Αν ο χρόνος απόκρισης είναι πάνω από 200 milliseconds, τότε ίσως υπάρχει πρόβλημα στο setup του server , έχει χαμηλά resources ή έχει πολλά άτομα. Ακόμα και προβλήματα με τα θέματα ή τα plugin μπορεί να προκαλέσουν προβλήματα με την ταχύτητα, οπότε δεν είναι πάντα πρόβλημα από τον server.

Τι είναι το caching?

Το caching είναι η διαδικασία που τα στατικά στοιχεία, όπως το HTML, οι εικόνες, κώδικας javascript, css κ.α. αποθηκεύονται σε ένα χώρο πιο εύκολα προσβάσιμο, όπως η μνήμη του υπολογιστή. Όταν αυτά τα αρχεία ζητηθούν, ο server τα φορτώνει πιο γρήγορα. Όταν ζητηθούν τα αρχεία από έναν δεύτερο χρήστη, φορτώνει πάλι τα αρχεία από το cache με αποτέλεσμα να έχει γρηγορότερη απόκριση.

Τι είναι το minifying

To minifying είναι η διαδικασία ελαχιστοποίησης αρχείων javsacript και css. Μπορούν να μπουν πολλά αρχεία σε ένα, όποτε αντί να χρειάζονται να ανοιχτούν 16 αρχεία, ο server ανοίγει μόνο ένα. Αυτό ελαχιστοποιεί την διεργασία του server και μπορεί να αυξήσει την ταχύτητα. (Το minifying γίνεται με τα αρχεία javascript αλλα και τα CSS).

Πως να αυξήσετε την ταχύτητα στην ιστοσελίδα σας

Η φιλοξενία

Η επιλογή ενός server για την φιλοξενία της σελίδας σας είναι μία από τις κυριότερες αποφάσεις που πρέπει να ληφθούν. Υπάρχει το shared hosting που κυμαίνεται σε χαμηλές τιμές και είναι για μικρής κυκλοφορίας ιστοσελίδες, αλλά και το dedicated για υψηλότερες απαιτήσεις. Μπορείτε να δείτε τα πακέτα που προσφέρουμε στο παρακάτω link. Πακέτα φιλοξενίας

Η σημασία ενός premium template

Το θέμα που θα χρησιμοποιήσετε είναι η ραχοκοκκαλιά της ιστοσελίδας σας. Οπότε η επιλογή του σωστού θέματος είναι σημαντικό για την χρηστικότητα αλλά και την ταχύτητα της ιστοσελίδας. Ουσιαστικά ο τρόπος που έχει γραφτεί ο κώδικας της ιστοσελίδας κάνει την διαφορά.

Όσο αφορά τα plugins

Πρέπει να θεωρείτε ότι όσο λιγότερα τόσο καλύτερα. Ο λόγος είναι απλός, κάθε παραπάνω plugin, θέλει παραπάνω μνήμη, χώρο και ακόμα πιο σημαντικό θεωρείται μια έξτρα πιθανότητα για έναν hacker να μπει στην ιστοσελίδα σας. Τα plugin που χρησιμοποιείτε πρέπει να είναι από γνωστές εταιρίες και αυθεντικά.

Αν δεν χρησιμοποιείτε κάποιο plugin διαγράψτε το. Μπορείτε να δείτε την μνήμη που χρησιμοποιούν τα plugin σας με το P3 plugin.

Χρησιμοποιείστε ένα CDN

Με το CDN τα στατικά αρχεία σας αποθηκεύονται σε server σε όλο τον κόσμο. Όταν ένας χρήστης συνδέεται στην ιστοσελίδα σας, τα αρχεία αυτά φορτώνουν από τον κοντινότερο σε αυτόν προορισμό. Με τη χρήση ενός CDN μπορείτε να αυξήσετε την ταχύτητα σε μεγάλο βαθμό. Μια καλή επιλογή είναι το MaxCDN.

Χρησιμοποιήστε ένα plugin για caching

Το caching μπορεί να αυξήσει την ταχύτητα της ιστοσελίδας σας δραστικά. Αποθηκεύει τα στατικά αρχεία σας, ώστε να τα δίνει γρηγορότερα όταν αυτά ζητηθούν. Ένα πολύ καλό plugin για αυτό είναι το W3 Total Cache. Με αυτό το plugin μπορείτε συγχρόνως να κάνετε και minifying. Θα σας συμβούλευα να έχετε την βάση σας ένα backup πριν ασχοληθείτε με οποιοδήποτε plugin για το cache.

Βελτιστοποίηση της βάσης δεδομένων

Πρώτα από όλα κάνουμε backup!
Εφόσον η βάση είναι η ψυχή της ιστοσελίδας μας, θα πρέπει να την ελαφρύνουμε όσο μπορούμε. Αυτό μπορεί να γίνει με τον εύκολο (plugin) ή το δύσκολο τρόπο αν έχετε κάποιες γνώσεις (phpadmin).
Δύο plugin που μπορείτε να δοκιμάσετε είναι το wp-optimize ή το better delete revision.

Βελτιστοποίηση των εικόνων σας

Καλό θα ήταν να προσπαθήσετε να ελαττώσετε το μέγεθος από τις εικόνες σας πριν τις ανεβάσετε στην σελίδα σας. Αυτό μπορεί να επιτευχθεί με το Adobe Photoshop ή κάποιο παρόμοιο πρόγραμμα. Σε περίπτωση που δεν έχετε κάποιο photo editing πρόγραμμα, ένα πολύ καλό, online και δωρεάν πρόγραμμα που προτείνω είναι το Pixlr Express. Αν οι εικόνες έχουν μόνο γραφικά, προτείνω να τις μετατρέψετε σε .jpg και αν υπάρχει και κείμενο πάνω στην εικόνα σε .png.
Υπάρχει φυσικά και η δυνατότητα να κάνετε μια βελτιστοποίηση στις εικόνες που έχετε ήδη ανεβάσει ή να γίνεται αυτόματα όταν ανεβαίνει η φωτογραφία. Ένα τέτοιο Plugin είναι το wp Smush.

Απενεργοποιήστε το Hot Linking

Το Hot Linking είναι η διαδικασία όταν οι εικόνες σας χρησιμοποιούνται και φορτώνονται από τον δικό σας web server, από μια άλλη σελίδα!
Όχι απλά κλέβουν την εικόνα σας, αλλά κλέβουν και τα resources του web server σας. Για να το κάνετε αυτό, πρέπει να αλλάξετε το .htaccess αρχείο σας.
(Συνιστάτε να έχετε backup από το αρχείο πριν το αλλάξετε!)

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www.)?your-domain.com/.*$ [NC] RewriteRule .(gif|jpe?g|png)$ - [F]

Ημερομηνία λήξης στα στατικά στοιχεία

Τα στατικά στοιχεία της σελίδας αποθηκεύονται στο cache. Είναι καλή τεχνική να βάλουμε μια ημερομηνία λήξης, που μετρά το χρόνο πριν το στοιχείο χρειαστεί να ξανά πάει στην μνήμη cache. Για να το κάνετε αυτό, πρέπει να αλλάξετε το .htaccess αρχείο σας.
(Συνιστάτε να έχετε backup από το αρχείο πριν το αλλάξετε!)

ExpiresActive On ExpiresByType image/gif A604800 ExpiresByType image/png A604800 ExpiresByType image/jpg A604800 ExpiresByType image/jpeg A604800

Lazyload για τις εικόνες

Το Lazyload είναι όταν η σελίδα φορτώνει μόνο τις εικόνες που βλέπει ο χρήστης. Οι υπόλοιπες εικόνες φορτώνονται καθώς ο χρήστης κατεβαίνει προς τα κάτω στην σελίδα. Αυτό μπορείτε να το επιτύχετε με ένα από τα δύο ακόλουθα plugin.
jQuery Image Lazy Load
BJ Lazy Load

Μοιραστείτε μαζί μας τις δικές σας τεχνικές βελτιστοποίησης.

Web-Design

Μεγάλη βάση δεδομένων? Βρείτε τι σας φουσκώνει τη βάση

Web-Design — Fri, 03 Mar 2017 21:37:13 +0000

CMS και βάσεις δεδομένων. Χαμός! Έχουν βγει στην αγορά πλέον ίσως too many frameworks. Πάρα πολλά για να επικεντρωθείς σε κάποιο. Όλοι κάνουμε τις επιλογές μας. Εγώ έχω επιλέξει τη πλατφόρμα της wordpress για πολλούς λόγους. Παρόλα αυτά, μερικές φορές το μέγεθος της βάσης σας μπορεί να ξεφύγει και να αναρωτηθείτε γιατί και πως. Μου έτυχε μία περίπτωση τελευταία στον server που φιλοξενώ ιστοσελίδες (φιλοξενία ιστοσελίδων selidamou.gr) να έχει γίνει μία εγκατάσταση drupal. Η βάση δεδομένων πάνω από 700-800 mb. Ο developer επικοινώνησε και με ρωτούσε τι έχω κάνει, τι παράξενο έχει ο server και διάφορα άλλα (για εμένα) αβάσιμα πραγματάκια.

Δεν έχει σημασία. Το μόνο πράγμα που πρέπει να θυμάστε! Βαθιές αναπνοές και ήρεμη σκέψη. Για να βοηθήσω με την παρακάτω εντολή μπορείτε να βρείτε μέσα από το phpmyadmin το μέγεθος του κάθε table στην βάση σας. Ο συγκεκριμένος developer τελικά είχε πρόβλημα από τα πρόσθετα που είχε βάλει στη σελίδα του (cache plugin)

Η εντολή γυρνάει όλα τα tables από το μεγαλύτερο σε MB προς το μικρότερο για να κάνετε το δικό σας debugging.

SELECT 
     table_schema as`Database`, 
     table_name AS`Table`, 
     round(((data_length + index_length)/1024/1024),2)`Size in MB`FROM information_schema.TABLES 
ORDERBY(data_length + index_length)DESC;

Για κατασκευή ιστοσελίδων ή ότι άλλο τεχνικό θέμα, μπορείτε να με βρείτε στο selidamou.gr