All Projects → FriendsOfREDAXO → css_above_the_fold

FriendsOfREDAXO / css_above_the_fold

Licence: MIT license
🐣 Performance: Bindet Styles, die für den sichtbaren Bereich benötigt werden, inline in den Head ein.

Programming Languages

PHP
23972 projects - #3 most used programming language
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to css above the fold

poll
Erstellt und verwaltet Umfragen in REDAXO 5, bei Bedarf mit E-Mailbestätigung.
Stars: ✭ 32 (+33.33%)
Mutual labels:  redaxo, redaxo-addon
theme
Nützliche Verwaltung von Projektdateien (z. B. Assets, Sprachdateien, Funktionen und Klassen) für Frontend und Backend.
Stars: ✭ 46 (+91.67%)
Mutual labels:  redaxo, redaxo-addon
iconpicker
Font Awesome-Iconpicker für REDAXO 5, auch andere Font-Icons möglich
Stars: ✭ 29 (+20.83%)
Mutual labels:  redaxo, redaxo-addon
navbuilder
Generiert frei definierbare Navigationsbäume mittels Drag & Drop
Stars: ✭ 21 (-12.5%)
Mutual labels:  redaxo, redaxo-addon
media srcset
Media-SrcSet implementiert SRCSET-Funktionalität.
Stars: ✭ 36 (+50%)
Mutual labels:  redaxo, redaxo-addon
demo addon
Beispiel-Addon für REDAXO 5. Zeigt den Aufbau und Basisfunktionalität von Addons.
Stars: ✭ 46 (+91.67%)
Mutual labels:  redaxo, redaxo-addon
markitup
Integriert den MarkItUp-Editor (Markdown und Textile) in REDAXO CMS
Stars: ✭ 46 (+91.67%)
Mutual labels:  redaxo, redaxo-addon
media manager autorewrite
Generiert schöne, SEO-freundliche URLs für Medien
Stars: ✭ 30 (+25%)
Mutual labels:  redaxo, redaxo-addon
statistics
Statistik Addon zur Erfassung von Seitenaufrufen. Für das CMS Redaxo.
Stars: ✭ 21 (-12.5%)
Mutual labels:  redaxo, redaxo-addon
address
Adressverwaltung inkl. Koordinaten (via Google Maps) im Backend
Stars: ✭ 25 (+4.17%)
Mutual labels:  redaxo, redaxo-addon
articlelist
🐣 Filter für Artikellisten
Stars: ✭ 20 (-16.67%)
Mutual labels:  redaxo, redaxo-addon
mediapool exif
Holt beim Upload die EXIF-Daten aus dem Bild und setzt diese als Metadaten in die Datenbank ein.
Stars: ✭ 27 (+12.5%)
Mutual labels:  redaxo, redaxo-addon
2factor auth
2-Faktor-Authentifizierung mittels one-time-password (OTP)
Stars: ✭ 20 (-16.67%)
Mutual labels:  redaxo, redaxo-addon
bootstrap helper
Bootstrap Helper für REDAXO 5
Stars: ✭ 22 (-8.33%)
Mutual labels:  redaxo, redaxo-addon
undo
Gelöschte Artikel, Slices und Kategorien wiederherstellen
Stars: ✭ 31 (+29.17%)
Mutual labels:  redaxo, redaxo-addon
webdav
🐣 webdav addon to publish mediapool contents
Stars: ✭ 32 (+33.33%)
Mutual labels:  redaxo, redaxo-addon
tinymce4
TinyMCE4-Editor für REDAXO 5
Stars: ✭ 21 (-12.5%)
Mutual labels:  redaxo, redaxo-addon
piwik
Piwik-Besucherstatistik für REDAXO
Stars: ✭ 22 (-8.33%)
Mutual labels:  redaxo, redaxo-addon
twoeg
🐣 Implementiert Twig-Templates für REDAXO
Stars: ✭ 23 (-4.17%)
Mutual labels:  redaxo, redaxo-addon
seoinspector
Ein SEO Ranking Tool fürs REDAXO Backend
Stars: ✭ 22 (-8.33%)
Mutual labels:  redaxo, redaxo-addon

CSS Above The Fold

Das Addon verkürzt die Ladezeit einer Website. CSS-Regeln, die für das Rendern des sichtbaren Seitenbereichs benötigt werden (Above the Fold), werden inline in den <head>-Bereich eingebunden. Übrige Stylesheets werden nachträglich geladen.

Damit lassen sich hohe Wertungen bei Google Insight erreichen. Es hilft bei der Beseitigung von Problemen mit "Render-Blocking-Contents".

Konfiguration

Das Addon besitzt keine Konfigurationsparameter, es funktioniert vollautomatisch. CSS-Regeln werden im Cache gespeichert. Mit System > [Cache löschen] werden die gespeicherten CSS-Regeln verworfen.

Funktionsbeschreibung

CSS-Regeln werden pro Artikel, pro Sprache und pro Device (Mobile, Desktop) gespeichert.

Solange für eine Kombination (Artikel + Sprache + Gerät) noch nichts gespeichert ist, wird eine JavaScript-Funktion im Frontend eingebunden. Sobald die Seite komplett geladen wurde, werden die CSS-Regeln gesucht, die für den sichtbaren Bereich benötigt werden. Per Ajax werden diese an den Server gesendet und dort gespeichert.

Sobald die Regel für die entsprechende Kombination vorhanden ist, wird diese direkt im <head>-Bereich inline ausgegeben. Alle Stylesheets werden automatisch ans Seitenende verschoben, vor dem schliessenden HTML-Tag.

Die CSS-Analyse wird automatisch bei document.ready ausgeführt.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].