JavaScript: Unterschied zwischen den Versionen

Aus Seobility Wiki
Wechseln zu: Navigation, Suche
(→‎Ähnliche Artikel)
 
(5 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
−
<seo title="JavaScript" metadescription="Definition ✓ Bedeutung für Webseitenbesucher ✓ Integration des JavaScript Codes ✓ Bedeutung für die Suchmaschinenoptimierung ✓" />
+
<seo title="Was ist JavaScript? Definition und Erklärung" metadescription="JavaScript, oft abgekürzt als JS, ist eine Skriptsprache, mit der Webentwickler interaktive Webseiten erstellen können. Jetzt weiterlesen…"/>
 +
 +
== Definition ==
  
−
== Was ist JavaScript? ==
+
JavaScript – oft abgekürzt als JS – ist eine Skriptsprache, mit der Webentwickler interaktive Webseiten erstellen können. Neben [[HTML5|HTML]] und CSS ist JavaScript eine der am häufigsten verwendeten Programmiersprachen in der Webentwicklung.
  
−
JavaScript ist eine Standardprogrammiersprache, deren Einbindung in HTML-Dateien es ermöglicht, Webseiten für Clients dynamisch zu gestalten, indem man sie mit vielfältigen Funktionen, wie beispielsweise aufklappenden Menüs, Dialogboxen, Pop-up-Fenstern oder Animationen ausstattet. Auf kommerziellen Webseiten finden insbesondere die Anwendung zur Prüfung von Formulareingaben oder der virtuelle Warenkorb Einsatz.  
+
In der Vergangenheit wurde JavaScript hauptsächlich für die [[Frontend|Frontend]]-Entwicklung verwendet. Allerdings hat es auch in der Backend-Entwicklung durch Frameworks wie Node.js an Popularität gewonnen.
  
−
==Bedeutung für den Webseitenbesucher==
+
[[File:Javascript-head-wdf-idf.png|link=|border|alt=JavaScript HTML|Screenshot von JavaScript innerhalb des HTML-Codes]]
  
−
JavaScript bietet dem Webseitenbesucher verschiedene Vorteile. Neben dem gesteigerten Nutzererlebnis (User Experience), das sich ihm durch die zahlreichen dynamischen Funktionen bietet, profitiert der Nutzer auch von einer benutzerfreundlichen Seitennavigation. Andererseits kann der Webseitenbesuch etwa durch in Pop-up-Fenstern aufblinkende Werbung erheblich gestört werden. Für Internetnutzer besteht daher die Möglichkeit, JavaScript im Browser zu deaktivieren. Allerdings können dann auch die vorteilhaften Java-Script-Funktionen nicht mehr genutzt werden oder gar die Funktionsfähigkeit einiger Webseiten, die viele Java-Script-Anwendungen nutzen, erheblich eingeschränkt sein. Webseitenbetreiber sollten daher grundsätzlich darauf achten, dass ihre Webseite auch dann noch navigiert werden kann, wenn JavaScript deaktiviert wurde.
+
[[File:Javascript-beispiel.jpg|link=|border|600px|alt=JavasScript Beispiel|Screenshot einer JavaScript Datei]]
  
−
==Die Integration des Java-Script-Codes==
+
Ein Beispiel von JavaScript-Dateien auf unserer [https://www.seobility.net/de/wdf-idf-tool/ WDF-IDF-Tool]-Seite
  
−
Es gibt verschiedene Möglichkeiten, den JavaScript-Code in HTML-Dateien zu integrieren. So kann dieser bspw. im [[Quellcode]] zwischen den Meta-Angaben <SCRIPT> und </SCRIPT> eingefügt oder in eine externe JavaScript-Datei ausgelagert werden, die wiederum via HTML-Tag oder durch Verlinkung im Quellcode jeder Seite eingebunden wird. 
+
== Wofür wird JavaScript verwendet? ==
  
−
==Bedeutung für die Suchmaschinenoptimierung==
+
JavaScript wird für verschiedene Anwendungen im Web genutzt, z. B. für automatisch aktualisierte Newsfeeds, Formulare, Suchfunktionen und andere interaktive Funktionen. Nahezu alle interaktiven Funktionen, die auf Webseiten zu finden sind, werden mit JavaScript erstellt.
  
−
Früher waren Suchmaschinen wie Google noch nicht dazu in der Lage, mittels JavaScript generierte Inhalte zu indizieren. Damals lautete die Empfehlung, JavaScript auf suchmaschinenoptimierten Webseiten zu vermeiden. Inzwischen ist Google jedoch dazu übergegangen, JavaScript beim Crawlen einer Webseite auszuführen, weshalb sich der Einsatz dieser Technologie heutzutage nicht zwangsläufig negativ auf die Suchmaschinenoptimierung auswirken muss. Mehr Informationen zu diesem Thema findest Du in unserem [https://www.seobility.net/de/blog/javascript-crawling/ Blogbeitrag].
+
Da es von allen gängigen Browsern unterstützt wird, ist JS in der Frontend-Entwicklung weit verbreitet. Es findet aber auch in anderen Bereichen Verwendung, wie z. B. in der mobilen Entwicklung, der Spieleentwicklung und der Backend-Entwicklung.
  
−
==Optimierung von Ladezeit, Performance und Conversion Rate==  
+
== JavaScript-Bibliotheken und -Frameworks ==
  
−
Bei Nutzung zahlreicher interaktiver JavaScript-Funktionen wird die [[Pagespeed|Ladezeit]] erhöht, mit der Folge eines erheblichen Performance-Verlusts und einem entsprechend verschlechterten Nutzererlebnis. Die negativen Auswirkungen auf die [[Conversion Rate]] einer Webseite sind mitunter erheblich. Gerade wenn der JavaScript-Code am Ende des Quellcodes jeder Unterseite eingefügt wurde, erhöht dies die Ladezeit jeder Unterseite entsprechend ihres hierdurch vergrößerten Dateivolumens. Daher wird empfohlen, den JavaScript-Code in eine externe Datei auszulagern. Dabei sollte jedoch nicht für jede einzelne Seite eine eigene externe JavaScript-Datei angelegt werden, da eine hohe Anzahl zu ladender Dateien ebenfalls einen negativen Einfluss auf die Ladezeit einer Webseite haben kann. Existieren verschiedene JavaScript-Dateien für einzelne Unterseiten, sollten diese vielmehr in einer einzelnen externen Datei abgelegt werden.
+
Um die Programmierung zu erleichtern, gibt es zahlreiche sogenannter JS-Bibliotheken und -Frameworks. JavaScript-Bibliotheken werden verwendet, um Codes für komplexere Funktionalitäten schneller schreiben zu können. Sie ermöglichen es Entwicklern, vorgefertigte Code-Snippets zu nutzen und eigene Code-Snippets für die zukünftige Verwendung zu erstellen und zu speichern.
  
−
Die Ausgliederung von JavaScript in einer externen Datei wirkt sich mittelbar auch auf die Positionierung der Webseite in den [[SERP]]s aus, da die Crawler-Kapazität nicht allzu schnell durch überladene Quellcodes aufgebraucht wird.  
+
JavaScript-Frameworks sind Vorlagen, die eine Codestruktur vorgeben, welcher man dann einfach folgen kann. Dadurch wird die Entwicklung einerseits erleichtert, jedoch gibt es andererseits Einschränkungen, die ein Entwickler beachten muss.
  
−
Darüber hinaus ist die Performance einer Webseite auch davon abhängig, an welcher Stelle die JavaScript Datei im Quellcode referenziert wird. Wird sie am Anfang des Codes platziert, wird sie zuerst geladen und erst danach das Rendering mit dem Laden der übrigen HTML-Datei-Inhalte fortgeführt. Während des Ladevorgangs der JavaScript-Dateien bekommt der Webseitenbesucher dann in vielen Fällen eine leere Seite angezeigt. Erfolgt die Integration dahingegen am Ende des Quellcodes, wird zunächst die HTML-Datei geladen und der Webseitenbesucher bekommt bereits die entsprechenden Inhalte angezeigt, die er lediglich noch nicht navigieren kann. 
+
Beispiele für JS-Bibliotheken sind:
  
−
Durch ein zusätzliches Caching der extern angelegten JavaScript-Datei im Browser kann zudem erreicht werden, dass diese beim zweiten Aufruf einer Seite nicht mehr geladen werden muss. Hierdurch wird die Performance der Webseite verbessert.
+
* jQuery
 +
* ReactJS
 +
* Dojo-Toolkit
 +
* Google Polymer
 +
 +
Beispiele für JS-Frameworks sind:
  
 +
* AngularJS
 +
* Vue.js
 +
* Apache Royale
 +
 +
Wird JavaScript ohne die Verwendung von Bibliotheken oder Frameworks geschrieben, wird es als „Vanilla-JavaScript“ bezeichnet.
 +
 +
== Clientseitiges JavaScript vs. serverseitiges JavaScript ==
 +
 +
JavaScript kann sowohl clientseitig als auch serverseitig eingesetzt werden. Clientseitiges JavaScript macht eine Manipulation von Browsern und Webseiten möglich. Es führt das Skript im Browser des Nutzers aus und ist eine der häufigsten Verwendungsformen von JavaScript.
 +
 +
Serverseitiges JavaScript läuft nicht im Browser, sondern auf dem Server. Generell ist es weniger verbreitet als clientseitiges JavaScript. Ein Beispiel für ein beliebtes serverseitiges Scripting-Framework für JavaScript ist Node.js.
 +
 +
== JavaScript und Suchmaschinen ==
 +
 +
Obwohl JavaScript eine wichtige Programmiersprache für die Webentwicklung ist, ist es für [[Suchmaschine|Suchmaschinen]] nicht immer einfach zu verarbeiten. Wenn das JavaScript auf einer Seite nicht für [[Suchmaschinen Crawler|Suchmaschinen-Crawler]] optimiert ist, kann es zu SEO-Problemen kommen.
 +
 +
Dies gilt insbesondere für Websites, die wichtige Inhalte, Links oder andere Ressourcen mit JavaScript anstelle von HTML und CSS bereitstellen. Hierbei kann zu es Problemen beim Crawling kommen, da es sein kann, dass Inhalte für Nutzer verfügbar sind, für Suchmaschinen-Crawler jedoch nicht.
 +
 +
Google [[Indexierung|indexiert]] und [[Rendering|rendert]] Seiten im Web getrennt voneinander, weil das Ausführen eines Skripts mehr Ressourcen beansprucht. Aus diesem Grund haben Suchmaschinen wie Google gelegentlich Schwierigkeiten mit JavaScript.
 +
 +
Das Rendering kostet mehr Zeit und Ressourcen, weshalb diese beiden Schritte aufgeteilt werden, sodass HTML und CSS schneller indexiert werden. Das bedeutet, dass die Verarbeitung von JavaScript Inhalten länger dauern kann, wodurch die Indexierung mehr Zeit in Anspruch nimmt.
 +
 +
In den letzten Jahren sind große Suchmaschinen wie Google besser darin geworden, JavaScript zu crawlen und zu indexieren. Viele kleinere Suchmaschinen oder andere Crawler können hingegen immer noch Probleme beim Laden von JavaScript haben.
 +
 +
Einige Rendering-Methoden können Crawlern dabei helfen, JavaScript zu verarbeiten, nämlich:
 +
 +
=== Serverseitiges Rendering ===
 +
 +
Wenn JavaScript serverseitig statt clientseitig gerendert wird, wird sowohl Nutzern als auch Crawlern die vollständig gerenderte Seite angezeigt. Dadurch lassen sich viele der SEO-Probleme verhindern, die JavaScript verursachen kann. Allerdings nimmt es auch viele Server-Ressourcen in Anspruch.
 +
 +
=== Dynamic Rendering ===
 +
 +
Durch Dynamic Rendering können serverseitig gerenderte Ressourcen an Crawler gesendet werden, während andere Nutzer Inhalte auf der Clientseite rendern können. Dies verhindert nicht nur SEO-Probleme beim Crawling und der Indexierung, sondern auch eine zusätzliche Belastung des Servers.
 +
 +
=== Hybrid Rendering ===
 +
 +
Beim Hybrid Rendering werden die wichtigen Ressourcen auf der Serverseite und die weniger wichtigen Inhalte auf der Clientseite gerendert. Dadurch wird die Last zwischen dem Browser des Clients und dem Server verteilt, während die Crawler die wichtigen Inhalte sofort sehen können.
 +
 +
== Die Bedeutung für Webentwicklung und SEO ==
 +
 +
JavaScript ist eine der wichtigsten Programmiersprachen. Sie ist sehr dynamisch und wird sowohl in der Frontend- als auch in der Backend-Webentwicklung verwendet.
 +
 +
Angesichts der möglichen Auswirkungen auf die SEO sowie auf die Geschwindigkeit und Performance einer Seite ist es wichtig zu verstehen, wie JavaScript funktioniert. Anhand von Best Practices kann man lernen, effektiver zu programmieren und die Leistung einer Website zu verbessern.
 +
 +
== Weiterführende Links ==
 +
 +
* https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=de
 +
* https://developers.google.com/search/docs/guides/fix-search-javascript?hl=de
 +
* https://www.enable-javascript.com/de/
 +
 
== Ähnliche Artikel ==
 
== Ähnliche Artikel ==
  
 +
* [[Frontend]]
 
* [[HTML5]]
 
* [[HTML5]]
−
* [[UX Design]]
 
  
 
[[Kategorie:Web Entwicklung]]
 
[[Kategorie:Web Entwicklung]]
 +
 +
{| class="wikitable" style="text-align:left"
 +
|-
 +
|'''Über den Autor'''
 +
|-
 +
| [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. <html><a href="https://www.seobility.net/de/wiki/Seobility_Wiki_Team" target="_blank">Mehr Informationen über das Seobility Wiki Team</a></html>.
 +
|}
 +
 +
<html><script type="application/ld+json">
 +
{
 +
  "@context": "https://schema.org",
 +
  "@type": "Article",
 +
  "author": {
 +
    "@type": "Organization",
 +
    "name": "Seobility",
 +
    "url": "https://www.seobility.net/"
 +
  }
 +
}
 +
</script></html>

Aktuelle Version vom 23. Januar 2024, 15:29 Uhr

Definition

JavaScript – oft abgekürzt als JS – ist eine Skriptsprache, mit der Webentwickler interaktive Webseiten erstellen können. Neben HTML und CSS ist JavaScript eine der am häufigsten verwendeten Programmiersprachen in der Webentwicklung.

In der Vergangenheit wurde JavaScript hauptsächlich für die Frontend-Entwicklung verwendet. Allerdings hat es auch in der Backend-Entwicklung durch Frameworks wie Node.js an Popularität gewonnen.

JavaScript HTML

JavasScript Beispiel

Ein Beispiel von JavaScript-Dateien auf unserer WDF-IDF-Tool-Seite

Wofür wird JavaScript verwendet?

JavaScript wird für verschiedene Anwendungen im Web genutzt, z. B. für automatisch aktualisierte Newsfeeds, Formulare, Suchfunktionen und andere interaktive Funktionen. Nahezu alle interaktiven Funktionen, die auf Webseiten zu finden sind, werden mit JavaScript erstellt.

Da es von allen gängigen Browsern unterstützt wird, ist JS in der Frontend-Entwicklung weit verbreitet. Es findet aber auch in anderen Bereichen Verwendung, wie z. B. in der mobilen Entwicklung, der Spieleentwicklung und der Backend-Entwicklung.

JavaScript-Bibliotheken und -Frameworks

Um die Programmierung zu erleichtern, gibt es zahlreiche sogenannter JS-Bibliotheken und -Frameworks. JavaScript-Bibliotheken werden verwendet, um Codes für komplexere Funktionalitäten schneller schreiben zu können. Sie ermöglichen es Entwicklern, vorgefertigte Code-Snippets zu nutzen und eigene Code-Snippets für die zukünftige Verwendung zu erstellen und zu speichern.

JavaScript-Frameworks sind Vorlagen, die eine Codestruktur vorgeben, welcher man dann einfach folgen kann. Dadurch wird die Entwicklung einerseits erleichtert, jedoch gibt es andererseits Einschränkungen, die ein Entwickler beachten muss.

Beispiele für JS-Bibliotheken sind:

  • jQuery
  • ReactJS
  • Dojo-Toolkit
  • Google Polymer

Beispiele für JS-Frameworks sind:

  • AngularJS
  • Vue.js
  • Apache Royale

Wird JavaScript ohne die Verwendung von Bibliotheken oder Frameworks geschrieben, wird es als „Vanilla-JavaScript“ bezeichnet.

Clientseitiges JavaScript vs. serverseitiges JavaScript

JavaScript kann sowohl clientseitig als auch serverseitig eingesetzt werden. Clientseitiges JavaScript macht eine Manipulation von Browsern und Webseiten möglich. Es führt das Skript im Browser des Nutzers aus und ist eine der häufigsten Verwendungsformen von JavaScript.

Serverseitiges JavaScript läuft nicht im Browser, sondern auf dem Server. Generell ist es weniger verbreitet als clientseitiges JavaScript. Ein Beispiel für ein beliebtes serverseitiges Scripting-Framework für JavaScript ist Node.js.

JavaScript und Suchmaschinen

Obwohl JavaScript eine wichtige Programmiersprache für die Webentwicklung ist, ist es für Suchmaschinen nicht immer einfach zu verarbeiten. Wenn das JavaScript auf einer Seite nicht für Suchmaschinen-Crawler optimiert ist, kann es zu SEO-Problemen kommen.

Dies gilt insbesondere für Websites, die wichtige Inhalte, Links oder andere Ressourcen mit JavaScript anstelle von HTML und CSS bereitstellen. Hierbei kann zu es Problemen beim Crawling kommen, da es sein kann, dass Inhalte für Nutzer verfügbar sind, für Suchmaschinen-Crawler jedoch nicht.

Google indexiert und rendert Seiten im Web getrennt voneinander, weil das Ausführen eines Skripts mehr Ressourcen beansprucht. Aus diesem Grund haben Suchmaschinen wie Google gelegentlich Schwierigkeiten mit JavaScript.

Das Rendering kostet mehr Zeit und Ressourcen, weshalb diese beiden Schritte aufgeteilt werden, sodass HTML und CSS schneller indexiert werden. Das bedeutet, dass die Verarbeitung von JavaScript Inhalten länger dauern kann, wodurch die Indexierung mehr Zeit in Anspruch nimmt.

In den letzten Jahren sind große Suchmaschinen wie Google besser darin geworden, JavaScript zu crawlen und zu indexieren. Viele kleinere Suchmaschinen oder andere Crawler können hingegen immer noch Probleme beim Laden von JavaScript haben.

Einige Rendering-Methoden können Crawlern dabei helfen, JavaScript zu verarbeiten, nämlich:

Serverseitiges Rendering

Wenn JavaScript serverseitig statt clientseitig gerendert wird, wird sowohl Nutzern als auch Crawlern die vollständig gerenderte Seite angezeigt. Dadurch lassen sich viele der SEO-Probleme verhindern, die JavaScript verursachen kann. Allerdings nimmt es auch viele Server-Ressourcen in Anspruch.

Dynamic Rendering

Durch Dynamic Rendering können serverseitig gerenderte Ressourcen an Crawler gesendet werden, während andere Nutzer Inhalte auf der Clientseite rendern können. Dies verhindert nicht nur SEO-Probleme beim Crawling und der Indexierung, sondern auch eine zusätzliche Belastung des Servers.

Hybrid Rendering

Beim Hybrid Rendering werden die wichtigen Ressourcen auf der Serverseite und die weniger wichtigen Inhalte auf der Clientseite gerendert. Dadurch wird die Last zwischen dem Browser des Clients und dem Server verteilt, während die Crawler die wichtigen Inhalte sofort sehen können.

Die Bedeutung für Webentwicklung und SEO

JavaScript ist eine der wichtigsten Programmiersprachen. Sie ist sehr dynamisch und wird sowohl in der Frontend- als auch in der Backend-Webentwicklung verwendet.

Angesichts der möglichen Auswirkungen auf die SEO sowie auf die Geschwindigkeit und Performance einer Seite ist es wichtig zu verstehen, wie JavaScript funktioniert. Anhand von Best Practices kann man lernen, effektiver zu programmieren und die Leistung einer Website zu verbessern.

Weiterführende Links

Ähnliche Artikel

Über den Autor
Seobility S
Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. Mehr Informationen über das Seobility Wiki Team.

Überprüfen Sie Ihre Webseite mit
dem SEO Check!