Das Tumblr-Portfolio ist sehr langsam

Question

Erstens bin ich zu keinem Zeitpunkt ein Entwickler; Ich werde mein Bestes geben, um mich verständlich zu machen.

Ich habe mir (vor langer Zeit) ein Portfolio mit der Tumblr-Plattform erstellt. Es kann die beste Paltform sein oder auch nicht, ich weiß, aber ich mag es so und möchte es behalten, weil es für mich einfach ist, es zu aktualisieren.

Ich habe gerade Probleme, weil meine Seite seit 1 oder 2 Monaten extrem langsam geladen wird. Es kann 5 bis 30 Sekunden dauern! Ich denke, es gibt ein Optimierungsproblem, denn obwohl ein Youtube-Video angezeigt wird (was sich möglicherweise auf die Geschwindigkeit auswirkt), wird das Video abgespielt (Sie können den Ton hören), bevor das Laden der Seite abgeschlossen ist (wodurch das Video mehr wird) eine nervige Sache als eine nette Funktion)

Sie können selbst überprüfen: https://greatorex.fr

Ich habe den Inspektor in Firefox verwendet, um zu sehen, was beim Laden passiert. Es gibt einige Fehler, aber ich weiß nicht, wie ich sie interpretieren soll.

La ressource à l’adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic » a été bloquée en raison d’un type MIME (« text/html ») incorrect (X-Content-Type-Options: nosniff)

Während des Ladens kann ich unten links in Firefox sehen, dass es eine lange Zeit auf dieser Ressource bleibt. Ich habe die darin verwendete Schriftart geändert, aber dieser Schritt ist davon nicht betroffen.

Content Security Policy: Les paramètres de la page ont empêché le chargement d’une ressource à inline (« script-src »). Un rapport CSP est en cours d’envoi.

(Entschuldigung für die Franzosen, kann das nicht übersetzen)

Ich habe einige kleine Änderungen im Quellcode der Vorlage vorgenommen, aber nur HTML und (ein wenig) CSS-Änderungen, daher bin ich mir nicht sicher, warum dies das Laden der Seite beeinflusst.

Vielen Dank für Ihre Eingabe, ich werde sehr dankbar sein.

Einen schönen Tag noch.

Answer 1

Ich habe den Inspektor in Firefox verwendet, um zu sehen, was beim Laden passiert. Es gibt einige Fehler, aber ich weiß nicht, wie ich sie interpretieren soll.

La ressource à l'adresse « https://fonts.googleapis.com/css?family=Helvetica%20Neue:400,%20400,400italic,700,700italic »A été bloquée en raison d'un type MIME (« text / html ») falsch (X-Content-Type-Options: nosniff)

Inhaltssicherheitsrichtlinie: Die Parameter für die Gebührenerhebung («script-src»). Un rapport CSP est en cours d'envoi.

Sie können die oben genannten Fehler vollständig ignorieren. Diese haben keinen Einfluss auf die Seitengeschwindigkeit beim Laden:

• Die Inhaltssicherheitsrichtlinie unternimmt nichts, da sie von der tumblr-Plattform im Nur-Bericht-Modus veröffentlicht wird
• Der hier gemeinsam erläuterte Fehler fonts.googleapis.com (X-Content-Type-Options: nosniff) . Auf jeden Fall können Sie den Schriftartenserver von Google nicht stören. Überprüfen Sie einfach, ob dort Schriftarten vorhanden sind.

Auf den ersten Blick haben Sie die Seite mit animierten GIF-Bildern (GIFV von) überladen https://64.media.tumblr.com/....gifv) oder so ähnlich, siehe Googles Test . Wenn Sie verwenden <img src='animated.GIF'>, zeigt der Browser die Seite erst an, wenn alle diese Bilder vollständig geladen sind.
Es wird empfohlen, solche Animationen in das Videoformat zu konvertieren und stattdessen das -Tag zu verwenden <img>.
<video>Das Tag beginnt, Inhalte sofort anzuzeigen, während ein Rest des Videos geladen wird.

Sie können überprüfen, welche Elemente das Laden verlangsamen. Sie können einige Dienste von Drittanbietern verwenden und dann entscheiden, wie und was optimiert werden soll:

1. https://developers.google.com/speed/pagespeed/insights/ - Der Dienst misst nicht nur die Geschwindigkeit beim Laden von Seiten von Computern und Mobilgeräten, sondern gibt auch detaillierte Empfehlungen zur Beschleunigung der Website und weist auf Schwachstellen hin.

2. https://www.pingdom.com/ - Leistungsstarkes Tool, kostenpflichtig, aber es gibt eine Testversion für 14 Tage

3. https://developers.google.com/web/tools/chrome-devtools#network und https://developers.google.com/web/tools/chrome-devtools#performance(Da Sie bereits mit der Firefox-Entwicklerkonsole vertraut sind, begrüßen Sie die Google-Konsole.) - Sie können die Download-Geschwindigkeit schnell direkt im Google Chrome-Browser messen. Drücken Sie einfach die Taste F12, wechseln Sie zur Registerkarte Netzwerk und aktualisieren Sie die Seite.

4. https://www.dareboost.com/fr - analysiert viele Parameter und gibt praktische Empfehlungen

5. https://tools.keycdn.com/speed - zeigt an, wie viele Anfragen beim Laden der Seite gestellt wurden und welche Größe jede hat.

6. https://performance.sucuri.net/- Der Test misst, wie lange es dauert, eine Verbindung zu einer Website oder einer Seite herzustellen. Wichtig ist die "Zeit bis zum ersten Byte", die uns Auskunft darüber gibt, wie lange es gedauert hat, bis der Inhalt an Ihren Browser gesendet wurde, um mit der Seite zu beginnen

7. https://www.site24x7.com/ - Zeigt eine Zusammenfassung der Diagramme mit Aufschlüsselung des Inhalts nach Abfrage und Aufschlüsselung des Inhalts nach Größe.

Weitere Tools zum Überprüfen der Zugänglichkeit von Seiten:

• https://gtmetrix.com/ - Sie können die Serverregion auswählen, um die Geschwindigkeit beim Laden der Seite in verschiedenen Teilen des Planeten zu überprüfen

• https://www.dotcom-tools.com/website-speed-test.aspx - überprüft die Geschwindigkeit Ihrer Website in echten Browsern von 25 Standorten auf der ganzen Welt.

• https://www.webpagetest.org/ - Lädt die Seite zweimal, sodass Sie das Caching testen können