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

March 27, 2018
Web-Design
Problem solving

Είναι και αυτές οι σελίδες που μετράνε την ταχύτητα της ιστοσελίδας μας (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 για να τα δείτε μεγαλύτερα..

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 σας

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-1', 'www.selidamou.gr');
  ga('send', 'pageview');
  ga('set', 'displayFeaturesTask', null);

</script>

Ρυθμίσεις μέσα στο 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 |
# ------------------------------------------------------------------------------

        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "https://www.selidamou.gr" env=IS_CORS
        </FilesMatch>

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

# Allow access from all domains for web fonts

    <FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "https://www.selidamou.gr"
    </FilesMatch>

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

Serve static content from a cookieless domain in wordpress

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

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

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

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

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

Μοιραστείτε το με τους Φίλους σας

Web-Design

Related Posts