2 blockierende Skript-Ressourcen und 12 blockierende CSS-Ressourcen

Hallo liebe WP Freunde und frohe Ostern,

nach vielen Wochen der Fehlersuche, ist meine Website nun endlich "responsive" aber leider überaus lahm und ich bin, was das betrifft, echt am Ende meines Lateins. :???:
Das Problem bei den Erklärungen im Internet ist, dass jeder von seinem Wissensstand aus erklärt und oft die wichtigsten und relevanten Information fehlen.
Wenn ich nach einer Antwort suche, muss ich mich zuerst durch lange Einführungen und Wiederholungen lesen, um an Erklärungen wie: "den Schalter im Admin Panal einfach auf "responsive" stellen." zu erhalten.... :roll:
Ich habe nun folgende Frage:
Wie beseitige ich JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) ?

Java Script -

• http://astronja.de/…-includes/js/jquery/jquery.js?ver=1.11.3
• http://astronja.de/…s/jquery/jquery-migrate.min.js?ver=1.2.1

CSS-Ressourcen -

• http://astronja.de/…t-form-7/includes/css/styles.css?ver=4.4
• http://astronja.de/…riff/css/shariff.min.local.css?ver=4.4.2
• http://fonts.googleapis.com/…talic&subset=latin%2Clatin-ext&ver=4.4.2
• http://fonts.googleapis.com/…2C300&subset=latin%2Clatin-ext&ver=4.4.2
• http://astronja.de/…/blogoma/css/bootstrap.min.css?ver=4.4.2
• http://astronja.de/…ntent/themes/blogoma/style.css?ver=4.4.2
• http://astronja.de/…themes/blogoma/css/blogoma.css?ver=4.4.2
• http://astronja.de/…mes/blogoma/css/flexslider.css?ver=4.4.2
• http://astronja.de/…ss/skin/mediaelementplayer.css?ver=4.4.2
• http://astronja.de/…-counter/assets/css/widget.css?ver=1.3.2
• http://astronja.de/…mes/blogoma/css/custom-css.css?ver=4.4.2

Freue mich über Tipps und Auskünfte, die mich der Lösung näher bringen, weil so geht es nicht weiter. Die Seite wird zu einer echten Belastung und macht keinen Spaß mehr. :( Dabei denke ich, es kann es so schwer nicht sein, es sollte eigentlich hinzukriegen sein. 8)

DANKE!

http://themeforest.net/item/blogoma-s…7868656/support

http://themeforest.net/item/blogoma-s…7868656/supporthttp://astronja.de/

Hm, keine einzige Reaktion auf meinen Beitrag, dabei wurde er schon von 64 Leuten aufgerufen. :roll:

Scheinbar hat hier niemand Ahnung von der Materie oder es will mir keiner von euch helfen.
Letzteres kann verschiedene Gründe haben, nur dann sollte ich darüber informiert werden.
Jedenfalls finde ich das Verhalten hier schon rechts sonderbar und wenig zielführend.
Ich habe auf meinen anderen Beitrag einige Privatnachrichten mit Hilfsangeboten erhalten aber da ist bisher auch nichts bei raus gekommen.
Darin erzählt mir jeder, was er ist und was er kann aber dann höre ich nichts mehr von ihnen. HALLO ???

Danke, was anderes habe ich nicht erwartet!

Zitat von Bitpalast

Das Problem kann sehr wahrscheinlich nicht behoben werden, ohne dass Sie wesentliche Gestaltungsänderungen an Ihrer Seite vornehmen.

"Above the fold" bedeutet: Der Teil der Darstellung, der oberhalb des unteren Fensterrahmens sofort gerendet werden sollte, wenn eine Seite lädt. Das ist in Ihrer Konfiguration aber ausgeschlossen, weil Sie die genannten CSS- und JS-Dateien brauchen, um einen Teil der Inhalte, die sich im oberen Seitenbereich befinden, überhaupt darstellen zu können.

Die einzig mögliche Näherung an eine Lösung ist, genau die Elemente in den CSS-Dateien zu identifizieren, die benötigt werden, um den above-the-fold-Teil darzustellen, diese aus den Stylesheets zu entfernen und stattdessen inline in die Seite einzubauen. Das ist auch die von Google empfohlene Vorgehensweise. Sollten dies aber sehr viele Elemente sein (angesichts der langen Liste von CSS-Dateien ist das vermutlich so), bringt das auch nichts, denn dann wird Google reklamieren, dass das Inline-Element zu lang ist. Die JS-Dateien können meistens nicht nachträglich geladen werden, weil andere Seitenteile davon abhängen und die JS-Ausführung eventuell blockiert, wenn JQuery nicht zur Verfügung steht, entsprechend danach auch nichts asynchron nachgeladen werden kann.

Einzig die Webfont-Dateien können Sie dynamisch nachladen, d.h. aus der statischen Liste entfernen und stattdessen mit einen "onload"-Ereignis der Seite verknüpfen. Dort führen Sie aus (Pfade und Namen müssen Sie natürlich noch anpassen):
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>

Alles anzeigen

Herzlichen Dank für ihre Beschreibung, ich weiß schon was above-the-fold-heißt und auch was Google schreibt.
[COLOR=#ff0000][/COLOR][COLOR=#ff0000][/COLOR][COLOR=#ff0000][/COLOR][COLOR=#ff0000][/COLOR][COLOR=#000000]Doch jetzt meine Fragen:[/COLOR]
Das ist in Ihrer Konfiguration aber ausgeschlossen, weil Sie die genannten CSS- und JS-Dateien brauchen, um einen Teil der Inhalte, die sich im oberen Seitenbereich befinden, überhaupt darstellen zu können. [COLOR=#ff0000]Warum habe ich die CSS- und JS Datein nicht, wenn sie doch notwendig sind?

[/COLOR]Die einzig mögliche Näherung an eine Lösung ist, genau die Elemente in den CSS-Dateien zu identifizieren, die benötigt werden, um den above-the-fold-Teil darzustellen,
[COLOR=#ff0000]Sind das nicht die Dateien, die ich oben in meinem Beitrag angegeben habe?
[/COLOR]
diese aus den Stylesheets zu entfernen und stattdessen inline in die Seite einzubauen. Das ist auch die von Google empfohlene Vorgehensweise.
[COLOR=#ff0000]Richtig, aber was soll mir das sagen b. z .w. was entferne ich aus welchem Stylesheet von welcher Stelle? Was und wo ist Inline? Was ist mit "einbauen" gemeint? Mit Seite ist das Stylesheet gemeint, oder? Ich muss genau wissen, welche Daten ich von wo nach wo in welche Dateien - p.h.p- oder Stylsheets ex- und importieren soll. Ich weiß schon um was es geht aber für diese Aktion brauche ich eine genauere Ablaufbeschreibung. Mag sein,dass ich jetzt wieder gemeckert bekomme, ich wolle an die Hand genommen werden und all so ein Kram aber ich bin Leie und was ich auf meiner Seite habe, dass habe ich bisher alles alleine gemacht, mir jeden Schritt angelesen, das meiste in englisch.

[/COLOR]Sollten dies aber sehr viele Elemente sein (angesichts der langen Liste von CSS-Dateien ist das vermutlich so), bringt das auch nichts,
[COLOR=#ff0000][/COLOR][COLOR=#ff0000][/COLOR][COLOR=#ff0000]Die genaue Anzahl ist doch oben angegeben oder nicht? Angesichts welcher langen Liste von CSS- Dateien ist was vermutlich so und wieso bringt das auch nichts?

[/COLOR]
Einzig die Webfont-Dateien können Sie dynamisch nachladen, d.h. aus der statischen Liste entfernen und stattdessen mit einen "onload"-Ereignis der Seite verknüpfen. Dort führen Sie aus (Pfade und Namen müssen Sie natürlich noch anpassen):
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>

[COLOR=#ff0000]Danke aber letzteres hilft mir so nicht weiter, wegen oben angegebener Problemstellung.

[/COLOR][COLOR=#000000]Jetzt haben wir meinen Beitrag ja noch einmal durchgesprochen und für alle verständlicher gemacht, meine Fragen auch.
Hoffe es geht weiter und ich erhalte etwas Unterstützung von euch. [/COLOR][COLOR=#ff0000]Danke!

[/COLOR][COLOR=#ff0000][/COLOR][COLOR=#000000][/COLOR][COLOR=#ff0000][/COLOR][COLOR=#ff0000][/COLOR]
[COLOR=#ff0000][/COLOR][COLOR=#ff0000][/COLOR]

Zitat von AausB

Ich kann nur sagen, setzt Autoptimize und bei gefallen auf das Cache-Enabler Plugin. Die Probleme mit den blockierenden Ressourcen werden verschwinden. Und es gibt noch weitere nette Vorteile die diese Plugins mit an Board haben.

Die Einstellungen der Plugins sind recht einfach erklärt und man hat sie in null komma nix produktiv.
Ich hätte grad fast vergessen das ich selbst vor kurzem einen Artikel zu diesem Thema auf meinem Blog veröffentlicht habe.
Schau mal auf die Seite https://www.appentwicklerblog.de/wordpress-lade…speed-insights/ wenn du an der Performance deiner Seite schrauben willst.

Gruß

Herzlichen Dank für den Hinweis, habe mir die Seite angeschaut und habe dazu einige Fragen:
Google Fonts

Standardmäßig lädt Wordpress die Schriftart in der Kopfzeile. Dies führt automatisch zu blockierenden Ressourcen. Um dies zu beheben installieren wir ein kostenloses Plugin namens „Disable Google Fonts“. Vereinzelt bieten Themes diese Funktion in ihren eigenen Einstellungen. Dort sollte man zuerst nachschauen.
Wir laden unsere Google-Schrift mit dem folgenden Code in der Fußzeile, direkt vor dem </ body> -Tag.
<link href='https://fonts.googleapis.com/css?family=Noto+Serif:300,500,700' rel='stylesheet' type='text/css'>
[COLOR=#ff0000]Wo befindet sich die Fußzeile denn genau?
Wo finde ich den Hinweis über Fonts Einstellungen im Theme, um da zuerst nachzuschauen?
[/COLOR][COLOR=#000000]Danke für Ihre / Deine Bemühungen[/COLOR].

Zitat von Monika

nein
nicht WP lädt die Schriften in den header, sondern das jeweilige Theme
der Unterschied ist sehr verkürzt so: WP ist das Auto, das Theme der Lack :-)

wenn du die Schriftart deines Themes => Google Font deaktivierst, hast du ein sehr anders Layout=> keine Ahnung, ob es dir dann gefällt.

wenn du die Schrift erst im html Footer lädst dann kommt es zum "Flackern", wenn jemand deine Site nicht in seinem Browsercache hat => deine Entscheidung, ob du das in Kauf nimmst

und das Plugin autooptimize schlug ich auch vor, hast es vermutlich überlesen :-)

Hallo Monika, danke für deinen Hinweis, ich weiß im Moment nicht, ob ich Google Fonts, Krikelkrakel Fonts oder Blogoma`s Hieroglyphen Im Theme habe, weil ich nicht weiß, wo ich den Hinweis überhaupt finden soll.
Ich habe vorhin noch ein Bild/Grafik mit der Bezeichnung "Server" hinzugefügt, darauf kannst du erkennen, dass ich das autoptimize Plugin am 14.02.2016 installiert habe. Vielleicht ist mir dabei ein Fehler unterlaufen oder ich muß noch weitere Einstellungen vornehmen, von denen ich bisher keine Ahnung habe. Ich erkenne nämlich noch nicht den Nutzen von diesem Plugin.
Mühsam ernährt sich das Eichhörnchen ...
Was ich verstehe, setzte ich um und mit dem Rest gehe ich euch auf den Geist, weil ich ´s nicht verstehe. Verstehste? ;-)

War lange nicht mehr hier, weil es nichts bringt.