War­um lädt mei­ne Websei­te langsam?

Tipps & Tricks zur Ver­bes­se­rung der Performance

 

War­um lädt mei­ne Websei­te langsam?

 

Drei Sekun­den Lade­zeit hören sich nicht nach viel an, doch sta­tis­tisch gese­hen hät­ten 40 % von Ihnen die­se Sei­te schon wie­der ver­las­sen, wenn sie zum Laden län­ger als drei Sekun­den gebraucht hätte.

Besucher ver­las­sen Web­seiten mit einer lan­gen Lade­zeit sogar bevor die ers­ten Inhal­te gela­den wur­den. Ver­mut­lich wegen der gerin­gen Tole­ranz der Besucher gegen­über lang­sa­men Web­seiten wur­de die Lade­ge­schwin­dig­keit einer Web­site von Google schon im Jahr 2010 als eige­ner Ran­king­fak­tor bestä­tigt. Eine lang­sa­me Web­seite kos­tet Sie also nicht nur Besucher, son­dern auch Plät­ze im Suchmaschinenranking.

Mes­sen Sie die Lade­ge­schwin­dig­keit Ihrer Website

Um her­aus­zu­fin­den ob Ihre Web­seite im objek­ti­ven Ver­gleich „lang­sam“ ist, soll­ten Sie zuerst die Lade­zeit messen.

Dazu stel­len wir hier kurz drei Mess­in­stru­men­te vor:

  1. https://developers.google.com/speed/pagespeed/insights/
    Page­Speed Insights wird von Google zur Ver­fü­gung gestellt. Wenn Sie hier die URL Ihrer Web­site ange­ben, erhal­ten Sie jeweils einen einen Score für die Desk­top-Ver­si­on und die mobi­le Ver­si­on Ihrer Web­site. Die maxi­mal erreich­ba­re Punkt­zahl ist jeweils 100. Die­se unter­schied­li­chen Scores sind sinn­voll, da beim Design der mobi­len Ver­si­on die zu erwar­ten­de lang­sa­me­re mobi­le Inter­net­ver­bin­dung bedacht wer­den sollte.
  2. https://gtmetrix.com/
    Mit GTMe­trix wird Ihre Web­seite ana­ly­siert und ein Punk­te­sys­tem hilft Ihnen dabei, die Schwach­stel­len zu iden­ti­fi­zie­ren und zu optimieren.
  3. https://tools.pingdom.com/
    Wir mögen die Tool­box von ping­dom sehr ger­ne, weil sie ähn­lich wie GTMe­trix mit Hil­fe eines Punk­te­sys­tems die Web­seite ana­ly­siert und klar struk­tu­riert die ver­bes­se­rungs­wür­di­gen Punk­te auflistet.
  4. https://www.experte.de/pagespeed
    Gera­de für meh­re­re par­al­le­le Test, um nicht nur eine Unter­sei­te, son­dern gleich­zei­tig meh­re­re Sei­ten zu prü­fen hat sich das Tool von experte.de als guter Hel­fer gezeigt. Im Hin­ter­grund nutzt die­ses Tool auch Goo­gles Page­speed Insight aus dem ers­ten Link.

Alle drei Tools geben Ihnen ähn­li­che, teil­wei­se aber auch ver­schie­de­ne Infor­ma­tio­nen zur Geschwin­dig­keit Ihrer Web­seite und Hin­wei­se zur Ver­bes­se­rung. Schau­en Sie sich am Bes­ten die Ana­ly­sen aller 3 Tools an und suchen Sie sich zur Optimierung der Lade­zeit zuerst die größ­ten „Zeit­fres­ser“ heraus.

Wovon hängt die Lade­zeit einer Web­site ab?

Die abso­lu­te Lade­zeit einer Web­site in Sekun­den ist varia­bel. Sie hängt von Fak­to­ren wie Inter­net­ge­schwin­dig­keit, Stand­ort des Nut­zers oder ver­wen­de­tem Brow­ser ab. Auf die­se Fak­to­ren haben Sie kei­nen Einfluss.

Schnel­le­re Lade­zeit: Die­se Fak­to­ren kön­nen Sie beeinflussen

Geschwin­dig­keit Ihres
Hos­ting­ser­vers

Anzahl und Grö­ße an Daten, die über­tra­gen wer­den
müs­sen

Anzahl an Datei­en, die par­al­lel über­tra­gen wer­den
kön­nen

Schnel­le­res Hosting

Ein wich­ti­ger Fak­tor für Lade­zeit und Such­ma­schi­nen­ran­king Ihrer Web­site ist die Zeit, die es braucht, bis der Ser­ver auf eine Anfra­ge reagiert, die soge­nann­te „Time To First Byte“.

Die Geschwin­dig­keit, in der auf eine Anfra­ge reagiert wird, hängt vom Ser­ver und damit vom Hosting Ihrer Web­site ab. Google erwar­tet für einen opti­ma­len Score, dass der Ser­ver inner­halb von 200 Mil­li­se­kun­den ant­wor­tet. Soll­te dies län­ger dau­ern oder die Dau­er einer Ser­ver­ant­wort zum Bei­spiel auf Grund einer Shared-Hosting-Platt­form schwan­ken, schafft ein bes­se­res Hosting hier Abhil­fe. Gera­de wenn Ihre Web­seite schon län­ger in dem­sel­ben Hos­ting­pa­ket läuft, kann es sein, dass die Hard- und Soft­ware Ihres Anbie­ters nicht mehr auf moder­nem Stand sind. Spre­chen Sie mit Ihrem Anbie­ter und den­ken Sie über ein schnel­le­res Hosting nach.

Oder schau­en Sie sich gleich unse­re super schnel­len SSD Hosting­pakete an!

WebHosting

Schnell, zuver­läs­sig, günstig!

Schnel­les Web­hos­ting mit SSL-Zer­­ti­­fi­­kat, unbe­grenz­ten E‑Mail Adres­sen und 7 Tagen Back­up inklusive – ab 7,95€ im Monat.

Mit unse­rem Umzugs-Service
[ohne Stress]

Web­hos­ting Pakete

Server-Hosting 

Vol­le Power für Ihre Website

Ein eige­ner vSer­ver, ganz auf die Bedürf­nis­se ihres Web­auf­trit­tes angepasst.

Wir set­zen Ihren Ser­ver auf –
indi­vi­du­ell & pro­fes­sio­nell!
[ohne Limits]

SSD Ser­ver Hosting

Website Per­for­mance Boost 

Unser Team sorgt für Rekord­zei­ten beim Laden – auch für Ihre Website!

Ihre Web­site lädt lang­sam, aber Sie wis­sen nicht, wo Sie mit der Optimierung anfan­gen sollen?

Wir unter­stüt­zen Sie!

Per­for­mance Optimierung

Maß­nah­men selbst ergrei­fen und Erfol­ge messen

Haben Sie her­aus­ge­fun­den, dass Ihre Web­seite ver­gleichs­wei­se lang­sam lädt?
Es gibt eini­ge Ein­stel­lun­gen, die Sie sofort vor­neh­men kön­nen, damit Ihre Web­site schnel­ler wird.

1. Bil­der optimieren

Bild ist nicht gleich Bild. Gera­de im Inter­net ist es wich­tig wie vie­le Daten wir über die Inter­net­lei­tun­gen unse­rer Besucher schi­cken. Eini­ge wer­den mit schnel­len Lei­tun­gen unter­wegs sein, aber gera­de Besucher auf dem Land oder Smart­phone User haben oft nur gerin­ge­re Über­tra­gungs­ra­ten verfügbar.

Ein kur­zes Bei­spiel. Ein Bild mit 1024kB (1MB) benö­tigt mit einer 16 MBit/s (2 MB/s) Inter­net­lei­tung eine hal­be Sekun­de bis es her­un­ter­ge­la­den wur­de. Wenn wir in unse­rer Bil­der­ga­le­rie 10 sol­cher Bil­der als Vor­schau­bild anzei­gen wol­len, war­tet der Besucher bereits 5 Sekun­den bis alle Bil­der gela­den wur­den. Das muss nicht sein. Gera­de Vor­schlau­bil­der kön­nen oft auf unter 100kB, also weni­ger als ein zehn­tel der Ursprungs­grö­ße gebracht wer­den, sodass alle 10 Bil­der ins­ge­samt nur eine hal­be Sekun­de der Lade­zeit verschlingen.

Bil­der zu opti­mie­ren ist einer der größ­ten und wirk­sams­ten Hebel, wenn die Web­seite schnel­ler wer­den soll.

2.Eine aktu­el­le PHP Ver­si­on nutzen

Nut­zen Sie ein PHP basier­tes CMS wie Word­Press, Joom­la, Typo3, Drup­al oder Con­tao? Dann ist es sinn­voll auf eine aktu­el­le PHP Ver­si­on, 7.x zu wech­seln. Vom mitt­ler­wei­le ver­al­te­ten PHP 5 auf PHP 7 haben die Ent­wick­ler, wah­re Geschwin­dig­keits­wun­der voll­bracht. Hier lohnt sich also der Blick in das Hos­ting­pa­ket und der Wech­sel auf PHP 7.

3. Brow­ser­cache aktivieren

Stel­len Sie sich vor, ein Stra­ßen­händ­ler sagt Ihnen, dass er einen Trick kennt, mit dem er die Lade­zeit Ihrer Web­seite deut­lich beschleu­ni­gen kann. Er ver­spricht Ihnen, dass Sie die­ser Geschwin­dig­keits­boos­ter kei­nen Cent kos­ten wird.
Sie sind natür­lich über­aus miss­trau­isch die­sen Ver­spre­chun­gen gegen­über – aber zu Unrecht!
Der Stra­ßen­händ­ler hat Ihnen gera­de dazu gera­ten, den Brow­ser­cache auszunutzen.

Was macht ein Browsercache?

Es ist ganz ein­fach: Er legt die Datei­en Ihrer Web­seite auf den Com­pu­tern Ihrer Web­sei­ten­be­su­cher ab. Sobald der Besucher auf Ihrer Web­seite wei­ter klickt, muss nur noch ein Teil der Datei­en gela­den wer­den, weil sta­ti­sche Inhal­te direkt vom Com­pu­ter Ihres Besu­chers gela­den werden.

Das hat meh­re­re Vorteile:

  1. die gespei­cher­ten Datei­en müs­sen nicht mehr über das Inter­net über­tra­gen werden
  2. Ihr Besucher spart Zeit beim Sei­ten­auf­bau und freut sich, dass Ihre Web­seite schnell lädt
  3. Sie freu­en sich, denn Ihr Ser­ver oder Ihr Hosting Paket benö­tigt weni­ger Res­sour­cen womit alle ande­ren Datei­en noch schnel­ler aus­ge­lie­fert wer­den können.

So akti­vie­ren Sie die Nut­zung des Brow­ser­caches für Ihre Webseite

Die meis­ten Web­hos­ter set­zen Apa­che als Web­ser­ver ein. Im Nor­mal­fall ist das Expi­re Modul zur Akti­vie­rung des Brow­ser­caches akti­viert und muss nur kon­fi­gu­riert werden.

Mit der Akti­vie­rung geben Sie dem Web­brow­ser Ihrer Besucher die Anwei­sung, dass die­se sta­ti­sche Datei­en vor­hal­ten sol­len, um die­se nicht bei jedem Sei­ten­auf­ruf vom Ser­ver erneut herunter­laden zu müs­sen, son­dern sofort in kür­zes­ter Zeit aus dem Cache abru­fen können.

Um den Brow­ser­cache für Ihre Web­seite zu akti­vi­ern fügen Sie die­sen Code­teil in Ihre .htac­cess Datei ein:

4. Zusam­men­fas­sen von CSS und Java­script Dateien

Stel­len Sie sich vor Sie möch­ten 20 Brie­fe ver­schi­cken.  Wenn Sie jeweils nur einen Brief pro Gang zum Brief­kas­ten mit­neh­men,  müss­ten Sie 20 mal zum Brief­kas­ten lau­fen, um alle Brie­fe zu ver­sen­den. Viel geschick­ter wäre es doch, alle 20 Brie­fe in einen Beu­tel zu ste­cken und alle in einem Gang zum Brief­kas­ten zu bringen.

Genau so ver­hält es sich mit den CSS und Java­script Datei­en, die für Aus­se­hen und Funk­tio­na­li­tät Ihrer Web­site ver­ant­wort­lich sind. Es dau­ert län­ger, wenn die­se Datei­en alle ein­zeln abge­ru­fen wer­den als wenn Sie sie zu je einer Datei zusammenfassen.

Zunächst kön­nen Sie die Anzahl der CSS- und Java­Script-Daten mini­mie­ren, indem Sie die­se aus­la­gern. Für CSS geschieht dies in einem soge­nann­ten Style­sheet, wel­ches das Design fest­legt. Es wird vom Ser­ver gela­den und gespei­chert. Im Anschluss müs­sen Infor­ma­tio­nen zum Aus­se­hen und zur For­ma­tie­rung der Web­site nicht an jeder Stel­le neu gela­den wer­den, son­dern es kann auf das Style­sheet zuge­grif­fen wer­den, wel­ches die Infor­ma­tio­nen bereit hält.

Java­Script-Datei­en kann man eben­falls in einer Datei zusam­men­fas­sen. So muss der Web­brow­ser Ihres Besu­chers nur eine Anfra­ge an den Web­ser­ver stel­len und bekommt direkt alle nöti­gen Java­Script-Infor­ma­tio­nen, um Ihre Web­seite rich­tig auf­bau­en zu können.

5. Den Quell­code kom­pri­mie­ren (Mini­fy)

Ein wei­te­rer Aspekt, der mit den CSS‑, Java­Script- und auch HTML-Datei­en zusam­men­hängt sind Leer­zei­chen und –zei­len im Code, die zwar der Les­bar­keit der Datei­en für den Pro­gram­mie­rer die­nen, die jedoch für das Funk­tio­nie­ren des Codes kei­ne Rol­le spielen.

Wird der Code zum Gene­rie­ren der Web­site gela­den, müs­sen alle Zei­chen des Doku­ments gele­sen wer­den – auch Leer­zei­chen. Streicht man nun die Leer­zei­chen und –zei­len, die nur der Les­bar­keit gedient haben, wird die Datei wesent­lich klei­ner und kann schnel­ler gela­den und aus­ge­le­sen wer­den. Die Web­site kann so schnel­ler ange­zeigt werden.

6. Ser­ver­sei­ti­ge Kom­pri­mie­rung akti­vie­ren (gzip)

Mit Hil­fe der Kom­pri­mie­rung auf dem Ser­ver ist es mög­lich die Daten­men­ge, die der Ser­ver zu Ihrem Besucher über­tra­gen muss deut­lich zu verringern.

Ihre Web­seite besteht aus vie­len ein­zel­nen Datei­en: Bil­dern, Vide­os, den vor­her ange­spro­che­nen Style­sheets und Java­script-Datei­en aber auch einem gro­ßen Teil an rei­nen Text­da­tei­en. Die­se ent­hal­ten den HTML-Quell­code für Ihre Webseite.

Die Datei­grö­ße rei­ner Text­da­tei­en kann mit moder­nen Kom­pri­mie­rungs­al­go­rith­men her­vor­ra­gend ver­rin­gert wer­den. Sie kön­nen sich das zu Nut­ze machen, indem Sie den HTML-Quell­code Ihrer Web­seite qua­si in eine .zip-Datei packen, bevor Ihr Besucher sie her­un­ter­lädt. Das ver­rin­gert die zu über­tra­gen­de Daten­men­ge deutlich.

So akti­vie­ren Sie die Kom­pri­mie­rung für Ihre Webseite

Alle gän­gi­gen Brow­ser unter­stüt­zen die kom­pri­mier­te Über­tra­gung der Datei­en vom Webserver.

Die­ser Code­teil ist ein guter Start für die Kom­pri­mie­rung Ihrer Web­da­ten. Fügen Sie die­sen Code­teil in Ihre .htac­cess-Datei ein:

7. Bil­der für das Web optimieren

Eine der häu­figs­ten Ursa­chen für lan­ge Lade­zei­ten sind zu „gro­ße“ Bil­der. Ein HD-Com­pu­ter­bild­schirm zeigt Ihnen ein Voll­bild mit 1920 x 1080 Pixeln an. Das sind umge­rech­net etwas weni­ger als 3 Mega­pi­xel. Moder­ne Han­dys neh­men Fotos von 8 bis 20 Mega­pi­xeln auf, Digi­tal­ka­me­ras auch mit über 100 Mega­pi­xeln. Mit der stei­gen­den Pixel­an­zahl in den Bil­dern steigt natür­lich die Datei­grö­ße der Bil­der, was wie­der­um zu einer län­ge­ren Lade­zeit führt.

Noch extre­mer wird der Unter­schied zwi­schen auf­ge­nom­me­nem und dar­ge­stell­tem Bild in der mobil abge­ru­fe­nen Ver­si­on Ihrer Web­seite. Die dort gela­de­nen und ange­zeig­ten Bil­der kön­nen noch deut­lich klei­ner sein als die der Desk­top­ver­si­on. Eine Bereit­stel­lung noch klei­ne­rer Bil­der für die mobi­le Ver­si­on der Web­seite kann sich loh­nen weil gera­de mobil oft kei­ne gute Inter­net­ver­bin­dung zum Laden Ihrer Web­site ver­füg­bar ist.

ACHTUNG: Reti­na Dis­plays und Goo­gles neu­es­tes Nexus Smart­phone haben eine zwei- bzw. drei­fa­che Pixel­tie­fe, was bedeu­tet, dass die Bil­der dop­pelt bzw. drei­fach so groß ange­legt wer­den soll­ten, sodass auf die­sen Dis­plays die Bil­der nicht ver­pi­xelt aussehen.

Alle Bil­der, die Sie auf Ihrer Web­site ver­wen­den, soll­ten daher vor dem Hoch­la­den für die Ver­wen­dung im Web ver­klei­nert wer­den. Für eine Anlei­tung wie Sie Bil­der von Hand mit Gimp ska­lie­ren kön­nen, lesen sie unse­ren Arti­kel „Wie opti­mie­re ich Bil­der fürs Web?“ Noch ein­fa­cher lassen sich Bil­der mit einem Online-Tool, zum Bei­spiel mit compressor.io oder optimizilla.com für die Dar­stel­lung im Inter­net optimieren.

Der Betrach­ter Ihrer Web­site merkt übri­gens nichts von der Ver­klei­ne­rung Ihrer Bilder!

8. Nut­zung eines Con­tent Deli­very Net­works (CDN)

Ein CDN kann Ihnen zwei Haupt­vor­tei­le bieten.

  1. Sta­ti­sche Datei­en wer­den über eine hoch­per­for­man­te Hos­ting­platt­form aus­ge­lie­fert, die Ihre Datei­en deut­lich schnel­ler an den Mann bringt als das nor­ma­le Hosting­pakete können.
  2. In den meis­ten gän­gi­gen Brow­sern ist das Limit für gleich­zei­ti­ge (par­al­le­le) Down­loads auf sechs Datei­en pro Host begrenzt. Die meis­ten Web­seiten bestehen aber aus mehr als sechs Datei­en. Hier hilft Ihnen ein CDN: Er sorgt dafür, dass der Brow­ser mehr Datei­en par­al­lel herunter­laden kann. Die Datei­en Ihrer Web­seite wer­den auf die Hosts www.example.com und cdn.example.com auf­ge­teilt. Damit kön­nen schon 12 Datei­en par­al­lel her­un­ter­ge­la­den werden.

 

Mit die­sen Fak­to­ren kön­nen Sie mit weni­gen Hand­grif­fen bereits viel bei der Optimierung der Lade­ge­schwin­dig­keit Ihrer Web­site bewirken.

Wün­schen Sie sich den einen oder ande­ren Tipp oder brauchen Sie Hilfe?
Ver­ein­ba­ren Sie jetzt einen kos­ten­lo­sen Rück­ruf mit einem unse­rer Techniker!

 

4.8/5 – (140 votes)