Leider wird bei Page Speed nicht darauf hingewiesen. CDN Content Delivery Networks helfen ebenfalls bei der Webdesign Performance. Bei heutigen modernen Parallax Seiten, die viele Effekte nutzen, macht es allerdings durchaus Sinn.
CDN Content Delivery Network Webdesign Performance
Um CDN Content Delivery Network für Webdesign Performance zu nutzen ist es wichtig zu verstehen, was hier passiert. Bekannte Webtechnik Libraries, wie jQuery werden direkt von jQuery gehostet und zur Verfügung gestellt. Eine Übersicht gibt es auf https://code.jquery.com/.
Vorteile CDN Content Delivery Network Webdesign Performance
Von den bekannten CDN ist eine viel bessere Ladezeit zu erwarten, als es beim eignen Webhosting möglich ist. Dazu spart man natürlich auch wieder ein wenig persönliche Bandbreite. Das wichtigste aber ist, wenn ein User mit seinem Browser bereits auf einer anderen Seite war, wo z.B. jQuery von einem CDN geladen wurde, muß es nicht mehr geladen oder interpretiert werden. Das passiert beim eigenen Webserver leider. Dadurch steigt natürlich auch die gesamte Lade- bzw. Interpretationszeit.
CDN Content Delivery Network richtig einbinden
Nehmen wir als Beispiel wieder meine Seite www.rolandgolla.de, die wir schon im Artikel über Bildoptimierung und Komprimierung aktivieren betrachtet haben. Grundsätzlich macht man die Einbindung am Anfang mit „//“ ohne die Angabe von http oder https. Dadurch werden beide Protokolle unterstützt. Vorausgesetzt das wird auch so im jweiligen CDN angeboten.
Hier nun die genutzten CDN Libraries auf www.rolandgolla.de
<link href=“http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Pathway+Gothic+One|PT+Sans+Narrow:400+700|Source+Sans+Pro:200,300,400,600,700,900&subset=all“ rel=“stylesheet“ type=“text/css“ />
<link href=“//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css“ rel=“stylesheet“ />
<link href=“//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css“ rel=“stylesheet“ />
<link href=“https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css“ rel=“stylesheet“ />
<script type=“text/javascript“ src=“https://code.jquery.com/jquery-1.11.2.min.js“></script>
<script type=“text/javascript“ src=“https://code.jquery.com/jquery-migrate-1.2.1.min.js“></script>
<script type=“text/javascript“ src=“//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js“></script>