Wordpress löscht bei Beitragsänderungen das loading="eager" Google Attribut

MarcoE

Hallo zusammen,

seit mehr als 10 Stunden beschäftigt mich folgendes Problem:

Seit Google Chrome V.75 ist die Lazy Load Funktion automatisch für Grafiken und Videos im Browser integriert. Das ist an sich nichts Schlechtes, da man ja wichtige Dateien die unbedingt geladen werden müssen mit entsprechendem Befehl immer "Zwangsladen" kann. Bei der VG Wort also z.B. den extrem wichtigen Zählpixel. Markiert man diesen mit dem Attribut, dann wird er auch geladen, das sieht dann so aus:

Alles wäre ja so einfach, würde Wordpress beim Ändern der Beiträge nicht einfach dieses loading="eager" wieder automatisch entfernen.

Was kann ich dagegen tun, dass wordpress automatisch in meinem Code rumfummelt. Bei dem automatisch zwangsgesetzten "norefferer" konnte ich damals entgegensteuern, siehe: https://www.passives-einkommen-verdienen.de/wordpress-ab-5…ditor-ersetzen/

Das war sehr aufwändig! Gibt es für mein jetziges Problem eine leichtere Lösung? Ich will doch bloß das mein """"loading="eager"""""" Befehl drin bleibt. Chrome zählt sonst keine VG Wort Marken mehr wenn sie z.B. weiter unten im Beitrag erscheinen, da sie ja nicht mit lazy load geladen werden, wenn der Nutzer ja auch nicht soweit scrollt. Bei über 1000 Beiträgen auf meinen Blogs wäre es eine Tortur nun alle VG Wort Marken einzeln nach oben zu setzen, der Befehl an sich würde allein jedoch vollkommen reichen.

Wie zwinge ich wordpress dazu ihn zu belassen, auch bei Beitragsänderungen?

Ich bin für jede Hilfe sehr Dankbar!

Liebe Grüße
Marco

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

MarcoE

Nach mehr als 12 Stunden habe ich nun eine Umweglösung gefunden und den Wordpress Editor und seine automatischen Codeänderungen mit einem html snippet innerhalb der img Verweisung ausgetrickst :-)

Trotzdem bin ich natürlich für sauberere Lösungen offen :-)

LG
Marco

danielgoehr

Ganz allgemein:
Wordpress nimmt im visuellen Modus einiges an "Code-Optimierungen" vor. Das kann man mögen, kann aber in der Tag lästig sein. Es entfernt dabei eben auch Attribute und (manche) HTML-Elemente, wenn man zwischen Text- und Visuell-Modus hin- und her wechselt. Einzige Abhilfe ist hier, einfach im Text-Modus zu bleiben, was natürlich auch nicht immer und für jeden eine Lösung ist.

Aus o.g. Gründen gehören meiner Meinung nach Tracking-Codes (oder aber z.B. auch Javascript) generell *nie* in den Content.

Mögliche "saubere" Lösungen wären zum Beispiel (wobei es sicher auch noch weitere gibt):
Erstell dir einen entsprechenden Shortcode für das Tracking-Pixel oder verwende ein Custom Field und gib das Feld im Template (oder über einen Hook, z.B. "the_content") aus.

MarcoE

Hallo Daniel,

die VG Wort Pixel sind alle einzigartig, ich bräuchte über 1000 Shortcodes, ich habe es nun mit einer Kombination gelöst. Der Pixel wird wie immer einzeln in den Content eingefügt und nach der leeren "alt" Beschreibung kommt ein html ausführender Shortcode mit img Class ID und loading="eager". Jetzt klappt es endlich über alle Projekte hinweg einwandfrei. War das ne heftige Arbeit und Suche :-)

LG
Marco

danielgoehr

Eigentlich sind die doch immer gleich, nur halt mit unterschiedlichen IDs in der URL, oder? In dem Fall würde ein einziger Shortcode mit einem Attribut reichen...

Bambaataa

Zitat von danielgoehr

Eigentlich sind die doch immer gleich, nur halt mit unterschiedlichen IDs in der URL, oder? In dem Fall würde ein einziger Shortcode mit einem Attribut reichen...

Genau richtig. So sollte das gelöst werden. Das hat im Content nichts zu suchen. Das in auch "Zukunftssicherer" gerade was veränderte Codes angeht.

MarcoE

Wie wird dann die jeweilige ID dem Shortcode zugeordnet? Sorry, bin da nicht so affin drin. Ich habe es nun aber auf all meinen Webseiten geschafft, dass sowohl der eager Befehl drin bleibt, als auch mein eigenes lazy load plugin nicht die vg wort marke lazyloaded. Ich habe eine CSS Klasse den VG Wort Marken hinzugefügt und im Plugin ausgeklammert. Statt die Marke mit einem Shortcode einzufügen, wurde ein Shortcode mit "eager" in die jeweilige VG Wort img verlinkung eingefügt, der das eager atribut beim laden direkt hinzufügt.

LG
Marco

danielgoehr

Ungefähr so:

Code

function wpde_vg_wort_func( $atts ) {
  
$atts = shortcode_atts( array(
       'pixel_id' => '',
   ), $atts, 'vg_wort' );


$pixel_id = filter_var($atts['pixel_id'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH);


   return "<img src='http://vg04.met.vgwort.de/na/".$pixel_id."' width='1' height='1' alt='' loading='eager'>";
}
add_shortcode( 'vg_wort', 'wpde_vg_wort_func' );

Alles anzeigen

Dann kannst du den Shortcode so verwenden:

Code

[vg_wort pixel_id="693aeadff6cd24f9cb94366811ea5925d"]

Achtung: Ich habe das jetzt nur schnell runtergeschrieben und nicht getestet. Also bitte vor dem Produktiveinsatz nochmal drüber schauen.

b3317133

@danielgoehr Tipp am Rande: Statt des Filters könnte / sollte man [FONT=Courier New]esc_attr( $pixel_id )[/FONT] verwenden, oder [FONT=Courier New]esc_url( .. )[/FONT] mit der ganzen URL.

danielgoehr

Ja, es ist auf jeden Fall sinnvoll, die wordpress-eigenen Funktionen zu verwenden. Ich vergesse das zugegebenermaßen manchmal.

MarcoE

Hallo zusammen,

ich habe die Notlösung nun gegen ein VG Wort Plugin getauscht. Der Shortcode von [size=14]Daniel ist genial. Da kann ich noch viel mehr daraus basteln und mir fallen weitere Anwendungen ein. Vielen herzlichen Dank!
Eine Frage hätte ich noch, ich habe den Shortcode nun nicht mehr im Contentbereich, sondern ganz unten noch vor dem </body> der Seite im Quellcode. Er wurde mit dem Prosodia VGW OS Plugin umgesetzt, das mir die Arbeit in Zukunft auch sehr mit den ganzen Zählpixeln erleichtern wird, da ich die bisher alle händisch gesetzt hatte (über 700!) Das Plugin wirft den Zählpixel standardmäßig mit style="display:none" aus. Nun weiß ich nicht ob der neue Chrome 75 mit seiner automatisches LazyLoad Funktion den Zählpixel auch sofort lädt ohne den loading="eager" Befehl und somit dem direkten Hinscrollen ans Seitenende. Kann man irgendwo prüfen was der Google Browser ohne das man auch nur einen Zentimeter gescrollt hat alles lädt?
Ich habe das mal an einem sehr langen Beitrag geprüft, im Quelltext der Seite zeigt Chrome die VG Wort Marke zumindest an, nur lädt er die auch? Beispiel wie in diesem Fall zu einem sehr ausführlichen Beitrag, bei dem man vor allem mit dem Smartphone wirklich sehr lange scrollen muss um unten anzukommen: https://www.alternativ-gesund-leben.de/fischvergiftun…auf-behandlung/

Es wäre super wenn es da so eine Art Checktool gäbe ähnliche wie Pagespeed von Google oder Pingdom Tools bzw. gtmetrix. Letztere beiden zeigen mir im "Waterfall" zumindest das die VGWort Marke ausgegeben wird. Der Link + das gif.

LG
Marco[/SIZE]

danielgoehr

Schau mal in den Entwicklertools (Taste F12) im Tab "Netzwerk". Da kannst du genau sehen, was der Browser wann lädt.

Da sollte dann auch zu sehen sein, ob er das Pixel sofort lädt oder erst später.

MarcoE

oh ha, das sieht jetzt auf den ersten Blick etwas überfordernd aus :-) Aber unter Netzwerk zeigt er ihn an. Link und Pixel.gif

Vielen Vielen herzlichen Dank, das Forum hier ist super, insbesondere ein dickes Danke an Dich!

Liebe Grüße
Marco

b3317133

Lt. Dokumentation bei Google brauchst Du ab Chrome 75 das Attribut [FONT=Courier New]loading="eager"[/FONT], damit das direkte Laden sichergestellt ist. Als Standard wird [FONT=Courier New]auto[/FONT] verwendet, das heisst, der Browser entscheidet selbst.

MarcoE

Hallo b3317133,

das habe ich gelesen und es hat mich auch zunächst sehr zum nachdenken gebracht und über einige Tage beschäftigt, laut den dev tools von google Chrome 75 lädt der Pixel aber ordentlich ohne zum Seitenende zu scrollen. Entweder liegst am Plugin oder Chrome weiß vom vg wort Pixel der ja hunderttausendfach eingesetzt wird und klammert ihn automatisch aus oder er gibt ihn vielleicht aus weil style="display:none" angegeben ist. Hauptsache er macht es :-)

Grüße Marco

b3317133

Du willst also lt. Problembeschreibung sicherstellen, dass der Pixel auf jeden Fall geladen wird. In der Anleitung liest Du, wie man das sicherstellen kann, und bekommst auch entspr. Hilfe inkl. Code. Dann nutzt Du diese Möglichkeiten aber doch nicht, weil es ja derzeit auch so geht. Ok, muss man nicht verstehen... o_O

MarcoE

Hallo b3317133,

ich nutze nun ein vg wort Plugin um den Aufwand mit neuen Zählmarken zu reduzieren, das Plugin gibt die Marke leider ohne den Befehl loading="eager" aus. Ich werde die Tage den Code des Plugins durchgehen und versuchen dort das Attribut zu setzen. Die andere Variante bedarf es jeden Pixel einzeln, händisch mit ID zu ergänzen. Dank der Hilfe von Daniel weiß ich aber das Chrome die Zählmarke lädt so wie sie aktuell eingebaut ist. Das Attribut zur Sicherheit wäre mir natürlich auch lieber.

Gruß
Marco

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Wordpress löscht bei Beitragsänderungen das loading="eager" Google Attribut

Jetzt mitmachen!