Auf der Startseite meiner Homepage NoSi.de sind zwei Ticker – von „Buoa.de“ und meinem Blog – eingebunden. Deren Aktualisierung kostet Zeit, weshalb die Anzeige der Seite verzögert ist war.
Das Konzept von Webseiten sind „Auszeichnungen“, die Bereiche umschließen. Der angezeigte Bereich wird mit einem <body>-Tag eingeleitet und mit dem Gegenstück </body> abgeschlossen. Mit dem zweiten Tag fällt für den Browser der Startschuss zur Anzeige des Inhalts. Denn jetzt hat er alles Nötige, damit sie so formatiert werden kann, wie es die einzelnen Bereiche und ihre Formatanweisungen aus CSS-Dateien vorgeben.
Weil die Verbindung zu Newsfeeds durch den Aufruf der externen Webadresse, laden der aktuellen Listen und deren Aufbereitung „dauert“, wartet der Browser mit der Anzeige der ganzen Seite, bis er alle Daten hat. Deshalb erscheint die Seite für den Besucher grottenlangsam – kein guter Einstand.
Diverse Seiten lösen das mit Javascript. Die angebotenen Varianten sehen alle „schlank“ aus, erfordern jedoch fast ausnahmslos umfangreiche Bibliotheken, allen voran „jQuery“. Deren Ladezeiten sind ebenfalls erheblich, im konkreten Fall brächte es nur einen sehr eingeschränkten Nutzen für einen einmaligen Anwendungsfall. Denn ein von mir sehr geschätzter Vorteil bei der Verwendung von Yellow ist, dass es schlank und deshalb von Haus aus schnell ist.
Lazy Load für den Ticker
Weil Newsfeeds üblicherweise sehr Datensparsam sind, sind die Gedanken zum „Lazy Load“ hier nutzlos. Der Weg kann nur über austricksen des Browsers gehen: Der soll die Seite aufbauen, während die Newsfeeds im Hintergrund geladen werden. Sobald sie „ready to show“ sind, müssen sie nur noch auf der Seite eingeblendet werden. Das klingt einfach, nach ein bisschen darüber nachdenken ist es das dann auch.
Die Startseite wird „zerlegt“: Der Ticker wird aus der Seite heraus genommen und auf eine eigene Seite ausgelagert. In einem eigenen Verzeichnis
Ticker habe ich den Code der Startseite in die dortige page.md kopiert. Für diese Datei ist noch ein eigenes Layout erforderlich, bei dem weder Kopf- noch Fußbereich vorkommt. Es soll „nur der Ticker“ auf der Seite erscheinen. Denn der Ticker wird jetzt auf der Startseite wie ein YouTube-Video eingebunden: mit einem iFrame.
Da sich der angezeigte Inhalt innerhalb des eigenen Webspace befindet, gibt es keine Probleme in Sachen „fremde Inhalte“. Es gelten für den Ticker nämlich die gleichen Verbindungsregeln wie für die übrige Webseite, es muss – für die Einbettung – keine externe Verbindung geöffnet werden.
Dieser „Verweisrahmen“ bekommt die volle Breite, keine Scrollbalken, keinen Rand und ein dann doch notweniges, jedoch tatsächlich sehr schlankes Java-Script:
<iframe id="ifr" src="../ticker/" width="100%" scrolling="no" frameborder="0" onload="resizeIframe⟨this⟩"></iframe>
Denn der iFrame soll sich natürlich optisch so einpassen, wie es bisher aussah, allerdings ist vor dem Laden unklar, wie viel Platz erforderlich ist. Das erledigt das Javascript, dass als letzter „Text“ in der page.md der Startseite steht:
<script>
function resizeIframe⟨obj⟩ {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
// window.onresize = isize;
window.addEventListener⟨"resize", isize⟩;
function isize⟨⟩ {
// window.location.reload⟨false⟩;
// history.go⟨0⟩;
// window.location.href = window.location.href;
setTimeout⟨function⟨⟩{ window.location.reload⟨⟩; }⟩;
}
</script>
Die Lösung habe ich mir ausgehend von diesem Beitrag bei „stack overflow“
(und weiteren dort) zusammengestellt. Wird etwas in den iFrame geladen, bestimmt die Inhaltshöhe die Höhe des Rahmens (→ resieIframe). Die Startseite bekommt einen „Sensor“ (→ addEventListener) der die Seite neu lädt (→ isizer), wenn sich die Größe ändert. Letzteres hat keine besondere Eleganz, funktioniert jedoch hinreichend gut und – ein schlagendes Argument – benötigt fast keinen Code.
Die Kommentare im Script zeigen die Iterationsstufen: Erst mit dem „Timeout-Kniff“ funktioniert die iFrame-Größenanpassung auch im aktuellen1 Firefox und in den mir zugänglichen Mobilbrowsern. In letztereren „springt“ der Inhalt beim Scrollen ggf. etwas; das ist unschön, wer da eine bessere Idee hat … .
Der letzte Tropfen „Magie“ steckt in der verwendeten Layout-Datei, die dafür sorgt, dass im iFrame angeklickte Links im Hauptfenster angezeigt werden:
<!DOCTYPE html>
<h t m l <?php if ⟨$this->yellow->extensions->isExisting⟨"socialtags"⟩⟩: ?>prefix="og: http://ogp.me/ns# <?php if ⟨$this->yellow->page->getHtml⟨"layout"⟩ == "blog"⟩: ?>article: http://ogp.me/ns/article#<?php endif ?>" <?php endif ?>lang="<?php echo $this->yellow->page->getHtml⟨"language"⟩ ?>">
<head>
<title><?php echo $this->yellow->page->getHtml⟨"titleHeader"⟩ ?></title>
<meta charset="utf-8" />
<base target="_parent" />
<meta name="description" content="<?php echo $this->yellow->page->getHtml⟨"description"⟩ ?>" />
<meta name="keywords" content="<?php echo $this->yellow->page->getHtml⟨"keywords"⟩ ?>" />
<meta name="author" content="<?php echo $this->yellow->page->getHtml⟨"author"⟩ ?>" />
<meta name="generator" content="Datenstrom Yellow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv=“expires“ content=“14400″ />
<?php $resourceLocation = $this->yellow->system->get⟨"serverBase"⟩.$this->yellow->system->get⟨"resourceLocation"⟩ ?>
<link rel="icon" type="image/png" href="<?php echo $resourceLocation.$this->yellow->page->getHtml⟨"theme"⟩."-icon.png" ?>" />
<?php echo $this->yellow->page->getExtra⟨"header"⟩ ?>
</head>
<body>
<div class="content">
<div class="main">
<?php echo $this->yellow->page->getContent⟨⟩ ?>
</div>
</div>
</body>
</html>
Das wird mit <base target="<em>parent"> erledigt. Wer mag, kann natürlich auch »blank« für einen neuen Tab eintragen.
Weil es sich hier jedoch um eigene Seiten und den Leseverlauf meiner Besucher handelt, soll sich der angeklickte Link ohne Rumgetabbe einreihen.
Die Meta-Einträge
descriptionundkeywordsfehlen in einigen Standard-Vorlagen von Yellow. Speziell die Beschreibung ist wichtig, denn hier lässt sich knackig formulieren, was Google & Co. als Kurztext unter einem gefundenen Link eintragen. Andernfalls wird irgendwas aus dem Inhalt genommen und auf den verfügbaren Platz gekürzt. Der beträgt ungefähr 130 - 140 Zeichen.
Natürlich …
… , ich hätte den Ticker auch „hart codiert“ in eine HTML-Datei schreiben können oder direkt in die Layout-Datei, auf die in einer – ansonsten leeren – page.md verwiesen wird.
Der vermeintliche Mehraufwand hat den Charme, dass sich der Ticker über dein Online-Editor von Yellow pflegen lässt. Ich kann dort problemlos weitere Ticker einfügen oder bestehende entfernen, ohne dass ich dafür besonderen Aufwand treiben muss. Die „blanke“ Layout-Datei kann womöglich an anderer Stelle nützlich sein, falls sich diese Technik dort zur Verbesserung der Ladezeit der primären Seite anbietet.