Ladereihenfolge einer Website steuern

didjee

Hallo,

hier mal eine Frage an die Cracks unter Euch. Beispiel ist die Apple.com Seite. Diese Seite wird wohl mit speziellen JS Skripts gesteuert. Heißt, bei der Seite werden Elemente oder Animationen einfach nur nach Bedarf geladen. Dadurch hat diese Seite unter anderem auf GTmetrix eine hervorragende Performance. Gibt es für WordPress ein Plugin mit der man die Ladereihenfolge bestimmen- oder sogar das unnötige Laden verhindern kann? Ist Quasi im Ansatz wie das interlaced Laden von Bildern. Nur möchte ich zum Beispiel auf der Seite nicht das die Bildgalerie mit geladen wird. Würde mich über Ansätze oder Ideen freuen.

LG Didjee

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SEpp55

... vielleicht hilft dir das weiter - LINK

didjee

Hallo und vielen Dank,
der Ansatz ist richtig und auch das Plugin sowie ähnliche sind mir bekannt. Nur möchte ich das zum Beispiel nur der Header Slider geladen wird und der rest nicht. Die andern Inhalte nach und nach beim Scrollen.

didjee

Ich versuche das jetzt noch mal mit Lazy Loading

meisterleise

Lazy Loading bezieht sich bei WP nur auf Bilder. Ist also weit entfernt von dem, was du dir wünscht.

didjee

Gibt es das was ich mir Wünsche?;)

meisterleise

Vermutlich nur, wenn du bei deiner Website WordPress weglässt. :D

didjee

Oho, jetzt wird es interessant. Conatao oder Drupal?

didjee

Oder Du sagst gelich Typo3?

meisterleise

Alles falsch. Ich wollte damit sagen, dass wahrscheinlich grundsätzlich ein CMS das Problem ist.
(Ich bin aber kein Informatiker. Würde selber mal gerne wissen, wie die Apple-Seiten so genau aufgebaut sind und was dahintersteckt.)

didjee

Sieht mir schwer Handcoded aus! Hatte mir mit einem Kumpel mal den Quelltext angesehen. Also Cracks

meisterleise

Ja, im Kern scheint da ja React JS hinterzustecken (nicht das ich Ahnung davon hätte).

didjee

Wo hast Du denn dieses React JS entdeckt? Im Quellcode, oder wo?

meisterleise

Ich habe diverse kleine nette Helferlein in FF, die Anzeigen, welches CMS und welche sonstige Technik so im Einsatz ist.

r23

Zitat von didjee

Sieht mir schwer Handcoded aus! Hatte mir mit einem Kumpel mal den Quelltext angesehen. Also Cracks

Die Seite verwendet fertige JS Frameworks
https://www.apple.com/ac/libs/hls.js/2.15.11/hls.js

=>
https://github.com/borisirota/webworkify-webpack

=>
https://webpack.js.org/guides/web-workers/

Das verhalten, was du sucht nennt sich - wie schon genannt - Lazy Loading

=>
https://webpack.js.org/guides/lazy-loading/

=> Hier Frameworks
Hier React: Code Splitting and Lazy Loading

Und Code Splitting
https://webpack.js.org/guides/code-splitting/

Hier eine typsiche Anwendung auf der Seite

HTML

<div class="hardware-composition-wrapper">
                                        <picture id="overview-design-design-display-pro-1" class="overview-design-design-display-pro image-hardware" data-lazy data-anim-scroll-group="DesignDisplay - Lazy Load" data-download-area-keyframe='{"start":"a0t - 150vh", "end": "a1t + 100vh", "anchors": [".section-design", ".section-5050-container"]}'>
                                            <source data-empty srcset="data:image/gif;base64,R0lGODlhAQABAHAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" media="(min-width:0px)" />
                                            <img src="/v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_large.png" onload="__lp(event)" alt>
                                        </picture>
                                        <noscript>
                                <picture class="overview-design-design-display-pro image-hardware">
                                    <source srcset="/v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_small.png, /v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_small_2x.png 2x" media="(max-width:734px)" /><source srcset="/v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_medium.png, /v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_medium_2x.png 2x" media="(max-width:1068px)" /><source srcset="/v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_large.png, /v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_large_2x.png 2x" media="(min-width:0px)" />
                                    <img src="/v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_large.png" alt>
                                </picture>
                            </noscript>

Alles anzeigen

Erste Zeile:

Code

<picture id="overview-design-design-display-pro-1" class="overview-design-design-display-pro image-hardware" data-lazy data-anim-scroll-group="DesignDisplay - Lazy Load" data-download-area-keyframe='{"start":"a0t - 150vh", "end": "a1t + 100vh", "anchors": [".section-design", ".section-5050-container"]}'>

data-lazy bei React - ein Tut aus 2020
https://www.digitalocean.com/community/tuto…ting-with-react

bei dem Bildern gibt es noch einen onload event. cool

HTML

<img src="/v/iphone-13-pro/f/images/overview/design/design_display_pro__d3dtminb414y_large.png" onload="__lp(event)" alt>

und dann gibt es eine Bereich für User ohne JavaScript (<noscript></noscript>)

soweit meine Interpretation

r23

ps... für das scrolling würde ich in react
[size=24]GSAP[/SIZE]verwenden
https://greensock.com/scrolltrigger/

anleitung
https://edidiongasikpo.com/using-gsap-scr…plugin-in-react

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Ladereihenfolge einer Website steuern

Jetzt mitmachen!