ΨΗΦΙΑΚΑ ΝΕΑ ΕΜΠΟΡΙΑΣ

Google Fonts στο WordPress & Βελτίωση Ταχύτητας | PixelUp

[ad_1]

Σήμερα θα καλύψουμε μερικές μεθόδους για την βελτιστοποίηση και την επιτάχυνση των Google γραμματοσειρών στο WordPress. Οι εικόνες, βέβαια, είναι και πάντα θα είναι το βαρύτερο κομμάτι μιας ιστοσελίδας, αλλά σύμφωνα με το HTTP αρχείο , από τον Οκτώβριο του 2016 οι γραμματοσειρές στο web καταλαμβάνουν λίγο περισσότερο από το 3% του συνολικού βάρους μίας μέσης ιστοσελίδας.

Ακόμα κι αν το βάρος των γραμματοσειρών στο web αποτελεί μόνο ένα μικρό μέρος της συνολικής ιστοσελίδας, κάθε βελτιστοποίηση που κάνετε βοηθά και συμβάλει στην ταχύτερη σε χρόνους φόρτωση. Δείτε παρακάτω κάποιους τρόπους, για να επιταχύνετε αυτές τις γραμματοσειρές!

Τι είναι το Google Fonts;

Πρώτα απ ‘όλα, για όσους από εσάς ίσως δεν γνωρίζετε, το Google Fonts είναι ένας open source (δωρεάν) κατάλογος με πάνω από 800 οικογένειες γραμματοσειρών web που μπορείτε να χρησιμοποιήσετε στην ιστοσελίδα σας. Επίσης, είναι διαθέσιμα για να τα κατεβάσετε τοπικά για εκτύπωση και για άλλες χρήσεις. Εκατομμύρια ιστοσελίδες WordPress χρησιμοποιούν τις Google γραμματοσειρές καθώς είναι ένας δωρεάν τρόπος για να βελτιώσετε την εμφάνιση και την χρηστικότητα του site σας.

Είναι σημαντικό να κατανοήσουμε πώς η προσθήκη των Google fonts στο WordPress site σας, επηρεάζει την ταχύτητα και τις επιδόσεις του.

Πώς να χρησιμοποιήσετε τις γραμματοσειρές Google στο WordPress.

Υπάρχουν δύο τρόποι για να προσθέσετε γραμματοσειρές Google στο WordPress site σας. Η πρώτη μέθοδος είναι να τις τραβήξετε απευθείας από την Google. Αυτή η μέθοδος χρησιμοποιεί την παγκόσμια CDN τους για να παραδώσει τις γραμματοσειρές γρήγορα από διαφορετικούς servers από όλο τον κόσμο.

Όταν τα προσθέσετε στο site σας, θα υπάρξει ένα εξωτερικό αίτημα fonts.googleapis.com.

Ή είναι επίσης εξωτερικές αιτήσεις fonts.gstatic.com για τις εκδόσεις WOFF ή WOFF2 ανάλογα με την υποστήριξη του προγράμματος περιήγησης.

WordPress Plugin.

Εάν είστε αρχάριος στο WordPress, ο ευκολότερος τρόπος για να προσθέσετε τις γραμματοσειρές Google στον ιστότοπο σας είναι με ένα δωρεάν plugin.
To Easy Google Γραμματοσειρές plugin είναι μία καλή και δημοφιλής περίπτωση. Έχει σήμερα πάνω από 300.000 ενεργές εγκαταστάσεις με βαθμολογία 4,9 στα 5 αστέρια.

Προσθέστε Κώδικα από το Google Fonts.

Είναι σημαντικό να σημειωθεί ότι τα περισσότερα plugins WordPress προσθέτουν μικρή επιβάρυνση στο site σας, εναλλακτικά μπορείτε να προσθέσετε τις Google γραμματοσειρές με πολύ πιο απλό τρόπο δηλαδή να χρησιμοποιήσετε κώδικα ενσωμάτωσης. Έτσι, στο <head> του wesbite σας προσθέστε τον κώδικα που σας δίνει η Google, ένα παράδειγμα είναι η γραμματοσειρά Roboto.

Κάντε κλικ στην » Customize επιλογή».

Σημείωση: Για κάθε στοιχείο που προσθέτετε αυξάνετε και ο συνολικό χρόνος φόρτωσης, για τον λόγο αυτό όσο λιγότερα επιλέξετε τόσο το καλύτερο.

Στη συνέχεια, κάντε κλικ στο » EMBED». Για να αντιγράψετε τον ενσωματωμένο κώδικα που παρέχει.

Πάρτε αυτόν τον κώδικα και τοποθετήστε τον στο <head>τμήμα του WordPress site σας. Υπάρχουν διάφοροι τρόποι που μπορείτε να το κάνετε αυτό, ορισμένοι μπορεί να προτιμούν enqueue τις γραμματοσειρές, αλλά για αυτό το παράδειγμα θέλουμε απλή επικόλληση του κώδικα στο header.php. Σημείωση: Αυτό μπορεί να διαφέρει ανάλογα με το θέμα που χρησιμοποιείτε.

Στη συνέχεια, μπορείτε να προσθέσετε κάποια στυλ CSS. Παρακάτω είναι ένα παράδειγμα. Αν ο πίνακας στο admin σας δεν διαθέτει έναν επεξεργαστή για προσαρμοσμένο CSS μπορείτε πάντα να χρησιμοποιήσετε ένα δωρεάν plugin όπως Custom CSS και JS .

body {font-family:roboto; font-size:18px;}
h1,h2,h3,h4,h5,h6 {font-family:roboto; font-weight:700; text-transform:none !important;}
h1 {font-size:28px;}
h2 {font-size:26px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:18px;}
h6 {font-size:16px;}

Τώρα που ξέρετε μερικές γρήγορες μεθόδους για την προσθήκη Google Fonts στο WordPress site σας, δείτε εναλλακτικούς τρόπους για την επιτάχυνση τους.

Φιλοξενήστε τα Google Fonts στον server σας.

Αν το κοινό σας είναι σε μια συγκεκριμένη γεωγραφική περιοχή και κοντά στον κεντρικό υπολογιστή σας, μπορεί πραγματικά να είναι πιο γρήγορα για να τους φιλοξενήσει σε τοπικό επίπεδο από ότι είναι να χρησιμοποιήσετε το Google Fonts. To Google Fonts CDN είναι πολύ καλό, αλλά η προσθήκη αυτών των πρόσθετων εξωτερικών αιτήματων και οι αιτήσεις DNS μπορεί να προκαλέσουν καθυστερήσεις.

Αυτή η μέθοδος θα λειτουργήσει κατά κανόνα μόνο εάν χρησιμοποιείτε γρήγορη φιλοξενία.

Για να φιλοξενήσετε τοπικά γραμματοσειρές ένα δωρεάν εργαλείο είναι το google-webfonts-helper . Αυτό σας επιτρέπει να κατεβάσετε τις γραμματοσειρές Google τοπικά πιο εύκολα και σας δίνει όλα τα CSS. Παρακάτω είναι ένα παράδειγμα. Θα χρειαστεί να φορτώσετε τις γραμματοσειρές που κατεβάσατε στο web server σας.

Παράδειγμα.

/* roboto-regular – latin */

@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’),
url(‘https:/perfmatters.io/fonts/roboto-v15-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://perfmatters.io/fonts/roboto-v15-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 – latin */
@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 500;
src: local(‘Roboto Medium’), local(‘Roboto-Medium’),
url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://perfmatters.io/fonts/roboto-v15-latin-500.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 – latin */
@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 700;
src: local(‘Roboto Bold’), local(‘Roboto-Bold’),
url(‘https:/perfmatters.io/fonts/roboto-v15-latin-700.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://perfmatters.io/fonts/roboto-v15-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Φιλοξενήστε τα Google Fonts στο δικό σας CDN.

Από την παραπάνω ιστοσελίδα, χρησιμοποιούμε έναν CDN provider ( KeyCDN ) για να φιλοξενήσει όλα τα άλλα περιουσιακά στοιχεία (εικόνες, CSS, Javascript, κλπ). Τι θα συμβεί αν τώρα ρίξει τις γραμματοσειρές μας στην ίδια CDN, αντί του CDN της Google;

Χρησιμοποιώντας το δωρεάν CDN Enabler WordPress plugin. Αντιγράφει τα fonts από το φάκελο «fonts» στον web server σε KeyCDN αυτόματα. Στη συνέχεια πρέπει να φτιάξουμε λίγο τον κώδικα έτσι ώστε η διαδρομή προς τα fonts τώρα να δείχνει προς το CDN (όπως cdn.domain.com).
/* roboto-regular – latin */

@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’),
url(‘https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://cdn.perfmatters.io/fonts/roboto-v15-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 – latin */
@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 500;
src: local(‘Roboto Medium’), local(‘Roboto-Medium’),
url(‘https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://cdn.perfmatters.io/fonts/roboto-v15-latin-500.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 – latin */
@font–face {
font–family: ‘Roboto’;
font–style: normal;
font–weight: 700;
src: local(‘Roboto Bold’), local(‘Roboto-Bold’),
url(‘https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘https://cdn.perfmatters.io/fonts/roboto-v15-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

Η ταχύτητα είναι πιο γρήγορη.
Φυσικά η ταχύτητα γενικά επηρεάζεται από τον server που χρησιμοποιείτε αλλά και τις επιλογές που κάνετε στην επιλογή γραμματοσειράς (italic, normal, κτλ.) όσο πιο λίγα τόσο και πιο γρήγορα.

[ad_2]

Source link