Script für Fontawesome-Kit nur einmal für die Seite laden

    Hi,


    ich code nur für einen einzigen Webauftritt und der ist überschaubar (53 Seiten)


    Ich hab mir im Lauf der Jahre bissi Wissen um HTML und CSS angeeignet und darauf basiert auch die ganze Seite. Leider kommt man um Java nicht wirklich völlig herum, auch wenn man sich noch so viel Mühe gibt. Datenschutzhinweis und Google-Analytics waren bislang die einzigen Scripte, die gelaufen sind.


    Nun hatte ich es aber satt, dass die Ladezeit für die Seite wegen des aufgeblähten css von Fontawesome so lange ist und das CDN von Fontawesome ist "sunsettet", läuft also quasi aus.


    Daher habe ich Fontawesome nun mittels Script als Kit auf der Seite. Die aktuell präferierte Art von Fontawesome und ja, deutlich schneller als via .css.


    Schönheitsfehler: Da das auf jeder Seite der Fall ist wird es auf jeder Seite neu geladen, wenn diese aufgerufen wird. Der Effekt ist, dass dann das Menü kurz zuckt.


    Ja, klar, ein Schönheitsfehler, aber ich finds wirklich blöd.


    Leider kenne ich mich mit Java so überhauptgarkeinbisschen aus.


    Gibt es eine Möglichkeit, dass man das Script nur einmal laden lässt und danach "weiß der Browser das" und läd bei der nächsten Seite nicht nochmal? Also wie beim css?


    Sorry, vermutlich ne unglaublich blöde Frage die total pillepalle ist. Ich hab auch schon gegoogelt, aber da findet man immer nur, wie man die Seite dazu bekommt das Script nochmal zu laden...


    Danke schonmal :)

    Wie wäre es, wenn du das Script in der Cache speicherst?

    JQuery, Fontawesome, Bootstrap sind Scripte die es andauernd irgendwo im Netz benutzt werden.

    Eigentlich sollte sowas fast in jeder Cache zu finden sein.


    Öffne mal deine Konsole und schau, ob das fontawesome aus der Cache geladen wird oder nicht.

    Danke schon mal für die Tipps :)


    Basti, das mit dem Cache ist ja das, was ich möchte. Wenn der Webseitenbesucher die Seite aufruft, soll er einmal das Script in den Cache laden und danach erkennen, "das habe ich schon, muss ich nicht noch mal laden". Tut es aber nicht. Theoretisch haben sicherlich viele in irgend einer Form Fontawesome im Browser cache, nur leider ist sowohl CDN als auch das Kit geprägt und mit einer Identitätsnummer versehen, zumindest, wenn du "Pro-Nutzer" von Fontawesome bist. Daher greift der Browser leider nicht auf vorhandene Daten zurück, sondern lädt neu.


    Lupus, das wäre die grundsätzliche Entscheidung nicht mehr mit Fontawesome arbeiten zu wollen. Hmm. Hab ich schon mal drüber nachgedacht und es wieder verworfen. Ich denk noch mal drüber nach. Das ist aber eher eine Umgehung als eine Lösung des Problems. ;)

    aber klar :) https://www.stb-eselgrimm.de


    Nicht böse sein, ist gewerblich, ich weiß, das ist in Foren nicht gerne gesehen, aber die Seite ist mein Hobby. Klar am Ende auch gewerblich, aber ich verdiene mein Geld mit Steuerberatung, nicht mit Hompagedesign (was man an der Seite auch deutlich sieht *lach*)

    Zitat von jonas3344

    So lange die URL zur js-Datei gleich ist greift der Browser auf den Cache zurück.

    Die url ist gleich. Die wird per Include auf jeder Seite geladen.


    Doch woher kommt dann das Zucken?


    zur Erklärung: als ich via css eingebunden hatte zuckte da nix. Man sieht ja auch, dass das Zucken durch die Icons kommt...

    Was meinst du mit zucken?

    Wenn ich deine Seite besuche holt er deine Fontawesome Js immer aus der cache.Die Seite ist unter einer Sekunde komplett geladen.

    Eigentlich ganz gut finde ich.


    Deine Navigation könntest du aber ändern.

    Geht man mit der Maus über die Links , wird mit transition wahrscheinlich das Padding vergrößert ( geraten ).

    Das sieht etwas komisch aus finde ich.

    include?


    javascript als <script> einbinden, dann wird auch gecachet. Wenn du das mit php und include machst kann der Browser das nicht cachen.


    Edit: wie basti schon sagt, bei Dir kommt alles aus dem Cache. Das passt schon so. Ich seh auch kein Zucken.

    Basti, er holt sich den Rand mit Transition. Meines Wissens verändert sich das Padding nicht, sondern das sieht nur so aus, weil der Rand immer dunkler wird. Aber ich sehe es mir nochmal an, danke :)

    Ja, die Seite läd schnell. Da hab ich inzwischen auch wirklich viel dafür getan. :) Mi "Zucken" meine ich, dass er wenn man eine weitere Seite aufruft, der Browser die Icons von Fontawesome nachläd, woduch das Menü erst nach links und dann wieder nach rechts ruckt.

    jonas, Ich habe eine Reihe von Dateien, die ich mit Include hole.


    sieht dann zum Beispiel so aus:


    PHP
    <footer>
      <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/fussnavi.php'); ?>
      <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/footer.php'); ?>
      <?php include($_SERVER['DOCUMENT_ROOT'] . '/includes/script.php'); ?>
   </footer>

    die Script.php sieht dann so aus


    Code
     <script async src="https://kit.fontawesome.com/5b34446141.js" crossorigin="anonymous"></script>
<script async src="/css/cookieconsent.min.js"></script>
<script async src="/css/cookieeinst.js"></script>
<script async src="/css/highlight.js"></script>
<script async src="/css/cookieoptout.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-29616531-1"></script>
<script async src="/css/anonymiseip.js"></script>


    Ja, ich weiß, man sollte die scripts zu weniger Dateien zusammenfassen, kann ich aber nicht, da ich von java wirklich überhaupt keine Ahnung habe.


    Das mit dem Include mache ich, damit ich nicht auf allen Seiten alles ändern muss, sondern einmal in einer Datei, die dann für alle Seiten gilt.

    Da das über den Apacheserver zusammengebastelt wird, sieht das für den Browser so aus:


    dürfte denke ich aus Sicht des Browsers keinen Unterschied spielen oder?

    Das passt so, ja. Da du FA per JS reinholst wird das natürlich erst ausgeführt nachdem die Seite schon geladen ist. Sehr schön zu sehen im Netzwerk-Reiter der Dev-Tools. Das sorgt für den leichten ruckler.

    Zitat

    Ja, ich weiß, man sollte die scripts zu weniger Dateien zusammenfassen, kann ich aber nicht, da ich von java wirklich überhaupt keine Ahnung habe.

    Da stimme ich nicht zu: In getrennten Dateien ist es wesentlich übersichtlicher, als wenn alles globalgalaktisch in einer einzigen Datei versammelt wäre.

    Zitat von jonas3344

    Das passt so, ja. Da du FA per JS reinholst wird das natürlich erst ausgeführt nachdem die Seite schon geladen ist. Sehr schön zu sehen im Netzwerk-Reiter der Dev-Tools. Das sorgt für den leichten ruckler.

    Das ist was ich auch beobachte. Wie gesagt, es ist natürlich nur ein Schönheitsfehler, aber gibt es keine Möglichkeit dem Bowser zu sagen "nimm das javascript und wende es immer an bis dir jemand was anders sagt"?


    Bei css funktionierts ja auch, bzw. macht das der Browser von sich aus. Das läd er einmal in den cache und lässt es dann gut sein.


    Das beruhigt mich sempervivum. :)


    Vielen lieben Dank mal an der Stelle an alle, die hier mitlesen und sich bemühen mein Problem zu verstehen und bestenfalls zu beseitigen. :)

    Das hat nichts mit Cache oder so zu tun sondern mit der Reihenfolge der Abarbeitung durch den Browser. Dein FA-JS ist im Cache drin.


    Der Browser rendert zuerst die Seite (inkl. CSS !) und führt anschliessend JavaScript aus. Und da Deine Seite halt sehr "leicht" und schnell da ist gibt das wohl diesen Effekt.

    ah :) ok, das verstehe ich :)


    Schade, kann ich wohl nichts dagegen tun.


    Höchstens den "steinigen weg" und aus Fontawesome die verwendeten Icons extrahieren und damit das benötigte css und die woff auf die benötigte Größe reduzieren und über den eigenen Server mit hochziehen oder wie vorgeschlagen auf svg´s umstellen und die direkt einbinden. Hmmm, gefällt mir beides nicht, da schlussendlich aufwändig wenn man "mal eben" ein anders Zeichen verwenden will.


    Ich gehe mal in mich.


    Vielen lieben Dank :)

    Was Du noch tun könntest, wäre, diesen i-Elementen gleich durch CSS die richtige Breite zu geben, dann würden die Icons zwar immer noch leicht verzögert auftauchen, aber im Umfeld würde nichts mehr zucken. Da die Breite leider vom Icon abhängig ist, wäre dieser Weg immer noch ein wenig steinig.

    Danke :) die Idee ist nicht schlecht. :) soooo unterschiedlich sind die Icons in der Breite meine ich gar nicht.


    Ich werd mich demnächst mal über die i-Elemente und die Transition im Menü machen. :)


    Danke noch mal allen :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden