Hey @Yalcin7
Ok danke, und wir sehen, dass du den Shopify CDN Videolink verwendest was korrekt ist, und diesen in einer neuen Liquid Section Datei eingebaut hast. Der Video lädt jedoch eine Sekunde verzögert, wie du sagst. Dies hängt wahrscheinlich von der Video Datei selber ab. Du möchtest ja einen Kompromiss erreichen, zwischen Video Qualität/Auflösung und dass dabei auch eine schnelle Ladezeit im Kundenbrowser auf Desktop und auf Mobile gewährleistet wird. Nicht vergessen, bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller auf unserer Seite zu analysieren.
Ein paar generelle Tipps dazu
Um die Ladezeit des Videos in deinem HTML-Code zu verbessern, gibt es verschiedene Ansätze, die du ausprobieren kannst. Diese Optimierungen beziehen sich sowohl auf die Art und Weise, wie das Video eingebettet ist, als auch auf die Eigenschaften des Videos selbst.
1. Verwendung von preload="metadata" anstelle von preload="none"
Wenn du beispielsweise ein Attribut wie preload="none" verwendest, und durch preload="metadata" ersetzt, lädt der Browser die Metadaten des Videos (wie Dauer, Größe usw.) beim Laden der Seite, aber nicht das Video selbst. Dies kann die wahrgenommene Ladezeit der Seite verbessern, da das Video erst abgespielt wird, wenn der Benutzer interagiert. Hier ein Beispielcode:
<video class="video-js" loop autoplay muted playsinline poster="URL_TO_YOUR_POSTER" preload="metadata">
2. Video Dateigröße optimieren
Stelle sicher, dass das Video so komprimiert ist, dass es eine akzeptable Balance zwischen Dateigröße und Qualität bietet. Tools wie HandBrake oder Online-Dienste können dabei helfen, die Dateigröße zu reduzieren, ohne die Qualität merklich zu beeinträchtigen.
3. Video-Hosting-Dienste nutzen
Anstelle des direkten Hostings des Videos auf Shopify könntest du in Erwägung ziehen, das Video auf einem Video-Hosting-Dienst wie YouTube oder Vimeo zu hosten und es dann in deine Seite einzubetten. Diese Plattformen bieten optimierte Video-Streaming-Technologien, die die Ladezeit verbessern können.
4. Lazy Loading implementieren
Lazy Loading verzögert das Laden von Ressourcen (wie Videos) bis diese fast in den sichtbaren Bereich der Webseite scrollen. Für Videos kannst du dies durch JavaScript realisieren oder indem du nach einer Bibliothek suchst, die Lazy Loading für Videos unterstützt.
5. Alternative Formate anbieten
Stelle sicher, dass du Videoformate anbietest, die von allen modernen Browsern unterstützt werden. Die Bereitstellung mehrerer Quellen im <video>-Tag kann die Kompatibilität und Performance verbessern:
<video class="video-js" loop autoplay muted playsinline preload="metadata">
<source src="URL_TO_YOUR_MP4.mp4" type="video/mp4">
<source src="URL_TO_YOUR_WEBM.webm" type="video/webm">
</video>
CSS-Optimierungen
Stelle sicher, dass dein CSS gut strukturiert ist, um das Video responsiv zu machen. Stelle sicher, dass die restliche Seite ebenfalls optimiert ist und dass keine unnötigen Ressourcen das Laden verlangsamen.
Überprüfung des Netzwerks und der Ressourcengröße
Verwende Tools wie die Developer Console, um zu überprüfen, wie schnell deine Seite lädt und um spezifische Empfehlungen zur Verbesserung der Ladezeit zu erhalten. Manchmal kann das Problem außerhalb des Videos liegen, z.B. bei zu großen Bildern oder zu vielen Skripten, die gleichzeitig geladen werden.
Gabe | Social Care @ Shopify
- War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen!
- Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung
- Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog
