Schlagwort: Bilder

Einfache Möglichkeiten zur schnellen Optimierung einer WordPress Webseite

Die Opti­mie­rung einer WordPress Web­sei­te muss nicht immer auf­wen­dig sein. Ähn­lich dem Pare­to­prin­zip kann ein gro­ßer Teil der Opti­mie­rung mit ver­gleichs­wei­se gerin­gem Auf­wand erreicht wer­den. In die­sem Arti­kel stel­len wir ein paar ein­fa­che und schnel­le Opti­mie­run­gen für WordPress vor, die auch von Lai­en leicht ange­wen­det wer­den können.

Upgrade auf PHP 7 und höher

Ein Upgrade auf PHP 7 ist ein wah­rer Boos­ter für Ihre Web­sei­te. Eini­ge Funk­tio­na­li­tä­ten sind um das Dop­pel­te schnel­ler zur vor­an­ge­gan­ge­nen Ver­si­on. Zudem wird deut­lich weni­ger Arbeits­spei­cher benö­tigt, wodurch der Web­ser­ver zusätz­lich ent­las­tet wird und mehr Anfra­gen schnel­ler abar­bei­ten kann. Dane­ben ist die Rück­wärts­kom­pa­ti­bi­li­tät zur PHP Ver­si­on 5.6 gege­ben, wodurch das Risi­ko eines Wech­sels gering ausfällt.

Übli­cher­wei­se bie­ten Hos­ter die Mög­lich­keit die PHP-Ver­si­on über die Admi­nis­tra­ti­on des Ser­vers oder direkt über die .htac­cess zu wech­seln. Wenn ihr Hos­ter die Mög­lich­keit eines Wech­sels der PHP-Ver­si­on nicht unter­stützt, dann soll­ten Sie sich Gedan­ken um einen Wech­sel des Anbie­ters machen.

Falls Sie noch auf PHP 5.6 oder klei­ner unter­wegs sind, dann nut­zen Sie die­se ein­fa­che Mög­lich­keit des schnel­len Boosts. Für einen sol­chen Wech­sel kön­nen wir ihnen all-inkl.com (*) emp­feh­len. Ein Ver­gleich mit ihrem aktu­el­len Hos­ter lohnt sich in jedem Fall.

Hin­weis: Für eine funk­tio­nie­ren­de Umstel­lung kön­nen wir nicht Garan­tie­ren. Zurück auf die alter PHP-Ver­si­on bei Pro­ble­men soll­te ohne Wei­te­res mög­lich sein. Zur Sicher­heit soll­ten Sie hier jedoch vor der Umstel­lung ein Back­up machen. 

Plugin zur Optimierung der Geschwindigkeit

Wir sind immer wie­der über­rascht wie schnell eine WordPress-Web­sei­te durch die ein­fa­che Ver­wen­dung eines Opti­mie­rungs-Plug­ins der Geschwin­dig­keit wird. Nicht nur der HTML-Code wird hier vor­be­rech­net und sofort aus­ge­lie­fert, son­dern auch CSS- und Java­Script-Anfra­gen jeweils kom­bi­niert und ver­klei­nert. Die gene­rel­le Grö­ße der vom Ser­ver geschick­ten Datei­en kann durch die Gzip-Kom­pres­si­on ver­rin­gert wer­den und das Caching des Brow­sers für wie­der­keh­ren­de Besu­cher akti­viert werden.

Ein­stel­lun­gen im WP Fas­test Cache Plugin

Auf­grund unse­rer Erfah­rung und der beson­ders ein­fa­chen Bedie­nung emp­feh­len das Plug­in WP Fas­test Cache. Das Ergeb­nis ist für die meis­ten Web­sei­ten aus­rei­chend. Die Ein­stel­lun­gen sind so ein­fach, dass die Häk­chen aus dem obe­ren Bild in vie­len Fäl­len ein­fach über­nom­men wer­den können.

Hin­weis: Falls Sie einen Online­shop betrei­ben, z.B. mit WooCommerce, oder eine ande­re Sei­te die vie­le nut­zer­ab­hän­gi­ge Daten anzeigt, muss man beim Ein­satz eines sol­chen Plug­ins vor­sich­tig sein. Denn dann ist es oft not­wen­dig bestimm­te Sei­ten, wie den Waren­korb, vom Caching auszuschließen.

Tipp: Mit Hil­fe der kos­ten­lo­sen Web­sei­te webpagetest.org kann man sich das Ergeb­nis nach und vor der Opti­mie­rung anschauen.

Optimierung von Bildern

Die Opti­mie­rung der Bil­der einer WordPress-Web­sei­te trägt nicht nur bei Inhal­ten mit vie­len Bil­dern einen gro­ßen Anteil. Durch ihre Datei­grö­ße benö­ti­gen Bil­der im Ver­gleich zum Rest der Sei­te oft deut­lich mehr Band­brei­te und ver­zö­gern damit die Lade­zeit. Die­sen Fak­tor kann man in den meis­ten Fäl­len noch opti­mie­ren. Denn über eine ver­rin­ger­te Gesamt­grö­ße und somit schnel­le­re Aus­lie­fe­rungs­zeit der Sei­te freu­en sich nicht nur ihre Besu­cher son­dern auch die Such­ma­schi­nen. Gera­de im mobi­len Bereich wer­den die­se zwei Fak­to­ren durch die Such­ma­schi­nen getreu dem Mot­to “Je gerin­ger der benö­tig­te Traf­fic ihrer Sei­te, des­to bes­ser das Ran­king.” noch stär­ker berücksichtigt.

Fol­gen­de Punk­te sind in den meis­ten Fäl­len ohne Wei­te­res möglich:

  • Nut­zung von JPEG für Bil­der ohne Trans­pa­renz statt PNG
  • Ver­mei­dung der Ver­wen­dung der voll­stän­di­gen Bild­grö­ße in Beiträgen
  • Opti­mie­rung der bereits bestehen­der Bil­der durch das EWWW Image Opti­mi­zer Plugin
    • Kom­pri­mie­rung bereits bestehen­der JPEG-Bilder
    • Kon­ver­tie­rung von bereits bestehen­den PNG-Bil­der ohne Trans­pa­renz nach JPEG. Bil­der mit einer Trans­pa­renz kön­nen hier­mit auch nach JPEG kon­ver­tiert wer­den. Dafür muss eine Far­be gesetzt wer­den mit der der trans­pa­ren­te Hin­ter­grund gefüllt wird.

Genaue­re Infor­ma­tio­nen fin­den Sie in unse­rem Arti­kel zur Bil­der­op­ti­mie­rung.

Einspielen von Updates

WordPress, The­me und Plug­ins immer auf dem aktu­el­len Stand zu hal­ten, ist nicht nur eine Fra­ge der Sicher­heit, son­dern auch gut für eine opti­mier­te Sei­te. Red­un­dan­te Funk­tio­na­li­tä­ten und Anfra­gen kön­nen durch Updates redu­ziert wer­den. Neben neu­en Fea­tures wer­den auch kon­ti­nu­ier­lich Ver­bes­se­run­gen am Quell­code vorgenommen.

Nicht verwendete Plugins deaktivieren

Wer­den wirk­lich alle Plug­ins die instal­liert sind benö­tigt? Vie­le Plug­ins bedeu­tet in der Regel: viel Logik die abge­ar­bei­tet wer­den muss, erhöh­tes Risi­ko für Sicher­heits­lü­cken und erhöh­ter War­tungs­auf­wand für Update und Kom­pa­ti­bi­li­tät. Deak­ti­vie­ren Sie Plug­ins die nicht mehr benö­tigt werden.

Auf fol­gen­den Din­ge soll­ten Sie dabei achten:

Verwendung von Plugins des Themes

Ins­be­son­de­re bei der Ver­wen­dung von Pre­mi­um-The­mes erle­ben wir es immer wie­der, dass unnö­tig vie­le Plug­ins instal­liert und akti­viert sind. Aus Sicht des Anwen­ders ist es natür­lich ein­fa­cher, da er alle Fea­tures sofort nut­zen kann. Nor­ma­ler­wei­se wird aber nur ein Bruch­teil davon benö­tigt. Zwei, drei oder mehr Slider sind bei­spiels­wei­se kei­ne Sel­ten­heit. Sie soll­ten sich dann für einen ent­schei­den und die Ande­ren deak­ti­vie­ren bzw. löschen. Oft unter­stüt­zen The­mes aber auch ande­re Plug­ins, wie WooCommerce und emp­feh­len dem Anwen­der direkt die­se zu instal­lie­ren. Hier soll­te man ein­fach dar­auf ach­ten, dass man nicht gleich alles unge­le­sen durch­klickt, instal­liert und aktiviert.

Selten verwendete Plugins

Plug­ins, die nur spo­ra­disch benö­tigt wer­den, z.B. um Sys­tem­in­for­ma­tio­nen abzu­fra­gen, soll­ten auch nur dann akti­viert wer­den, wenn man sie tat­säch­lich braucht.

Plugins regelmäßig überprüfen

Manch­mal sind Plug­ins ver­al­tet und es gibt mitt­ler­wei­le bes­se­re Alter­na­ti­ven. Hin und wie­der kommt es auch vor, dass eine Funk­ti­on mitt­ler­wei­le auch durch WordPress selbst umge­setzt wur­de und das Plug­in ein­fach obso­let gewor­den ist.

Nützlichkeit von Plugin-Funktionalität in Frage stellen

Oft kommt es vor, dass man sich ein Plug­in instal­liert, wel­ches eine Klei­nig­keit ver­schö­nert. Hier soll­te man abwä­gen, ob es nicht ohne geht. So gibt es Anwen­der, die sich etwas instal­lie­ren, um die Log­in­mas­ke auf­zu­hüb­schen, obwohl sie der ein­zi­ge Nut­zer im Sys­tem sind.

Nicht benötigte Theme-Features deaktivieren

Das gilt auch insb. für Pre­mi­um-The­mes, die beson­ders vie­le Funk­tio­nen bie­ten. Vie­le The­mes erlau­ben es kom­plet­te Funk­tio­na­li­tä­ten, wie eige­ne Slider, oder die Unter­stüt­zung für belieb­te Plug­ins, zu deak­ti­vie­ren. In der Regel wird die Admi­nis­tra­ti­on dadurch schlan­ker und dem Anwen­der weni­ger CSS- und Java­Script-Datei­en ausgeliefert.

Tipp: Vie­le The­mes nut­zen heut­zu­ta­ge einen soge­nann­ten Prel­oa­der. Das heißt der Nut­zer sieht beim Sei­ten­auf­ruf erst einen Lade­krin­gel. Deak­ti­vie­ren Sie die­sen nach Mög­lich­keit, denn der erzeugt oft­mals nur eine künst­li­che Pau­se ohne ech­ten Nutzen.

Weniger ist mehr

Bei dem auf ihrer Web­sei­te durch einen neu­en Besu­cher, wer­den die meis­ten Daten wie Skript- und CSS-Datei­en gela­den. Wei­te­re Auf­ru­fe sind meist gar nicht mehr so lang­sam da der Brow­ser des Besu­chers die­se Daten zwi­schen­spei­chert. Da vie­le Nut­zer häu­fig über die Start­sei­te kom­men, kann man hier beson­ders gut opti­mie­ren, indem man die­se mög­lichst schlank hält und somit ein zügi­ges Anzei­gen der Inhal­ten erlaubt. Ist das ers­te Ele­ment bei­spiels­wei­se ein rie­si­ger Voll­bilds­li­der, ist es wahr­schein­li­cher das neue Nut­zer lan­ge war­ten müs­sen und eher frus­triert sind. Ver­zich­ten sie gene­rell auf unnö­tig vie­le Bil­der und Effekte.

Tipp: Keep it simp­le and clean.

Fazit

Nicht immer ist es not­wen­dig das The­me zu Wech­seln, den Quell­text zu opti­mie­ren oder beson­ders schnel­len Web­space zu buchen. In vie­len Fäl­len reicht es aus, mit die­sen ein­fa­chen Mit­teln eine deut­lich spür­ba­re Opti­mie­run­gen vorzunehmen.

Soll­ten Sie den­noch unsi­cher sein und möch­ten das lie­ber einem Pro­fi machen las­sen, kon­tak­tie­ren Sie uns ein­fach.

(*) Gekenn­zeich­ne­te Links ent­hal­ten Affiliate-Link

 

Tipps für Bilder

Es gibt ver­schie­de­ne Grün­de, war­um man auch Bil­der mit Sorg­falt vor­be­rei­ten soll­te, z.B. kann man durch gute Bil­der bes­se­re Auf­find­bar­keit in Such­ma­schi­nen erzeu­gen oder Men­schen mit Bein­träch­ti­gung beim Besuch der Sei­te unter­stüt­zen. Der fol­gen­de Arti­kel gibt ein paar ein­fa­che Hinweise.

JPEG statt PNG bei Fotos

Bei Bil­dern mit vie­len Details, insb. Fotos, soll­te man das JPEG-For­mat ver­wen­den, da die­ses bes­se­re Algo­rith­men zur Abspei­che­rung sol­cher Bil­der ver­wen­det. Dar­aus resul­tiert dann meist eine klei­ne­re Datei­grö­ße, bei glei­cher Qua­li­tät. Das wirkt sicher wie­der­um posi­tiv auf die Lade­zeit im Brow­ser beim Nut­zer aus. Zusätz­lich emp­fiehlt es sich bei JPEG-Bil­der die Qua­li­tät auf einen Wert zwi­schen 80% und 90% zu stel­len. Das hat eine wei­te­re Reduk­ti­on der Grö­ße zur Fol­ge. Der Nut­zer merkt den Qua­li­täts­un­ter­schied in der Regel nicht.

Im fol­gen­den Bei­spiel ist das glei­che Bild in 3 ver­schie­de­nen Abspei­che­run­gen dar­ge­stellt. Sub­jek­tiv merkt man kaum einen qua­li­ta­ti­ven Unterschied:

 

PNG mit 223 KB

PNG: 223 KB

 

JPEG mit 100% Qualität: 100KB

JPEG mit 100% Qua­li­tät: 100KB

 

JPEG mit 80% Qualität: 26 KB

JPEG mit 80% Qua­li­tät: 26 KB

Vie­len Dank an Ste­fa­nie Ker­ner für die Bilder.

“Vollständige Größe” vermeiden

moewe-io_-_tipps_bilder_-_vollstaendige_groesse_vermeidenFügt man Bil­der ein­fach so ein, dann endet man oft mit der voll­stän­di­gen Grö­ße. In vie­len Fäl­len ist die­se nicht opti­mal, da viel zu groß. Gene­rell soll­te man aus den ver­füg­ba­ren Grö­ßen die wäh­len, wel­che für den aktu­el­len Bei­trag am geeig­nets­ten ist.

Dank src­set und sizes, wel­che mitt­ler­wei­le von WordPress nativ unter­stützt wer­den, dürf­te die­ses Pro­blem aller­dings nicht mehr die­se gro­ße Rol­le spielen.

Der Dateiname

Ein gut gewähl­ter Name hilft. Oft­mals hei­ßen die Bil­der so, wie die Kame­ra sie benennt, z.B. IMG123456.jpg.

Ein Mus­ter könn­te fol­gen­des sein:

Adresse_der_Seite-_Was_ist_zu_sehen.jpg

Ein Name dann z.B.

schwedenhaus-experten.de_-_Einfamilienhaus_-_Kronan-110.jpg

Keine Umlaute und Sonderzeichen im Dateinamen

Man mag es nicht glau­ben, aber es ist auch heut­zu­ta­ge noch sinn­voll auf Umlau­te oder ande­re “beson­de­re” Son­der­zei­chen im Datei­na­men zu ver­zich­ten. Spä­tes­tens bei einem Ser­ver­um­zug merkt man es.
Am Bes­ten nur fol­gen­de Zei­chen nut­zen: Buch­sta­ben von A‑Z, Zah­len, Unter­strich und Bindestrich.

Meta-Informationen

In WordPress ist es mög­lich eini­ge Infor­ma­tio­nen zum Bild, wie einen Titel, alter­na­ti­ven Text und Beschrei­bung ein­zu­fü­gen. Die­se soll­ten nach Mög­lich­keit immer aus­ge­füllt werden.

Beson­ders wich­tig ist es einen aus­sa­ge­kräf­ti­gen Titel zu ver­ge­ben, wel­cher kurz sagt, was auf dem Bild zu sehen ist, z.B. “Dop­pe­haus­hälf­te im Grü­nen”. Für Men­schen mit Beein­träch­ti­gung soll­te in jedem Fall auch der “Alter­na­ti­ve Text” ange­ge­ben wer­den, da die­ser von Screen­rea­dern Alter­na­ti­ve zum visu­el­len Bild ver­wen­det wer­den. Der Text könn­te z.B. “Rote Dop­pel­haus­hälf­te von Vor­ne im Grünen”.

Meta-Informationen nachträglich bearbeiten

Die Infor­ma­tio­nen zu Bil­dern las­sen sich nach­träg­lich unter “Medi­en” -> “Medi­en­über­sicht” bearbeiten.

Plugin-Empfehlungen

Es gibt natür­lich ein paar Plug­ins, die dabei hel­fen ver­schie­de­ne Regeln einzuhalten.

EWWW Image Optimizer

Der EWWW Image Opti­mi­zer unter­stützt dabei Bil­der auto­ma­tisch neu zu kom­pri­mie­ren und sie somit noch­mal etwas zu verkleinern.

Imsanity (obsolete)

Hin­weis: Die Funk­tio­na­li­tät, wird nun auch vom EWWW Image Opti­mi­zer unter­stützt, somit ist Imsa­ni­ty nicht mehr notwendig.

Imsa­ni­ty ist ein wei­te­res sehr nütz­li­ches Plug­in. Vie­le Autoren laden Bil­der ein­fach so hoch, wie sie sind, meist in viel zu hoher Auf­lö­sung und viel zu groß. Imsa­ni­ty hilft dabei, in dem es hoch­ge­la­de­ne Bil­der auto­ma­tisch auf eine maxi­ma­le Höhe bzw. Brei­te redu­ziert. Damit kann man enorm viel Spei­cher­platz spa­ren und sorgt gleich­zei­tig dafür nicht die schön hoch­auf­ge­lös­ten Fotos zu verteilen.

Bilder neu verlinken

Wenn man Bil­der in Arti­kel oder Bei­trä­ge ein­fügt, dann wer­den die­se in der Regel direkt auf das Bild ver­linkt. Oft­mals will man aber, dass Bil­der auf eine ande­re Sei­te ver­lin­ken oder gar kei­ne Akti­on durch­ge­führt wird.

Der fol­gen­de Arti­kel zeigt, wie man Bil­der neu ver­lin­ken kann, nach­dem die­se bereits mit dem Edi­tor ein­ge­fügt wurden.

Bild bearbeiten

Um das Bild zu bear­bei­ten, muss es im Edi­tor mit der Maus ange­klickt wer­den. Dann kann mit Klick auf den Bear­bei­ten­knopf (klei­ner Stift) in den Bear­bei­ten­mo­dus gewech­selt werden.

bilder_verlinken-Auswahl.jpg

Bild verlinken

Im dar­auf erschei­nen­den Dia­log kann man nun unter “Link zur” die Ver­lin­kung des Bilds ändern, dabei gibt es fol­gen­de Möglichkeiten:

  1. “Medi­en-Datei”: Ver­linkt auf das Bild
  2. “Anhang-Sei­te”: Ver­linkt auf eine Sei­te, wel­che ledig­lich das Bild und gege­ben­falls wei­te­re Infor­ma­tio­nen (z.B. die Beschrei­bung) dazu enthält.
  3. “Benut­zer­de­fi­nier­te URL”: Ver­linkt auf eine belie­bi­ge Adres­se, z.B. eine ande­re Internetseite.
  4. “Kei­ne”: Das Bild wird nicht verlinkt.

bilder_verlinken-link_einstellen.jpg

Dann noch Spei­chern und Fertig!

Cookies erleichtern die Bereitstellung unserer Dienste. Mit der Nutzung unserer Dienste erklären Sie sich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen