eigentlich wollte ich keinen beitrag schreiben.. aber nachdem ich ein wenig hier und da gelesen habe hat mich letztendlich doch ein beitrag hier dazu veranlasst ein paar dinge zu schreiben..
und um beispiele in sachen optimierung geben zu können, habe ich mir einfach einen shop aus den beiträgen herausgepickt:
www.accio-shop.dees soll sich bitte niemand auf den schlipps getreten oder blöd angemacht fühlen. der shop bietet sich quasi an, einige maßnahmen in sachen optimierung und performance beispielhaft zu erklären.
grundsätzliches..
1) javascripte und stylesheets soweit möglich, sinnig und machbar zusammenfassen und minimieren.
<link rel
="stylesheet" href
="templates/css/stylesheet.css" type
="text/css" /><link rel
="stylesheet" href
="templates/css/thickbox.css" type
="text/css" /> den inhalt von "thickbox.css" nehmen und in die vorhandene stylesheet.css am ende wieder einfügen. und schon hat man einen request weniger, es bleibt nur noch die stylesheet.css.
normal:
<script src="templates/js/jquery.js" type="text/javascript"></script>
<script src="templates/js/thickbox.js" type="text/javascript"></script>
<script src="templates/js/jquery-ui.js" type="text/javascript"></script>
<script src="templates/js/autofading.js" type="text/javascript"></script>
<script src="templates/js/jquery.min.js" type="text/javascript"></script>
<script src="templates/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="templates/js/slides.min.jquery.js" type="text/javascript"></script>
optimiert:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="templates/js/jquery.min.js"><\/script>')</script>
<script src="templates/js/scripts.js" type="text/javascript"></script>
<script src="templates/js/jquery-ui.js" type="text/javascript"></script>
bei den javascripts verfahren wir wie bei den stylesheets. aus dem org. rauskopieren und in eine eigene js datei kopieren. untereinander weg. am besten vor jedes reinkopierte immer einen kommentar schreiben, um welches script es sich handelt.
und immer testen, alles scripte kann man nicht ohne weiteres in eine datei packen. daher ist das hier alles beispielhaft und kommt immer auf den die seite/scripte an. jquery sollte aber immer einzeln bleiben und auch vor den anderen scripten geladen werden.
im beispiel laden wir jquery direkt vom google server. das nutzen viele und daher ist das script ggf. schon im browsercache. und nein, es fehlt da kein "http:". je nachdem ob dein shop per http oder https läuft, wird passend jquery geladen. (googlen wer mehr wissen will, geht zu sehr in die tiefe).
das zweite js-script läd jquery vom eigenen server, sollte der google-server nicht erreichbar sein.
dann kommt die eigene scripts.js mit den scripten von thickbox und co. dann jquery-ui. ggf. muss ui auch vorher, muss getestet werden.
und wenn man genau hinschaut, wurden im org. "jquery.js" + "jquery.min.js" geladen. na, copy & paste fehler?
also zweimal jquery in eine webseite reinladen ist mehr als quatsch und kostet unnötig zeit
ansonsten ist zu sagen, dass stylesheets IMMER im <head> geladen werden. und <scripts> packt man am besten an das ende vom code, vor das </body>. so läd erstmal der content fix und wird nicht von den scripten aufgehalten. aber hier gehen die meinungen auseinander, einer meint so, einer so. wenn nicht unten am ende, dann auch bitte in den <head> bereich packen.
dann kann man die dateien noch minimieren. und zwar ganz einfach so online im browser:
stylesheets:
http://www.cleancss.com/javascript:
http://dean.edwards.name/packer/aber vorsicht mit den einstellungen. immer testen, ob die minierte datei auch fehlerfrei läuft, ob alles richtig dargestellt wird und keine javascript-fehler auftreten. muss nicht, kann aber!
es geht auch noch anders, aber dieser weg ist (erstmal) einfach und leicht zu erklären. die inhalte mit copy & paste auf den webseiten einfügen, knöpfchen drücken und wieder zurückkopieren.
in jedem fall von den org. dateien eine sicherheitskopie behalten, damit man sie später auch mal wieder bearbeiten kann!!!
2) inline scripte, also javascript im html code, am besten in die scripts.js kopieren und aus dem html-code entfernen. scripte im html-code blockieren im normalfall die ladezeit der seite ein wenig. warum wieso weshalb? -> googlen
3) nicht benötigten code kommentiert man NIEMALS mit <!-- <div> bla usw </div> --> aus. NIEMALS! den so siehst du ihn nicht, er ist aber trotzdem noch im quellcode sichtbar und wird mitgeladen. nutze php-kommentare: <?php /* ?> <div> bla usw </div> <?php */ ?>
4) teste ob du bilder vielleicht auch zusammenfassen kannst. z.b. menübuttons, hintergrundbilder, icons oder ähnlich. hierzu ist aber ein wenig css-grundkenntniss notwendig, um die zusammengefassten bilder zu positionieren und zuzuordnen. aber auch hier gibt es eine hilfe:
http://spriteme.org/ oder mach es direkt so:
lege im browser ein lesezeichen mit folgendem code als url:
javascript:(function(){var%20spritemejs=document.createElement('SCRIPT');spritemejs.type='text/javascript';spritemejs.src='http://spriteme.org/spriteme.js';document.getElementsByTagName('head')[0].appendChild(spritemejs);})();
anschließend rufst du deine seite auf, klickst das lesezeichen und *magicmagic* das tool erkennt wo image-sprites sinn machen und erzeugt die grafiken auch gleich auf wunsch. einen großteil des benötigen css-codes wird auch mitgeliefert.
5) alternativ zu image-sprites kann man bilder auch base64 kodieren und als string in die stylesheet datei packen. beispiel.
body{ background: url( http://www.modified-shop.org/forum/Themes/modified eCommerce Shopsoftware/images/modified.png ); }
so macht man es normalerweise. aber es geht auch so:
body{ background: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABKEAAAAhCAIAAACOWi+7AAABAElEQVR42u3XMQ6DMAxAUbv3v7M7lKFNTBRE1aF6byKO2Rj4WVXxbjxvXfU37XRzWBURtZ7ML3ZvrRauH1+TDAAA4Bc+fr...); }
zwar wird dadurch die css-datei ein wenig größer, aber wenn man diese minimiert und auch noch gzip-komprimiert ausliefert (googlen, erkläre ich nicht), spart man 1 request pro seitenaufruf und so in der css abgelegte bilder sind SOFORT da. wenn sonst vielleicht nach und nach hintergründe und icons geladen werden, sind diese alle zusammen direkt da.
und so geht's:
http://www.greywyvern.com/code/php/binary2base64bild-url auf der seite einfügen, knopf drücken und den generierten code statt dem bild in die eigene css-datei einfügen. auf der seite werden auch noch weitere beispiele genannt.
natürlich macht sowas nur in einem gewissen rahmen und bei kleineren dateien sinn. aber angenommen, man hat viele kleine einzelne dateien, die base64 kodiert die css um 20 bis 60 kb größer machen als vorher. wenn man die css wieder gzipt ausliefert, sind es nur noch ein paar kb mehr, und die fallen nicht ins gewicht. ich habe auch schon seiten gesehen die ein paar hundert kb in der css abgelegt haben. und welche rattenschnell sind. testen, ausprobieren, und gucken.
6) warum "requests" sparen? wozu? wieso komprimieren? minimieren? zusammenfassen?
bei kleinen webseiten ist das nicht wirklich ausschlaggebend. außer das die seite schneller wird, wenn man alles richtig macht.
aber bei großen seiten mit vielen besuchern, sagen wir ein paar tausend am tag, kann das den unterschied machen, ob man mit einem kleinen günstigen server auskommt oder das geld für einen dicken schnellen server mit viel power investiert.
angenommen, eine startseite läd 8 css dateien, 13 javascript dateien, 3 fonts und 55 bilder. dann macht das pro seitenaufruf eines besuchers 80 requests, also anfragen an den server. und wenn man das auf 20 optimieren tut, ist nicht nur die seite schneller, der server hat auch wieder mehr luft zum atmen und muss weniger dinge gleichzeitig tun und verarbeiten. leuchtet ein oder?
wobei ein dicker fixer server mit guter anbindung im gegenzug einiges reißen kann und eine schlecht optimierte webseite trotzdem schnell erscheinen lassen. dazu kommt auch noch die internetanbindung des besuchers und dessen rechner. auch das spielt eine rolle.
7) quellcode, aufbau des themes und usw.
ein sauberer code und gut programmierte webseite tut übrigens auch einiges in sachen performance dazu. wie baut man eine seite auf, wann läd man welche grafiken, an welcher stelle welches javascript usw. hier in die tiefe zu gehen würde ausarten, daher sei es nur erwähnt!!!
weniger ist manchmal mehr!
jquery ist toll, und wenn alles animiert ist und sich bewegt sieht schon schick aus. aber nachweislich sind immer noch die besten seiten, wenn es um geldverdienen mit einer webseite geht, jene, die nicht unbedingt schick und hübsch sind. zweckmäßig müssen sie sein. gut aufgebaut. verständlich. stimmt nicht? findest du amazon schick und hübsch? das ist auch in vielen anderen bereichen so, wenn es um geld verdienen im netz geht, es ist nicht gelogen das "unschicke" webseiten oft besser funktionieren.
nehmen wir die startseite von oben genannten shop:
www.accio-shop.dedurchaus schick, viel jquery spielerei, aber soweit ich sehe funktioniert alles einwandfrei. aber ob es sinnig ist wirklich diese ganzen scripte zu nutzen (und fehler zu machen wie zb 2 mal jquery doppelt laden)? kann, muss aber nicht. aber das ist geschmackssache, sollte auf jedenfall NICHT abwertend gemeint sein!!
wichtiger wäre mir da der knopf "artikel ansehen". wie (( Wort entfernt - Bitte Forenregeln beachten! )) ist der denn bitte?? (das darfst du persönlich nehmen). halb abgeschnittene rundungen. soll der und? oder eckig? sowas kann man total eifnach mit einem normalen text-link und css lösen. und muss keine requests verschenken. oder.. nimm wenigstens eine grafik mit richtig gerundeten ecken. oder ist das wirklich absicht so?)
ok, sorry, auch geschmackssache. ich entschuldige mich. aber im hinterkopf behalten: css kann viele grafischen dinge besser ersetzen!
viel schlechter dagegen sind diese ganzen social buttons die man überall findet? wozu macht das jemand bitte? ich kann mir beim besten willen nicht vorstellen, dass ein kunde buttons von delicious, digg, reddit, technorati, stumbleupon oder yahoo bookmarks nutzt. oder sollte ich so daneben liegen? ein großteil dieser seiten ist zwar inzwischen auch in deutsch verfügbar, aber trotzdem ist ein großteil der user die jene seiten nutzen nicht deutschsprachig. daher ist der sinn und nutzen zweifelhaft. schaut zwar toll aus, und man hat noch was "animiertes" auf der seite. aber diesen ganzen rotz auch nur wieder reinladen, die seite verlangsamen nur damit man es hat? quatsch! die kunden sollen kaufen, nicht abgelenkt werden.
überlegen wir mal.. WO sind die deutschen nutzer im moment den halben tag online? wo guckt man morgens mit dem ersten kaffee und wirft abends noch fix ein "nachti" in die runde? richtig, facebook (einfach per iframe einzubinden)!
das mag sinn machen. denn gefällt mir button sollte man einbauen, am besten direkt beim produkt. das könnte (muss aber nicht) sinn machen. aber alles andere nicht.
wenn du es dazu schaffst eine gute fanpage zum shop aufzubauen und dort "fans" zu generieren, kann der nutzen sogar noch viel größer sein. aber das ist zum einen nicht so einfach wie man denkt, zum anderen g eht es darum gar nicht.
aber worauf ich eigentlich hinauswollte sollte deutlich gewordein sein: dinge, die gut aussehen, aber eigentlich keinen zweck erfüllen und nur die ladezeit verlängern, sollten überdacht werden.
9) first byte time
die zeit, wann nach der anfrage vom browser beim server der seite die ersten daten zurückkommen und mit dem optischen aufbau der webseite im browser angefangen wird.
beschleunigen kannst du das, in dem du direkt nach dem </head> folgendes einfügst:
<?php flush() ?>
auch wenn die php scripte noch garnicht fertig sind, alle daten für die webseite zusammenzusammeln und aus der datenbank auszulesen, sobald der <head> bereich vollständig ist, kannst du diesen einfach schon mal an den browser abschicken. mit flush().
der <head> bereich müsste im verzeichnis "/includes" in der datei "header.php" sein.
um das zu testen, braucht es mehr als einfach nur googl page-speed im firefox. nämlich eine webseite:
http://www.webpagetest.org/ .. ist zwar auch page-speed, gefällt mir aber besser als das plugin. aber geschmackssache, testet es einfach mal!
url eintragen, test location auf "frankfurt" ändern und bei "browser" am besten "ie8" auswählen. dieser müsste von den drei auswahl-möglichkeiten mit am verbreitesten sein.
und dann abschicken und wraten. aber es lohnt sich. due bekommst eine wasserfall-grafik, man sieht in welcher reihenfolge was von der seite geladen wird, was verzögert. wie lange es bis zur "first byte time"
dauert. welche grafiken nicht optimiert und zu groß sind. welche dateien komprimiert und/oder minimiert werden sollten. ob es redirects und damit fehlerhafte content-links gibt. ist bei accio der fall, da geht meine ich das loading-img nicht. zumindest vor einer stunde..
übrigens, sollte der webpagetest (oder ein anderes browser-plugin) meckern und ausspucken, ist sollt ein CDN nutzen.. IGNORIEREN. denn ich gehe mal davon aus, dass ihr deutsche shops betreibt, also für nutzer aus deutschland. nicht für nutzer aus japan. oder amerika. oder wo auch immer auf der welt.
denn bei einem cdn lagert man statische dinge (theme-bilder, scripte, css, ..) einfach gesagt gespielt auf mehrere server aus. rund um die welt, 10, 20 oder mehr server, die alle die statischen dateien deiner webseite bereithalten. und das CDN regelt halt, von welchem server auf er welt diese dinge beim besucher deiner webseite geladne werden. kommt der besucher aus japan, nutzt es einen server vor ort um die bilder zu laden. bei einem besucher aus florida den server, der am nächsten am florida steht. denn je näher, desto schneller sind die dinge geladen und müssen nicht erst um die welt sausen um anzukommen. um das alles mal einfach auszudrücken.
bei mehrsprachigen seiten kann ein CDN also duchaus sinn machen, wenn man es sich leisten kann. wobei es auch da schon kostenlose gibt! aber wer seiten rein für deutsche surfer baut, der sollte sich da keine weiteren gedanken drüber machen!
FINISH
das alles hier.. ist soooo wichtig auch wieder nicht. denn was nützt die schnellste webseite, wenn der shop an sich (( Wort entfernt - Bitte Forenregeln beachten! )) ist. oder der content. oder man erst gar keine kunden hat? ist eure seite also mehr rot als grün, SCHEISS DRAUF!
sorgt für gute bilder und produktbeschreibungen. vor allem eigene texte, keine kopierten oder gelieferten die auf anderen webseiten zu finden sind. achtet auf gute benutzerführung, macht es den kunden nicht zu kompliziert. macht keine zu kleinen buttons und links, die man mit der maus kaum treffen kann. usability ist wichtig! kümmert euch ein wenig um seo. abakus forum, seoigg, sistrix (um nur ein paar zu nennen) brauchbare quellen. manchmal
viel mitlesen, drüber nachdenken, weiterlesen, aber auch nicht alles glauben was auf seo seiten steht. baut euren shop für den user, nicht für euch oder die suchmaschine. aber lasst diese auch nicht ganz außer acht. dann klappt das schon. und dann kann man sich auch um ein paar punkte in sachen performance kümmern. es sei denn, euer shop braucht 10 sekunden um zu laden.. dann müsst ihr euch gedanken machen. oder dinge für beamte verkaufen)
scherz.
eigentlich wollte ich noch was zum thema expires und cache schreiben. und ein paar andere dinge. aber.. ich habe einfach keine lust mehr, habe jetzt schon knapp 3 stunden in den beitrag gesteckt. daher einfach ein paar weiterführende quellen... für den den es interessiert.
a)
www.html5boilerplate.com oder de.html5boilerplate.com (achtung, die de-version ist ein wenig veraltet und nicht auf dem neuestenstand). hier gibt es eine html-seite mit viel drumherum. einer guten htaccess (expires und cache ist enthalten und wird erklärt). ansonsten findet man hier viel und sehr aktuele dinge und infos und links, was performance, html5 + css3 angeht. wer hier öfter vorbeischaut, versteht worum es geht, der ist am zahn der zeit!
b)
http://www.smushit.com/ysmush.it/ .. meta-angaben aus bildern entfernen und verlustfrei online verkleinern
c)
http://css3please.com/ .. css3 online verändern und ausprobieren, dann einfach in die eigene seite kopieren.
d)
www.modernizr.com .. ist auch bei 1) enthalten. sorgt für korrektes darstellen von html5 und css3 in browsern die dieses nicht können. dazu ist auch yepnopejs.com enthalten, um js und css dateien in der reihenfolge zu laden wie man es braucht.
e)
http://www.askapache.com/javascript/google-analytics-speed-tips.html ... analytics optimiert einbinden
f)
http://www.heise.de/extras/socialshareprivacy/ .... social media buttons (facebook, g+, twitter) ABSOLUT datenschutz konform nutzen und in die seite laden.
z) die wasserfall-grafik vom hier benutzen shop accio-shop.de:
http://www.webpagetest.org/result/111028_BP_20R6M/1/details/und an die betreiber: ich habe hoffentlich niemanden verärgert, denn das war nicht meine absicht. denn, euer shop läd für die vielen scripte und bilder und anderen dinge welche zb "bemängelt" werden sehr zügig und fix, ihr solltet zufrieden sein!!! euer shop hat sich halt nur angeboten und musste halt ein paar man herhalten.
und, wenn mal jemand einen fast sehr guten test eines shops mit 97 punkten sehen möchte, bitteschön:
http://www.webpagetest.org/result/111028_SV_20R5T/5/details/allerdings werden uch kaum grafiken oder scripte geladen. dazu ist der shop auf einem recht fixen server. die mysql-db hat übrigens vor ein paar tagen die größe von 1gb überschritten.
wie auch immer, nicht unbedingt ein vorzeigeshop was die optik, datenstruktur oder sonst was angeht, man durchaus hier oder da drehen kann, damit grüne werte angezeigt werden. wobei da auch noch was geht, die fehlenden 3 punkte sind machbar, lohnen sich aktuell aber nicht, da ich wenn ich mal wieder lust und laune (und nichts besseres zu tun) den shop auf die aktuelle xtc:m version updaten muss. und damit fangen die ganzen optimierungsmaßnahmen (fast) wieder vorne an. zudem will mein kunde dann bestimmt auch ein paar "hübsche dinge" eingebaut haben. zudem, das theme ist nicht von mir. ich habe nur vor einem jahr die performance optimierungen gemacht, da der shop teilweise 10-20 sekunden zum laden gebraucht hat. trotz cache!
und ein wort noch zum schluß..
alles was ich hier erzählt habe.. ist ohne gewähr. es wird leute geben, die halten dieses oder jenes für unsinn oder würden was auch immer anders machen. der eine glaubt an dieses, der andere an jenes. und ich glaube gar nicht, ich bin ausgetreten.
so.. jetzt ist aber genug.. viel spass beim lesen.
und BITTE: KEINE Fragen
das schreiben hat genug zeit gekostet, da kan nich nicht auch noch fragen beantworten.
und falls wider erwarten jemand diesen beitrag zuende gelesen haben, verstanden haben, zufällig etwas gelernt haben oder dinge erfahren haben die er schon immer wissen wollte aber sich nicht getraut hat zu fragen.. oder wtf.. was auch immer. wenn dir das mit rechtschreibfehlern gespickte geschreibsel gefallen hat.. würde ich mich über einen "gefällt mir" klick freuen
und zwar hier:
http://www.facebook.com/GuteWitzein diesem sinne.. wünsche ich ein schönes wochenende!!
gruss, uli
