Wie wird CSS und JS auf der Website eingefügt?

  • SEO-Tipps
  • agenturKundenSEO-Agentur
    Kommentare: 0
    Bewertung:

    Im Folgenden Absatz finden Sie die grundlegende Methode, wie Sie CSS und Js in Ihre Website laden können. Für den Zweck der Optimierung der Seitengeschwindigkeit oder der Suchmaschinenoptimierung reicht dieses einfache Beispiel nicht aus. In diesem Artikel werden wir ein paar Attribute und Tricks zur Optimierung der Seitengeschwindigkeit vorstellen, die Sie nutzen können.

    Beispiele:

    • <link href=“styles.css“ rel=“stylesheet“ />
    • <script src=“scriptsexample.js“></script>

     

    Was ist der Zweck eines PRELOAD-Attributs?

    Sie können eine Ressource angeben, die Ihre Seite sofort benötigt, indem Sie das Attribut preload des rel-Attributs des Link-Elements setzen. Sie können Browsern erlauben, alle angegebenen Inhalte früher zu rendern, indem Sie diese Methode verwenden. Es ist nützlich, wenn Sie erwarten, dass Sie diesen Inhalt kurz nach dem Laden der Seite benötigen. Diese einfache Maßnahme stellt sicher, dass sie früher zur Verfügung stehen und weniger wahrscheinlich die Darstellung der Seite stören, was zu einer verbesserten Leistung führt. Es ist bemerkenswert, dass die Ressource heruntergeladen und zur Verfügung gestellt wurde, obwohl sie vom Browser nicht verwendet werden muss. Der Grund dafür ist, dass die Stylesheets, die vom Browser geladen werden, nicht tatsächlich ausgeführt werden und auch keine Skripte geladen werden, sondern automatisch zwischengespeichert werden, damit sie von anderen Anwendungen verwendet werden können, wenn diese einen Bedarf dafür feststellen.

    Wie hilft PRELOAD bei meiner Suchmaschinenoptimierung?

    Generell ist es am besten, die Dateien vorzuladen, die Ihrer Meinung nach die höchste Relevanz für die Website haben. Dazu gehören Bilder und CSS sowie JavaScript. Die Vorladefunktion kann Ihnen helfen, die Ladezeit Ihrer Website zu verkürzen. Experimentieren Sie daher am besten mit Ihrer Optimierung und sehen Sie, ob sich die Leistung Ihrer Website ändert.

    Wie können Sie das PRELOAD-Attribut verwenden?

    Es ist wichtig, das „as“-Attribut anzugeben, da die Angabe des Dateityps dem Browser hilft, den Download richtig zu priorisieren und zu planen. Unten haben wir ein paar Beispiele angefügt.

    • <link rel=“preload“ href=“styles.css“ as=“style“>
    • <link rel=“preload“ href=“scripts.js“ as=“script“>
    • <link rel=“preload“ href=“video.mp4″ as=“video“ type=“video/mp4″>
    • <link rel=“preload“ href=“font.woff2″ as=“font“ />

    Dies ist nicht dasselbe wie das Prefetching. Wenn es nicht notwendig ist, <link rel=“preload“> zu verwenden, bevor  weniger wichtige Ressourcen geladen werden, dann verwenden Sie es lieber nicht.

    Warum verwendet man rel=“preload“ nur, wenn es erforderlich ist, bzw. was sind die Nachteile?

    Das Preload-Link-Tag ist, im Gegensatz zu allen anderen Links, die mit Prefetch/prerender/preload zu tun haben, ein Pflichtbestandteil für den Browser. Wann immer ein Browser auf eine Ressource mit rel=“preload“ verweist, muss der Browser die angegebenen Dateien zuerst herunterladen. Obwohl dies nicht die einzige Möglichkeit ist, die Browsern bzw. Webmaster zum Vorladen von Ressourcen zur Verfügung steht, kann ein Browser bei einem langsamen Netzwerk das Laden der Prefetch, Prerender und anderen rel-Attributen angegebenen Ressource vermeiden. Browser neigen dazu, Ressourcen, die zu verschiedenen Arten von Dateitypen gehören, unterschiedliche Prioritäten zuzuweisen. Mit dieser Methode werden die wichtigsten Ressourcen zuerst heruntergeladen, was das Herunterladen von unnötigen Ressourcen verhindert. Wenn eine Ressource mit rel=“preload“ angefordert wird, verwenden die Browser das „as“-Attribut, um zu bestimmen, wie hoch sie eingestuft werden soll.