Front-End-Leistung Teil 3 - Schriftoptimierung

Ursprünglicher Autor: Jared Hirsch
  • Übersetzung
  • Tutorial
Von einem Übersetzer: Dies ist der achte Artikel in der Node.js-Reihe des Mozilla Identity-Teams, das am Persona- Projekt beteiligt ist .





Wir konnten die Schriftgröße für Persona mithilfe von Teilmengen von Schriftarten um 85% von 300 auf 45 Kilobyte reduzieren. In diesem Artikel erfahren Sie genau, wie wir dies getan haben und welche Tools wir verwendet haben.

Vorstellung von Connect-Fonts


Connect-Fonts ist eine Middleware für Connect, die die Leistung verbessert, @font-faceindem Teilmengen von Schriftarten verteilt werden, die speziell auf ihre Sprache zugeschnitten sind, wodurch ihre Größe verringert wird. Connect-fonts generiert auch länderspezifische @font-faceund browserspezifische Stile sowie CORS-Header für Firefox und IE9 +. Zum Verteilen von Schriftarten-Teilmengen werden sogenannte Font-Packs erstellt - Unterverzeichnisse mit Schriftarten-Teilmengen und einer einfachen JSON-Konfigurationsdatei. Einige gängige Open-Source-Schriftsätze sind fertig im npm-Paket enthalten. Es ist jedoch nicht schwierig, eigene Pakete zu erstellen.

Wenn Sie mit Schriften im Internet nicht so gut umgehen können, haben wir eine kleine Sammlung verwandter Links zusammengestellt @font-face. [Vom Übersetzer: und auf Habré ist der Artikel über die Leistung von Webfonts sehr nützlich. ]

Statisches und dynamisches Laden von Schriftarten


Wenn Sie einfach eine große Schriftartdatei an alle Benutzer weitergeben, ist alles ganz einfach:

  1. Schreiben Sie einen Block @font-facein Ihre CSS-Datei.
  2. Generieren Sie Zeichensatzdateien für das Web aus der Quelle in TTF oder OTF und legen Sie sie in einem Verzeichnis ab, auf das der Webserver Zugriff hat.
  3. Konfigurieren Sie CORS-Header, wenn Sie auf Zeichensätze aus einer anderen Domäne verweisen, da für Zeichensätze dieselbe Quellrichtlinie von Firefox und IE9 + gilt.

Das sind einfache Schritte. Die ersten beiden können zum Beispiel mit FontSquirrel , einem Online-Font-Generator, der automatisch Font-Dateien und CSS-Code erstellt, noch einfacher gestaltet werden. Um CORS-Header hinzuzufügen, müssen Sie die Apache- oder Nginx-Dokumentation lesen, was jedoch nicht allzu schwierig ist.

Wenn Sie jedoch Teilmengen von Schriftarten voll ausnutzen möchten, werden die Dinge kompliziert. Sie benötigen separate Schriftartdateien für jedes Gebietsschema und müssen die Deklarationen dynamisch so ändern @font-face, dass sie auf die richtigen URLs verweisen. Sie müssen sich auch mit CORS befassen. Diese Probleme löst connect-fonts.

Font Subsets: Ein Überblick


Standardmäßig enthält jede Schriftart viele Zeichen - das lateinische Alphabet, diakritische Zeichen für Sprachen wie Französisch oder Deutsch, zusätzliche Alphabete wie Griechisch oder Kyrillisch. Viele Schriftarten enthalten auch Zeichen, insbesondere wenn sie Unicode unterstützen (z. B. ein Schneemann-Zeichen -) Es gibt auch Schriftarten mit Unterstützung für Hieroglyphen. All dies ist in der Schriftartdatei enthalten, so dass es für ein möglichst breites Publikum nützlich ist. Diese Flexibilität führt zu großen Dateien. Microsoft Arial Unicode, das alle Uncode 2.1-Zeichen enthält, wiegt unglaubliche 22 Megabyte!

Gleichzeitig verwendet eine typische Webseite eine Schriftart für eine bestimmte Aufgabe - Anzeigen von Inhalten, in der Regel in derselben Sprache und ohne exotische Zeichen. Indem wir die Schriftart auf diese kleine Teilmenge beschränken, können wir viel sparen.

Leistungssteigerungen bei der Verwendung von Teilmengen von Schriftarten


Vergleichen wir die Größe der vollständigen Dateien gängiger Schriftarten mit Teilmengen für verschiedene Gebietsschemata. Auch wenn Ihre Website nur in Englisch ausgeführt wird, können Sie durch die Ausgabe einer lokalisierten Teilmenge viel sparen.

Kleinere Schriftgrößen bedeuten ein schnelleres Laden und das Erscheinen von Schriftarten auf dem Bildschirm. Dies ist besonders wichtig für mobile Geräte. Wenn der Benutzer über eine 2G-Verbindung auf die Site zugreifen kann, kann die Reduzierung des Seitengewichts um 50 Kilobyte den Download um 2-3 Sekunden beschleunigen. Ein weiterer Punkt: Der Cache auf Mobilgeräten ist häufig klein, und eine kleine Schriftart kann länger verwendet werden.

Vergleich der vollständigen Open Sans Regular-Schriftgrößen mit Teilmengen für verschiedene Gebietsschemata:


Gleiches in gzip-komprimierter Form:


Selbst mit Komprimierung können Sie die Schriftgröße um 80% von 63 auf 13 Kilobyte reduzieren, wenn Sie nur die englische Teilmenge von Open Sans verwenden. Und dies ist nur eine Schriftart - die meisten Websites verwenden mehrere. Großes Optimierungspotential!

Mit Connect-Fonts haben wir bei Mozilla Persona eine Reduzierung von 85% von 300 auf 45 Kilobyte erreicht. Dies entspricht ein paar Sekunden Startzeit bei einer typischen 3G-Verbindung und einem Dutzend Sekunden bei 2G.

Weitere Optimierungen


Wenn Sie jedes zusätzliche Byte entfernen möchten, können Sie connect-fonts so konfigurieren, dass CSS nicht als Datei, sondern als Zeichenfolge zurückgegeben wird, die in die gemeinsam genutzte Datei aufgenommen werden kann. Darüber hinaus generiert connect-fonts standardmäßig eine minimale Deklaration, @font-faceohne Dateien in Formaten einzuschließen, die ein bestimmter Browser nicht akzeptiert.

Anwendungsbeispiel für Connect-Fonts


Angenommen, wir haben eine einfache Express-Anwendung, die dem Client die aktuelle Uhrzeit mitteilt:

// app.js
const
ejs = require('ejs'),
express = require('express'),
fs = require('fs');
var app = express.createServer(),
  tpl = fs.readFileSync(__dirname, '/tpl.ejs', 'utf8');
app.get('/time', function(req, res) {
  var output = ejs.render(tpl, {
    currentTime: new Date()
  });
  res.send(output);
});
app.listen(8765, '127.0.0.1');

mit der primitivsten Vorlage:

// tpl.ejs

the time is <%= currentTime %>


Wir werden Connect-Fonts verbinden, um eine lokalisierte Teilmenge von Open Sans zu rendern - eine von mehreren vorgefertigten Sets, die in den Paketen enthalten sind.

Anwendungsänderungen


Installieren Sie zunächst die erforderlichen Pakete:

 $ npm install connect-fonts
 $ npm install connect-fonts-opensans

Middleware verbinden:

 // app.js с изменениями для использования connect-fonts
 const
 ejs = require('ejs'),
 express = require('express'),
 fs = require('fs'),
 // добавлено:
 connect_fonts = require('connect-fonts'),
 opensans = require('connect-fonts-opensans');
 var app = express.createServer(),
   tpl = fs.readFileSync(__dirname, '/tpl.ejs', 'utf8');

Wir initialisieren das Modul:

// продолжение app.js 
// добавим этот вызов app.use:
app.use(connect_fonts.setup({
    fonts: [opensans],
    allow_origin: 'http://localhost:8765'
})

connect_fonts.setup() akzeptiert die folgenden Argumente:

  • fonts - Array der erforderlichen Schriftarten
  • allow_origin- die Quelle, aus der wir Schriften entnehmen; connect-fonts verwendet diese Informationen, um den Titel Access-Control-Allow-Originfür die Browser Firefox 3.5+ und IE9 + festzulegen.
  • ua(optional) - eine Liste von Benutzeragenten, denen wir Schriftarten geben. Standardmäßig bestimmt connect-fonts auf Anforderung den Benutzeragenten und entscheidet selbst, welche Dateiformate in die Deklaration aufgenommen werden sollen. Dieses Verhalten kann geändert werden, wenn es übergeben wird ua: 'all'- dann werden alle verfügbaren Formate eingeschlossen.

Innerhalb der Route müssen Sie das Gebietsschema an die Vorlage übergeben:

 // продолжение app.js
 app.get('/time', function(req, res) {
   var output = ejs.render(tpl, {
    // передаём локаль в шаблон:
    userLocale: detectLocale(req),
    currentTime: new Date()
   });
   res.send(output);
 });

Mozilla Persona verwendet i18n-abide , um das Gebietsschema zu bestimmen . Es gibt auch ein sehr gutes Sprachumgebungsmodul , das beide über npm verfügbar sind. Um das Beispiel nicht zu komplizieren, nehmen wir nur die ersten beiden Zeichen aus dem Abfragefeld Accept-language:

 // примитивное определение локали
 function detectLocale(req) {
   return req.headers['accept-language'].slice(0,2);
 }
 app.listen(8765, '127.0.0.1');
 // конец app.js

Vorlagenänderungen


Jetzt müssen Sie die Vorlage aktualisieren. Connect-fonts geht davon aus, dass Routen wie folgt geschrieben sind:

/:locale/:font-list/fonts.css

zum beispiel:

/fr/opensans-regular,opensans-italics/fonts.css

In unserem Fall müssen wir dem Stylesheet einen Link entlang des Pfads hinzufügen, den connect-fonts erwartet:

// tpl.ejs - изменения для connect-fonts


und fügen Sie dem Seitencode einen Schriftstil hinzu:

 // продолжение tpl.ejs
 

the time is <%= currentTime %>


Das ist alles. Das von connect-fonts generierte CSS hängt vom Gebietsschema und vom Browser des Benutzers ab. Hier ist ein Beispiel für ein englisches Gebietsschema:

 * это пример вывода при свойстве ua установленном в 'all' */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/en/opensans-regular.eot');
  src: local('Open Sans'),
       local('OpenSans'),
       url('/fonts/en/opensans-regular.eot#') format('embedded-opentype'),
       url('/fonts/en/opensans-regular.woff') format('woff'),
       url('/fonts/en/opensans-regular.ttf') format('truetype'),
       url('/fonts/en/opensans-regular.svg#Open Sans') format('svg');
}

Wenn Sie eine einzelne HTTP-Anforderung speichern möchten, können Sie die Methode verwenden connect_fonts.generate_css(), um den CSS-Code als Zeichenfolge abzurufen und in eine allgemeine CSS-Datei aufzunehmen.

Jetzt zeigt unsere kleine Anwendung die Zeit wunderschön. Der vollständige Quellcode ist bei Github erhältlich. Wir haben ein fertiges Font-Pack verwendet, aber es ist überhaupt nicht schwierig, ein eigenes zu erstellen. Die Anleitung befindet sich in Readme.

Herunterfahren


Teilmengen können für Websites, die Web-Schriftarten verwenden, sehr große Leistungssteigerungen bewirken. connect-fonts erledigt eine Menge Schriften in einer mehrsprachigen Anwendung. Auch wenn Ihre Site nur eine Sprache unterstützt, können Sie mit diesem Modul Zeichensätze auf das einzige von Ihnen benötigte Gebietsschema zuschneiden und automatisch CSS- und CORS-Header generieren. Dies erleichtert die spätere Internationalisierung.

Weitere Optimierungen können Hinweise für Plattformen enthalten, die dies nicht unterstützen (alle außer Windows), die automatische Komprimierung von Schriftarten und das Festlegen von Headern für das Caching.




Jetzt auch beliebt: