Marketing Περιεχόμενο

Πώς να φορτώσετε τις γραμματοσειρές Adobe (Typekit) πιο γρήγορα με JavaScript

Καθώς προσπαθώ να βελτιώσω την απόδοση του ιστότοπού μου, ένας τομέας με ενδιαφέρον είναι η φόρτωση των προσαρμοσμένων γραμματοσειρών που χρησιμοποιώ μέσω του Adobe Fonts από Adobe Creative Cloud (γνωστό και ως TypeKit). Εάν θέλετε να φορτώσετε γραμματοσειρές, υπάρχουν αρκετοί τρόποι:

  • Γραμματοσειρές ασφαλείς για πρόγραμμα περιήγησης: Αποφεύγοντας τη χρήση οποιωνδήποτε προσαρμοσμένων γραμματοσειρών και, αντ' αυτού, χρησιμοποιώντας τις προεπιλεγμένες γραμματοσειρές που υποστηρίζονται από το πρόγραμμα περιήγησης, μπορείτε να αυξήσετε δραματικά την ταχύτητα ενός ιστότοπου. Αν και αυτό μπορεί να φαίνεται ως επιλογή, η συνολική αισθητική θα ήταν φρικτή. Δεν είναι ρεαλιστική επιλογή για τις περισσότερες εταιρείες, καθώς περιορίζεστε σε Arial, Helvetica, Times New Roman, Georgia και Courier New.
  • Γραμματοσειρές Self Hosting: Μπορείτε να αγοράσετε μια άδεια χρήσης για τις γραμματοσειρές και να τις φορτώσετε στον διακομιστή σας. Υπάρχει επίσης πρόσθετη ανάπτυξη που μπορεί να γίνει, ώστε να φορτώνονται γρηγορότερα… αλλά φαίνεται ότι έχει αρκετή δουλειά.
  • Φιλοξενούμενες γραμματοσειρές: Οι περισσότεροι σχεδιαστές ιστοσελίδων χρησιμοποιούν φιλοξενούμενες βιβλιοθήκες όπου μπορείτε να δημιουργήσετε ένα πακέτο γραμματοσειρών και να αναπτύξετε κώδικα για αναφορά και εμφάνιση στον ιστότοπό σας με ένα γρήγορο απόσπασμα κώδικα. Οι δύο βασικοί παίκτες σε αυτήν την αγορά είναι η Adobe και Google Γραμματοσειρές. Πολλά CMS Οι πλατφόρμες ενσωματώνουν τη λειτουργικότητα για να τις συμπεριλάβουν.

Οι γραμματοσειρές Adobe

Με το Adobe Fonts, επιλέγετε τις γραμματοσειρές που θέλετε να εμφανίζονται στον ιστότοπό σας και, στη συνέχεια, δημιουργείτε ένα έργο με αυτές. Μια κρίσιμη πτυχή εδώ είναι να φορτώσετε μόνο τις γραμματοσειρές που θέλετε να χρησιμοποιήσετε σε ολόκληρο τον ιστότοπό σας και όχι περισσότερο… όσο περισσότερες γραμματοσειρές και στυλ επιλέξετε, τόσο πιο αργός θα είναι ο ιστότοπός σας.

έργο γραμματοσειρών adobe martech zone

Σημειώστε πώς το αναγνωριστικό έργου (xxxxxx) χρησιμοποιείται σε καθένα από τα παραδείγματα κώδικα. Εάν θέλετε να χρησιμοποιήσετε αυτόν τον κωδικό, φροντίστε απλώς να αντικαταστήσετε το αναγνωριστικό έργου με το αναγνωριστικό του έργου σας, διαφορετικά δεν θα λειτουργήσει. Όπως μπορείτε να δείτε, το προεπιλεγμένο σενάριο που παρέχεται για τη φόρτωση των γραμματοσειρών είναι:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

Δυστυχώς, το Adobe Fonts δεν παρέχει καλύτερη επιλογή για τη φόρτωση των γραμματοσειρών σας… παρόλο που υπάρχει. Ο ακόλουθος κώδικας JavaScript παλαιού τύπου παρέχεται με την Adobe να είναι ταχύτερος από τη φόρτωση γραμματοσειρών μέσω CSS για μερικούς λόγους:

  1. Ο κώδικας JavaScript χρησιμοποιεί ασύγχρονη φόρτωση, που σημαίνει ότι το πρόγραμμα περιήγησης μπορεί να συνεχίσει τη φόρτωση της σελίδας κατά την ανάκτηση του σεναρίου. Αντίθετα, όταν φορτώνετε γραμματοσειρές μέσω CSS, το πρόγραμμα περιήγησης πρέπει να περιμένει να ληφθεί και να αναλυθεί το αρχείο CSS για να ξεκινήσει η φόρτωση των γραμματοσειρών. Αυτό μπορεί να οδηγήσει σε καθυστέρηση στη φόρτωση της γραμματοσειράς και σε πιο αργούς χρόνους φόρτωσης της σελίδας.
  2. Ο κώδικας JavaScript χρησιμοποιεί το Πρόγραμμα φόρτωσης γραμματοσειρών ιστού Typekit, το οποίο παρέχει πρόσθετη λειτουργικότητα για τη φόρτωση γραμματοσειρών. Για παράδειγμα, το πρόγραμμα φόρτωσης γραμματοσειρών Ιστού μπορεί να εντοπίσει εάν το πρόγραμμα περιήγησης υποστηρίζει το @font-face κανόνα και μπορεί να αποφύγει την άσκοπη φόρτωση γραμματοσειρών σε προγράμματα περιήγησης που δεν υποστηρίζουν
    @font-face. Μπορεί επίσης να παρέχει καλύτερη απόδοση φόρτωσης γραμματοσειρών και βελτιωμένη απόδοση γραμματοσειράς.
  3. Η μέθοδος CSS απαιτεί ένα πρόσθετο HTTP αίτημα για λήψη του αρχείου CSS, ενώ ο κώδικας JavaScript είναι αυτόνομος και δεν απαιτεί πρόσθετα αρχεία να παραληφθεί. Αυτό μπορεί να οδηγήσει σε ελαφρώς ταχύτερους χρόνους φόρτωσης για τον κώδικα JavaScript.

Συνολικά, η χρήση αυτής της μεθόδου JavaScript παλαιού τύπου για τη φόρτωση γραμματοσειρών Typekit μπορεί να οδηγήσει σε ταχύτερη και πιο αξιόπιστη φόρτωση γραμματοσειρών από τη χρήση της μεθόδου CSS.

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

Εάν εκτελείτε έναν ιστότοπο WordPress, μπορείτε επίσης να ενημερώσετε το αρχείο functions.php για να φορτώσετε το έργο σας:

add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
	wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <?php }
}

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

Douglas Karr

Douglas Karr είναι ΚΟΑ του OpenINSIGHTS και ο ιδρυτής του Martech Zone. Ο Ντάγκλας έχει βοηθήσει δεκάδες επιτυχημένες νεοφυείς επιχειρήσεις της MarTech, έχει βοηθήσει στη δέουσα επιμέλεια άνω των 5 δισεκατομμυρίων δολαρίων σε εξαγορές και επενδύσεις της Martech και συνεχίζει να βοηθά τις εταιρείες στην εφαρμογή και την αυτοματοποίηση των στρατηγικών πωλήσεων και μάρκετινγκ. Ο Ντάγκλας είναι ένας διεθνώς αναγνωρισμένος ειδικός και ομιλητής στον ψηφιακό μετασχηματισμό και στη MarTech. Ο Ντάγκλας είναι επίσης δημοσιευμένος συγγραφέας ενός οδηγού Dummie και ενός βιβλίου επιχειρηματικής ηγεσίας.

Σχετικά άρθρα

Επιστροφή στην κορυφή κουμπί
Κλεισιμο

Εντοπίστηκε μπλοκ διαφημίσεων

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