Kostenlose Icons von Versandunternehmen

Quasi als kleines Zusatzprojekt zu den Payment-Icons gibt es jetzt auch Icons für die gebräuchlichsten Versanddienstleister.

Update v12

Zwei neue alternative Hermes-Icons ergänzen die Sammlung.

Format:
SVG
Gesamtzahl Icons:
293
Download:
shipping-icons.zip (1,7 MB)
Neues Icon vorschlagen:
Jetzt Kommentar schreiben
Neue Icons:
DE Hermes altDE Hermes alt
DE Hermes text altDE Hermes text alt

Update v11

Alle Icons liegen jetzt als SVG vor. Details dazu hier.

Format:
SVG
Gesamtzahl Icons:
293
Download:
shipping-icons.zip (1,7 MB)
Neues Icon vorschlagen:
Jetzt Kommentar schreiben
Enthaltene Icons:
AE Emirates Post altAE Emirates Post alt
AE Emirates PostAE Emirates Post
AL Posta Shqiptare altAL Posta Shqiptare alt
AL Posta Shqiptare text altAL Posta Shqiptare text alt
AL Posta Shqiptare textAL Posta Shqiptare text
AL Posta ShqiptareAL Posta Shqiptare
AM HayPost ENAM HayPost EN
AM HayPostAM HayPost
AR Correo Argentino altAR Correo Argentino alt
AR Correo Argentino text altAR Correo Argentino text alt
AR Correo Argentino textAR Correo Argentino text
AR Correo ArgentinoAR Correo Argentino
AT Österreichische Post textAT Österreichische Post text
AT Österreichische PostAT Österreichische Post
AU Australia Post altAU Australia Post alt
AU Australia Post text altAU Australia Post text alt
AU Australia Post textAU Australia Post text
AU Australia PostAU Australia Post
AX Åland-Post altAX Åland-Post alt
AX Åland-Post text altAX Åland-Post text alt
AX Åland-Post textAX Åland-Post text
AX Åland-PostAX Åland-Post
AZ Azərpoçt altAZ Azərpoçt alt
AZ Azərpoçt alt2AZ Azərpoçt alt2
AZ Azərpoçt text altAZ Azərpoçt text alt
AZ Azərpoçt text alt2AZ Azərpoçt text alt2
AZ Azərpoçt textAZ Azərpoçt text
AZ AzərpoçtAZ Azərpoçt
BA BH Pošta altBA BH Pošta alt
BA BH Pošta text altBA BH Pošta text alt
BA BH Pošta textBA BH Pošta text
BA BH PoštaBA BH Pošta
BA Hrvatska pošta Mostar textBA Hrvatska pošta Mostar text
BA Hrvatska pošta MostarBA Hrvatska pošta Mostar
BA Pošte Srpske textBA Pošte Srpske text
BA Pošte SrpskeBA Pošte Srpske
BE bpost altBE bpost alt
BE bpost alt2BE bpost alt2
BE bpost textBE bpost text
BE bpostBE bpost
BG Balgarski poshti altBG Balgarski poshti alt
BG Balgarski poshti text altBG Balgarski poshti text alt
BG Balgarski poshti textBG Balgarski poshti text
BG Balgarski poshtiBG Balgarski poshti
BR Correios textBR Correios text
BR CorreiosBR Correios
BY belpost altBY belpost alt
BY belpost text altBY belpost text alt
BY belpost textBY belpost text
BY belpostBY belpost
CA Canada Post altCA Canada Post alt
CA Canada Post alt2CA Canada Post alt2
CA Canada Post textCA Canada Post text
CA Canada PostCA Canada Post
CH Schweizerische Post DECH Schweizerische Post DE
CH Schweizerische Post ENCH Schweizerische Post EN
CH Schweizerische Post FRCH Schweizerische Post FR
CH Schweizerische Post ITCH Schweizerische Post IT
CL Correos Chile textCL Correos Chile text
CL Correos ChileCL Correos Chile
CN China Post altCN China Post alt
CN China Post alt2CN China Post alt2
CN China Post textCN China Post text
CN China PostCN China Post
CO 4-72 textCO 4-72 text
CO 4-72CO 4-72
CZ Česká pošta textCZ Česká pošta text
CZ Česká poštaCZ Česká pošta
DE Dachser altDE Dachser alt
DE Dachser alt2DE Dachser alt2
DE Dachser alt3DE Dachser alt3
DE Dachser text altDE Dachser text alt
DE Dachser textDE Dachser text
DE DachserDE Dachser
DE DB Schenker altDE DB Schenker alt
DE DB SchenkerDE DB Schenker
DE Deutsche Post text altDE Deutsche Post text alt
DE Deutsche Post textDE Deutsche Post text
DE Deutsche PostDE Deutsche Post
DE DHL ExpressDE DHL Express
DE DHL FreightDE DHL Freight
DE DHLDE DHL
DE DPD heritage altDE DPD heritage alt
DE DPD heritageDE DPD heritage
DE DPD Express redDE DPD Express red
DE DPD ExpressDE DPD Express
DE DPD redDE DPD red
DE DPDDE DPD
DE EmonsDE Emons
DE GEL Express LogistikDE GEL Express Logistik
DE General Overnight textDE General Overnight text
DE General OvernightDE General Overnight
DE GLS heritage altDE GLS heritage alt
DE GLS heritageDE GLS heritage
DE GLS blueDE GLS blue
DE GLS Express blueDE GLS Express blue
DE GLS ExpressDE GLS Express
DE GLSDE GLS
DE Hermes altDE Hermes alt
DE Hermes Border GuruDE Hermes Border Guru
DE Hermes text altDE Hermes text alt
DE Hermes textDE Hermes text
DE HermesDE Hermes
DE iloxxDE iloxx
DE Kühne + Nagel altDE Kühne + Nagel alt
DE Kühne + Nagel heritage altDE Kühne + Nagel heritage alt
DE Kühne + Nagel heritageDE Kühne + Nagel heritage
DE Kühne + Nagel text altDE Kühne + Nagel text alt
DE Kühne + Nagel text heritage altDE Kühne + Nagel text heritage alt
DE Kühne + Nagel text heritageDE Kühne + Nagel text heritage
DE Kühne + Nagel textDE Kühne + Nagel text
DE Kühne + NagelDE Kühne + Nagel
DE Night Star Express textDE Night Star Express text
DE Night Star ExpressDE Night Star Express
DE nox textDE nox text
DE noxDE nox
DE Schenker DB Logistics heritageDE Schenker DB Logistics heritage
DE Schenker heritageDE Schenker heritage
DE Schenker historicDE Schenker historic
DE Schenker text heritage altDE Schenker text heritage alt
DE Schenker text heritageDE Schenker text heritage
DE südmail altDE südmail alt
DE südmailDE südmail
DE tiramizoo altDE tiramizoo alt
DE tiramizoo alt2DE tiramizoo alt2
DE tiramizooDE tiramizoo
DE trans-o-flex textDE trans-o-flex text
DE trans-o-flexDE trans-o-flex
DK+SE postnord altDK+SE postnord alt
DK+SE postnordDK+SE postnord
EC Correos del Ecuador textEC Correos del Ecuador text
EC Correos del EcuadorEC Correos del Ecuador
EE omniva text altEE omniva text alt
EE omniva textEE omniva text
EE omnivaEE omniva
ES Correos España altES Correos España alt
ES Correos España text altES Correos España text alt
ES Correos España textES Correos España text
ES Correos EspañaES Correos España
FI posti altFI posti alt
FI postiFI posti
FR chronopost altFR chronopost alt
FR chronopostFR chronopost
FR La Poste altFR La Poste alt
FR La Poste textFR La Poste text
FR La PosteFR La Poste
FR+CH Asendia textFR+CH Asendia text
FR+CH AsendiaFR+CH Asendia
GE Georgian PostGE Georgian Post
GG Guernsey Post textGG Guernsey Post text
GG Guernsey PostGG Guernsey Post
GR Hellenic Post altGR Hellenic Post alt
GR Hellenic Post text altGR Hellenic Post text alt
GR Hellenic Post textGR Hellenic Post text
GR Hellenic PostGR Hellenic Post
HK Hong Kong Post textHK Hong Kong Post text
HK Hong Kong PostHK Hong Kong Post
HR Hrvatska pošta textHR Hrvatska pošta text
HR Hrvatska poštaHR Hrvatska pošta
HU Magyar Posta altHU Magyar Posta alt
HU Magyar PostaHU Magyar Posta
ID Pos Indonesia textID Pos Indonesia text
ID Pos IndonesiaID Pos Indonesia
IE An Post altIE An Post alt
IE An PostIE An Post
IL Israel PostIL Israel Post
IN India Post textIN India Post text
IN India PostIN India Post
IS Pósturinn altIS Pósturinn alt
IS Pósturinn text altIS Pósturinn text alt
IS Pósturinn textIS Pósturinn text
IS PósturinnIS Pósturinn
IT Poste ItalianeIT Poste Italiane
JE Jersey Post textJE Jersey Post text
JE Jersey PostJE Jersey Post
JP Japan Post altJP Japan Post alt
JP Japan PostJP Japan Post
KE Posta KenyaKE Posta Kenya
KR Korea PostKR Korea Post
KZ Kazpost altKZ Kazpost alt
KZ Kazpost text altKZ Kazpost text alt
KZ Kazpost textKZ Kazpost text
KZ KazpostKZ Kazpost
LB Liban Post altLB Liban Post alt
LB Liban Post text altLB Liban Post text alt
LB Liban Post textLB Liban Post text
LB Liban PostLB Liban Post
LI Liechtensteinische PostLI Liechtensteinische Post
LT Lietuvos Paštas textLT Lietuvos Paštas text
LT Lietuvos PaštasLT Lietuvos Paštas
LU Post LuxembourgLU Post Luxembourg
LV Latvijas Pasts textLV Latvijas Pasts text
LV Latvijas PastsLV Latvijas Pasts
MC La Poste Monaco altMC La Poste Monaco alt
MC La Poste MonacoMC La Poste Monaco
MD Posta Moldovei altMD Posta Moldovei alt
MD Posta MoldoveiMD Posta Moldovei
ME Pošta Crne Gore textME Pošta Crne Gore text
ME Pošta Crne GoreME Pošta Crne Gore
MK Makedonska Pošta textMK Makedonska Pošta text
MK Makedonska PoštaMK Makedonska Pošta
MT Malta Post altMT Malta Post alt
MT Malta PostMT Malta Post
MX Correos textMX Correos text
MX CorreosMX Correos
MY Pos MalaysiaMY Pos Malaysia
NL PostNL altNL PostNL alt
NL PostNL alt2NL PostNL alt2
NL PostNL alt3NL PostNL alt3
NL PostNL alt4NL PostNL alt4
NL PostNLNL PostNL
NL TNT expressNL TNT express
NL TNTNL TNT
NO Posten Norge textNO Posten Norge text
NO Posten NorgeNO Posten Norge
NZ Air New Zealand altNZ Air New Zealand alt
NZ Air New Zealand textNZ Air New Zealand text
NZ Air New ZealandNZ Air New Zealand
NZ fastwayNZ fastway
NZ New Zealand Post textNZ New Zealand Post text
NZ New Zealand PostNZ New Zealand Post
PF OPTPF OPT
PL Poczta Polska altPL Poczta Polska alt
PL Poczta Polska text altPL Poczta Polska text alt
PL Poczta Polska text alt2PL Poczta Polska text alt2
PL Poczta Polska text alt3PL Poczta Polska text alt3
PL Poczta Polska textPL Poczta Polska text
PL Poczta PolskaPL Poczta Polska
PT ctt altPT ctt alt
PT cttPT ctt
RO Poșta Română altRO Poșta Română alt
RO Poșta Română textRO Poșta Română text
RO Poșta RomânăRO Poșta Română
RS Pošta Srbije altRS Pošta Srbije alt
RS Pošta Srbije text altRS Pošta Srbije text alt
RS Pošta Srbije textRS Pošta Srbije text
RS Pošta SrbijeRS Pošta Srbije
RU Russian PostRU Russian Post
SA Saudi PostSA Saudi Post
SG Singapore PostSG Singapore Post
SI Pošta Slovenije altSI Pošta Slovenije alt
SI Pošta Slovenije text altSI Pošta Slovenije text alt
SI Pošta Slovenije textSI Pošta Slovenije text
SI Pošta SlovenijeSI Pošta Slovenije
SK Slovenská Pošta textSK Slovenská Pošta text
SK Slovenská PoštaSK Slovenská Pošta
SM Poste San MarinoSM Poste San Marino
SV Correo El SalvadorSV Correo El Salvador
TH Thailand Post textTH Thailand Post text
TH Thailand PostTH Thailand Post
TR Ptt altTR Ptt alt
TR PttTR Ptt
TW Chunghwa PostTW Chunghwa Post
UA Ukrposhta textUA Ukrposhta text
UA UkrposhtaUA Ukrposhta
UK DPD localUK DPD local
UK DPD local altUK DPD local alt
UK Parcel ForceUK Parcel Force
UK Royal MailUK Royal Mail
US FedEx Freight altUS FedEx Freight alt
US FedEx FreightUS FedEx Freight
US FedEx Ground altUS FedEx Ground alt
US FedEx GroundUS FedEx Ground
US FedExUS FedEx
US UPS ExpressUS UPS Express
US UPSUS UPS
US USPS textUS USPS text
US USPSUS USPS
VN Vietnam Post altVN Vietnam Post alt
VN Vietnam PostVN Vietnam Post
WW 17trackWW 17track
WW Amazon LogisticsWW Amazon Logistics
WW EMS altWW EMS alt
WW EMS alt2WW EMS alt2
WW EMSWW EMS
WW Pickup altWW Pickup alt
WW Pickup text alt HelveticaWW Pickup text alt Helvetica
WW Pickup text altWW Pickup text alt
WW Pickup text HelveticaWW Pickup text Helvetica
WW Pickup textWW Pickup text
WW PickupWW Pickup
WW UPUWW UPU
WW Weight text HelveticaWW Weight text Helvetica
WW Weight textWW Weight text
WW WeightWW Weight
WW World text HelveticaWW World text Helvetica
WW World textWW World text
WW WorldWW World
WW Worlds text HelveticaWW Worlds text Helvetica
WW Worlds textWW Worlds text
WW WorldsWW Worlds
ZA South African Postal Service altZA South African Postal Service alt
ZA South African Postal ServiceZA South African Postal Service

Die PNG-Icons stehen nicht mehr zur Verfügung. Die nachfolgenden Informationen dienen ausschließlich Dokumentationszwecken.

Update v10

Auch dieses kleine Projekt feiert in Kürze seinen fünften Geburtstag. Als vorgezogenes Geburtstagsgeschenk gibt’s daher heute einen kleinen Speditionsrundumschlag.
Von der Wunschliste kommt Schenker. Also eigentlich ja DB Schenker. Da ich aber ein großer Fan des grün/gelben Schenker-Designs bin und das charakteristische S (früher mit, später dann ohne Weltkugel) jahrzehntelang das Straßenbild in ganz Europa geprägt hat habe ich noch ein paar Hertige-Icons mit dazugepackt.
Und weil ich eh grad bei den Speditionen war wurde das noch mit Dachser und Kühne+Nagel ergänzt.

Enthaltene Icons:
DB Schenker
DB Schenker (alternativ)
Schenker Hertiage
Schenker Hertiage II
Schenker Hertiage III
Dachser
Dachser (alternativ)
Dachser (alternativ II)
Dachser (alternativ III)
Dachser (alternativ IV)
Kühne+Nagel
Kühne+Nagel (alternativ)
Kühne+Nagel Anker
Kühne+Nagel Anker (alternativ)

Update v9

Das meiste in diesem Update ist gar nicht von mir sondern von Christin. Vielen Dank dafür. Von mir ist nur das bestellte DHL Freight und die neuen UPS-Logos. Außerdem, weil immer wieder bestellt, ein UPS-Logo mit zusützlichem Express-Schriftzug.

Enthaltene Icons:
DHL Freight
UPS
UPS Express
UPS Express (altes Logo)
Air New Zealand
Fastway Couriers
GEL
NOX Nachtexpress
Night Star Express
Tiramizoo (Großstadt-Direkt-Kurier)

Update v8

So 25-Stunden-Tage haben schon ihre Vorteile, man kommt mal zu Sachen, die sonst liegen bleiben. Und daher gibt es heute ein kleines Update.

Enthaltene Icons:
Asendia
Asendia (alternativ)
postnl (Niederlande)
Südmail
Südmail (alternativ)
bpost (Belgien)

Update v7

Neben den sich angesammelten Länder-Logos hat dieses Update vor allem einen Grund: Die Neugestaltung des dpd-Logos.

Enthaltene Icons:
DPD
DPD Express
Azərpoçt (Aserbaidschan)
Correos (Spanien)
Makedonska Posta (Mazedonien)

Update v6

Drei neue Länder sind heute im Programm und ein paar generische Icons, die man beispielsweise für Versand nach Zonen oder tabellarischen Versand verwenden kann.

Enthaltene Icons:
Versand nach Zonen
Versand nach Zonen (alternativ)
Tabellarische Versandkosten
Abholung
Lietuvos Paštas (Litauen)
El Correo (Guatemala)
Posta Kenya

Update v5

Und weiter geht die Reise um den Erdball. Ich habe mittlerweile Zugriff auf die Track&Trace-API von DHL und da kann man noch viel weiter zurückgehen als auf der Website. Dadurch bin ich noch auf ein paar mehr Länder gestoßen, die für die Integration in die Warenwirtschaft natürlich ein Logo brauchen.

Enthaltene Icons:
PTT (Türkei)
Korea Post
OPT (Französisch-Polynesien)
Pos Indonesia
Saudi Post
Emirates Post Group
Vietnam Post
Liban Post
Japan Post
Pos Malaysia
Correo Argentino
Taiwan Post

Update v4

Eine kleine postalische Reise um die Welt. Wir versenden primär mit DHL, d.h. im Zielland übernimmt dann der lokale, meist (ex-)staatliche Betrieb, die Sendung. Von der DHL gibt es dann einen sog. Matchcode und man kann, zumindest in der Theorie, die Sendung dann weitertracken. Genau das habe ich in unsere neue Warenwirtschaft implementiert und dazu braucht es natürlich auch passende Icons. Außerdem enthält das Update das schon länger bestellte DHL-Express-Icon.

Enthaltene Icons:
United States Postal Service
Correios (Brasilien)
South African Postal Service
Thailand Post
Russian Post
Singapore Post
New Zealand Post
Correos de México
India Post
Israel Post
Hong Kong Post
Correos del Ecuador
4-72 (Kolumbien)
China Post
Correos Chile
Australian Post
Post Canada
DHL Express

Update v3

Die per E-Mail eingegangen Wünsche finden sich in diesem Update.

Enthaltene Icons:
General Overnight
TNT Express
GLS Express
DPD Express
Trans-o-flex
Trans-o-flex (alternativ)

Update v2

Auch die Versandicons gehen in die zweite Runde und werden ergänzt um die österreichische und schweizer Post.

Enthaltene Icons:
Österreichische Post
Österreichische Post (alternativ)
Schweizer Post

Release

Format:
PNG, 512px
Enthaltene Icons:
DHL
DPD
GLS
UPS
FedEx
TNT
Hermes
Deutsche Post

Weiterentwicklung

Ich glaube, dass auch diese Icons für viele Shopbetreiber hilfreich sind. Mir ist aber auch klar, dass es weitere Versandunternehmen gibt, die noch nicht berücksichtigt sind. Gerne füge ich weitere Logos hinzu. Dazu einfach einen Kommentar hinterlassen oder mich über das Kontaktformular kontaktieren.

Lizenz

Die Icons sind kostenlos für private und kommerzielle Nutzung und stehen unter der CC BY Lizenz.
Das Copyright der einzelnen Logos liegt bei den jeweiligen Gesellschaften.

OXID commons 2012

Kurz entschlossen sind wir vergangenen Donnerstag zur OXID commons 2012 gefahren. Vorangegangen war die Entscheidung, Magento den Rücken zu kehren und zu OXID zu wechseln.

OXID commons ist sowas wie ein Hybrid aus Konferenz und Messe. Diverse Dienstleister aus dem OXID-Umfeld hatten sich in der Rothaus-Arena eingefunden und stellten auch den Großteil der Speaker. Mitunter hatte man daher schon das Gefühl, dass während der Sessions oben rechts eigentlich ein Schild mit ‘Dauerwerbesendung’ hängen müsste.

So aus der Sicht anderer Konferenzen, die ich bisher besucht habe, hat das ganze auch etwas von omnipräsentem Buzzwordbingo und Schlipsträgerveranstaltung, etwa beim ‘rituellen’ Visitenkartentausch.
Insgesamt haben wir aber sehr viel mitgenommen, nicht nur gute Kontakte zu Dienstleistern. Ein paar Verbesserungsvorschläge hätte ich dennoch:

  • Geskriptete ‘Podiumsdiskussionen’ haben was von ‘Scripted Reality’. Geht gar nicht.
  • In eine einzelne Session von einer Stunde drei oder vier Speaker reinzuquetschen ist einfach zu viel. Mehr als allgemeine Informationen kommen dabei leider nicht rüber. Vielleicht sollte man sich überlegen, Workshops am Vortag anzubieten, damit man da mehr in die Tiefe gehen kann.
  • Die Pausen hätten etwas länger sein können, damit man mehr Zeit hat, sich mit den Dienstleistern zu unterhalten.

Vielleicht fällt der ein oder andere Punkt weg, wenn wir dann nächstes Jahr auch an der Unconference teilnehmen, die wir dieses Mal aus Gründen ausfallen lassen mussten. Am meisten Spaß gemacht hat mir nämlich die Session, bei der es um Erweiterungen aus der Community ging (u.a. GoodRelations und der Admin 2.0).

Die Videoaufzeichnungen des Konferenzteils kann man übrigens hier ansehen und den Vortrag von Martin Hepp zu GoodRelations gibt es außerdem hier.

Telefon als Pflichtfeld in Magento – the ultimate solution

Es sind die kleinen Dinge, die nerven. Und davon hat Magento reichlich.

Man sollte meinen, dass es bei einem derart hochgezüchteten Shopsystem mit einem Klick getan ist, ein Feld im Checkout nicht zum Pflichtfeld zu machen. Im konkreten Fall die Telefonnummer, die aus unerfindlichen Gründen in so ziemlich jedem Shopsystem ein Pflichtfeld ist.

Der erste Blogpost dazu gibt Hoffnung. Aber so einfach ist es nicht. Also halt so gar nicht. Diese Änderung in der Datenbank ist mehr oder weniger nutzlos.
In den Templates wird nämlich gar nicht erst darauf geprüft, welches Feld ein Pflichtfeld ist. Man muss also an allen möglichen Stellen händisch alles entfernen, was auf ein Pflichtfeld hindeutet. Und neben den hier genannten Templatedateien kommt, zumindest in 1.6, auch noch /template/persistent/checkout/onepage/billing.phtml dazu.
Außerdem muss man noch die Mage_Customer_Model_Address_Abstract anpassen, auch hier folgt man am besten der Anleitung hier.

Fertig. Fertig!? Guter Witz, Rechnung ohne Magento gemacht!
Wenn man sich auf der Suche nach dem Fehler weiter durch den Magento-Core hackt trifft man früher oder später auf /app/code/core/Mage/Eav/Model/Attribute/Data/Text.php. Und hier liefert $attribute->getIsRequired() weiterhin treudoof true zurück, als ob man die Datenbankänderung nie gemacht hätte. Ein Blick in selbige führt aber zu der Erkenntnis, dass dort alles stimmt. Alle Caches leeren bringt exakt gar nichts. Erst das ausführen des folgenden Codeschnipsels:

$telephone = Mage::getModel('eav/entity_attribute')
           ->loadByCode('customer_address', 'telephone')
           ->setIsRequired(false)
           ->save();

überzeugt Magento endlich davon, dass die Telefonnummer im Checkout kein Pflichtfeld mehr ist. Herzlicher Dank auch an die Magento-Entwickler, man verbrät doch immer mal wieder gern ne Stunde für so einen Scheiß!

Kostenlose Payment-Icons für den europäischen Markt

Wir haben den Checkout-Prozess in unseren Shops überarbeitet und dazu auch neue Icons für die einzelnen Zahlungsarten entworfen. Diese sind stark abgestimmt auf den deutschen und europäischen Markt und die hier gebräuchlichen Zahlarten. Da ich der Meinung bin, dass diese auch für andere Shopbetreiber nützlich sein könnten biete ich hier das komplette Set zum Download an (CC BY Lizenz).

Update v20

Kurz nach Release der SVG-Icons hatte der Kollege die smarte Idee, Easy Credit als Zahlart aufzunehmen. Und damit war v20 auf dem Weg.
Bei meinen eigenen Einkäufen ist mir dann auch immer mal wieder aufgefallen, dass viele Händler ein kombiniertes Icon aus Mastercard und VISA verwenden. Daher sind in diesem Set jetzt insgesamt sechs dieser kombinierten Icons enthalten.
Auch beim Shoppen gesehen habe ich die Veriante von American Express mit dem Logo bekannten Kürzel „AMEX” am rechten Rand gesehen. Auch diese hat damit Einzug gehalten.
Trusted Shops ist zwar kein Zahlungsanbieter, aber ein im Stil passendes Logo fand ich dann doch eine gute Idee.
Und auch die alten Klarna Logos mit der Brille, dem Pizzastück und der Hand sind jetzt wieder da.

Format:
SVG
Gesamtzahl Icons:
176
Download:
payment-icons.zip (989 kB)
Neues Icon vorschlagen:
Jetzt Kommentar schreiben
Neue Icons:
DE easy credit altDE easy credit alt
DE easy creditDE easy credit
DE payback altDE payback alt
DE Trusted Shops textDE Trusted Shops text
DE Trusted ShopsDE Trusted Shops
DE Vorkasse Icon altDE Vorkasse Icon alt
DE Vorkasse Icon alt2DE Vorkasse Icon alt2
DE Vorkasse IconDE Vorkasse Icon
EU Klarna Ratenkauf altEU Klarna Ratenkauf alt
EU Klarna RatenkaufEU Klarna Ratenkauf
EU Klarna Rechnung altEU Klarna Rechnung alt
EU Klarna RechnungEU Klarna Rechnung
EU Klarna Sofort altEU Klarna Sofort alt
EU Klarna SofortEU Klarna Sofort
WW American Express alt2WW American Express alt2
WW American Express alt3WW American Express alt3
WW Mastercard+VISA altWW Mastercard+VISA alt
WW Mastercard+VISA alt2WW Mastercard+VISA alt2
WW Mastercard+VISA alt3WW Mastercard+VISA alt3
WW Mastercard+VISA alt4WW Mastercard+VISA alt4
WW Mastercard+VISA alt5WW Mastercard+VISA alt5
WW Mastercard+VISAWW Mastercard+VISA

Update v19

Alle Icons liegen jetzt als SVG vor. Details dazu hier.

Format:
SVG
Gesamtzahl Icons:
176
Download:
payment-icons.zip (989 kB)
Neues Icon vorschlagen:
Jetzt Kommentar schreiben
Enthaltene Icons:
AE postpayAE postpay
AT Bankomat textAT Bankomat text
AT BankomatAT Bankomat
AT eps altAT eps alt
AT epsAT eps
AT Post NachnahmeAT Post Nachnahme
BE Bancontact Mister CashBE Bancontact Mister Cash
BE BancontactBE Bancontact
BE BelfiusBE Belfius
CH Carte Blanche altCH Carte Blanche alt
CH Carte BlancheCH Carte Blanche
CH ManorCH Manor
CH Post NachnahmeCH Post Nachnahme
CH Postfinance altCH Postfinance alt
CH PostfinanceCH Postfinance
CH swisscom payCH swisscom pay
CH TWINT text altCH TWINT text alt
CH TWINT textCH TWINT text
CH TWINTCH TWINT
CN Alipay text altCN Alipay text alt
CN Alipay text alt2CN Alipay text alt2
CN Alipay textCN Alipay text
CN AlipayCN Alipay
DE auf RechnungDE auf Rechnung
DE Barzahlen textDE Barzahlen text
DE BarzahlenDE Barzahlen
DE DHL NachnahmeDE DHL Nachnahme
DE DPD Nachnahme altDE DPD Nachnahme alt
DE DPD NachnahmeDE DPD Nachnahme
DE easy credit altDE easy credit alt
DE easy creditDE easy credit
DE ECDE EC
DE GirocardDE Girocard
DE GiropayDE Giropay
DE GLS Nachnahme altDE GLS Nachnahme alt
DE GLS NachnahmeDE GLS Nachnahme
DE Hermes NachnahmeDE Hermes Nachnahme
DE LastschriftDE Lastschrift
DE payback altDE payback alt
DE paybackDE payback
DE paydirectDE paydirect
DE paymorrowDE paymorrow
DE PAYONE altDE PAYONE alt
DE PAYONEDE PAYONE
DE Post NachnahmeDE Post Nachnahme
DE Rechnung HelveticaDE Rechnung Helvetica
DE RechnungDE Rechnung
DE Sofortüberweisung heritageDE Sofortüberweisung heritage
DE Text auf RechnungDE Text auf Rechnung
DE Text LastschriftDE Text Lastschrift
DE Text Rechnung HelveticaDE Text Rechnung Helvetica
DE Text RechnungDE Text Rechnung
DE Text ÜberweisungDE Text Überweisung
DE Text VorkasseDE Text Vorkasse
DE Text VorkasseskontoDE Text Vorkasseskonto
DE Trusted Shops textDE Trusted Shops text
DE Trusted ShopsDE Trusted Shops
DE ÜberweisungDE Überweisung
DE ÜberweisungsscheinDE Überweisungsschein
DE UPS NachnahmeDE UPS Nachnahme
DE Vor Ort kaufenDE Vor Ort kaufen
DE Vorkasse Icon altDE Vorkasse Icon alt
DE Vorkasse Icon alt2DE Vorkasse Icon alt2
DE Vorkasse IconDE Vorkasse Icon
DE VorkasseDE Vorkasse
DE VorkasseskontoDE Vorkasseskonto
DE VR pay altDE VR pay alt
DE VR payDE VR pay
ES ServiceRed altES ServiceRed alt
ES ServiceRedES ServiceRed
EU Billpay altEU Billpay alt
EU BillpayEU Billpay
EU Billsafe altEU Billsafe alt
EU BillsafeEU Billsafe
EU Click and Buy textEU Click and Buy text
EU Click and BuyEU Click and Buy
EU Direct Debit altEU Direct Debit alt
EU Direct Debit alt2EU Direct Debit alt2
Eu Direct Debit alt3Eu Direct Debit alt3
EU Direct DebitEU Direct Debit
EU Klarna altEU Klarna alt
EU Klarna alt2EU Klarna alt2
EU Klarna alt3EU Klarna alt3
EU Klarna Ratenkauf altEU Klarna Ratenkauf alt
EU Klarna RatenkaufEU Klarna Ratenkauf
EU Klarna Rechnung altEU Klarna Rechnung alt
EU Klarna RechnungEU Klarna Rechnung
EU Klarna Sofort altEU Klarna Sofort alt
EU Klarna SofortEU Klarna Sofort
EU KlarnaEU Klarna
EU Micro Payment altEU Micro Payment alt
EU Micro PaymentEU Micro Payment
EU Mollie altEU Mollie alt
EU MollieEU Mollie
EU SEPA HDE DE altEU SEPA HDE DE alt
EU SEPA HDE DEEU SEPA HDE DE
EU SEPA HDE EN altEU SEPA HDE EN alt
EU SEPA HDE ENEU SEPA HDE EN
EU SEPA textEU SEPA text
EU SEPAEU SEPA
EU Skrill altEU Skrill alt
EU SkrillEU Skrill
EU Unzer altEU Unzer alt
EU UnzerEU Unzer
FR CarteBleueFR CarteBleue
FR sodexoFR sodexo
IT PostePayIT PostePay
JP JCBJP JCB
NL iDealNL iDeal
PL Przelewy24PL Przelewy24
PT MultibancoPT Multibanco
UK paysafe altUK paysafe alt
UK paysafeUK paysafe
UK sage pay altUK sage pay alt
UK sage payUK sage pay
UK soloUK solo
UK switchUK switch
WW Accor ServicesWW Accor Services
WW AmazonWW Amazon
WW American Express altWW American Express alt
WW American Express alt2WW American Express alt2
WW American Express alt3WW American Express alt3
WW American Express SafeKeyWW American Express SafeKey
WW American ExpressWW American Express
WW Apple Pay altWW Apple Pay alt
WW Apple PayWW Apple Pay
WW Bitcoin altWW Bitcoin alt
WW Bitcoin alt2WW Bitcoin alt2
WW BitcoinWW Bitcoin
WW bitpay altWW bitpay alt
WW bitpayWW bitpay
WW CirrusWW Cirrus
WW Credit CardWW Credit Card
WW Diners Club text altWW Diners Club text alt
WW Diners Club textWW Diners Club text
WW Diners ClubWW Diners Club
WW DiscoverWW Discover
WW EtherumWW Etherum
WW Google Pay altWW Google Pay alt
WW Google PayWW Google Pay
WW KontaktlosWW Kontaktlos
WW MaestroWW Maestro
WW Mastercard SecurecodeWW Mastercard Securecode
WW MastercardWW Mastercard
WW Mastercard+VISA altWW Mastercard+VISA alt
WW Mastercard+VISA alt2WW Mastercard+VISA alt2
WW Mastercard+VISA alt3WW Mastercard+VISA alt3
WW Mastercard+VISA alt4WW Mastercard+VISA alt4
WW Mastercard+VISA alt5WW Mastercard+VISA alt5
WW Mastercard+VISAWW Mastercard+VISA
WW MasterpassWW Masterpass
WW PayPal Express text altWW PayPal Express text alt
WW PayPal Express textWW PayPal Express text
WW PayPal ExpressWW PayPal Express
WW PayPal PLUSWW PayPal PLUS
WW PayPal text altWW PayPal text alt
WW PayPal textWW PayPal text
WW PayPalWW PayPal
WW paysafecardWW paysafecard
WW shoppay altWW shoppay alt
WW shoppayWW shoppay
WW stripe altWW stripe alt
WW stripe alt2WW stripe alt2
WW stripeWW stripe
WW sumup altWW sumup alt
WW sumup text altWW sumup text alt
WW sumup textWW sumup text
WW sumupWW sumup
WW Unionpay altWW Unionpay alt
WW UnionpayWW Unionpay
WW V PayWW V Pay
WW VISA ElectronWW VISA Electron
WW VISA Verified by VISAWW VISA Verified by VISA
WW VISAWW VISA
WW Wechat PaymentWW Wechat Payment
WW Western UnionWW Western Union

Die PNG-Icons stehen nicht mehr zur Verfügung. Die nachfolgenden Informationen dienen ausschließlich Dokumentationszwecken.

Update v18

Apple Pay ist da! Also im Supermarkt schon etwas länger, jetzt auch hier im Iconset. Und noch ein paar andere von der Wunschliste, wobei ich bei Alipay nicht abschließend in Erfahrung bringen konnte, was die aktuelle Version ist.

Enthaltene Icons:
Apple Pay
Google Pay
Alipay
Alipay (alternativ)
Alipay (alternativ 2)
Alipay (alternativ 3)
Ethereum
Ethereum (alternativ)
Kontaktloses bezahlen
Kontaktloses bezahlen (alternativ)
WeChat Pay
WeChat Pay (alternativ)
Przelewy24
Multibanco

Update v17

Klarna sucht nach „seiner“ Farbe im E-Commerce. Und jetzt ist es also Pink geworden. Da mach aber mal nen Punkt!
Genug der Anspielungen, zu den Fakten: Komplettes Rebranding bei Klarna und der Tochter Sofort. Neue Schrift, neue Farbe und immer ein Punkt hinter der Zahlart. Das erfordert natürlich neue Icons. Damit ist zumindest die optische Integration von Sofort in den Klarna-Kosmos abgeschlossen, jetzt muss nur noch die technische folgen.
Außerdem gibt es noch das neue Twint-Logo für die Schweiz, vielen Dank an den immer rührigen José, auch wenn ich mitunter etwas länger brauche um die Icons hochzuladen.

Enthaltene Icons:
Twint
Klarna
Klarna (alternativ)
Klarna Sofort
Klarna Sofort (alternativ)
Klarna Rechnung
Klarna Rechnung (alternativ)
Klarna Ratenkauf
Klarna Ratenkauf (alternativ)

Update v16

Diesen Monat feiert mein kleines Iconset tatsächlich schon seinen fünften Geburtstag. Statt Torte gibt es drei neue Icons, heißt doch Amazon payments neuerdings Amazon pay und ein paar Sachen von der Wunschliste habe ich dann auch gleich noch mit abgearbeitet.

Enthaltene Icons:
Amazon pay
Stripe
Ratenkauf

Update v15

Da ist mir doch tatsächlich das neue MasterCard-Logo durchgerutscht. Das betrifft gleichzeitig auch Maestro und Cirrus und eigentlich auch MasterPass. Für letzteren ist aber außer einem bemitleidenswerten Bildchen, das MasterCard höchstpersönlich auf flickr veröffentlicht hat, kein brauchbares Grundmaterial zu finden und so ist erstmal bis auf weiteres das alte MasterPass-Icon enthalten.

Aufgefallen ist mir das neue MasterCard-Logo durch ein Schreiben unseres Aquirers. Denn VISA und MasterCard tun jetzt endlich was gegen den Kreditkartenmissbrauch. Auf der letzten Checkout-Seite muss jetzt das Herkunftsland, die Anschrift und die Telefonnummer des Händlers stehen. Endlich mal eine wirksame Maßnahme. Nicht.

Enthaltene Icons:
MasterCard
Maestro
Cirrus

Update v14

Es hatte sich so einiges angesammelt im E-Mail-Postfach und in den Kommentaren. Und daher kommen hier gleich 33 neue Icons. Oft geäußerte Wünsche sind ebenso dabei wie eher selteneres. Zu ersterem zählt sicherlich das Icon für paydirekt und die beiden PayPal-Icons für PayPal Express und PayPal Plus. Beides sind reine Fantasieprodukte, da PayPal keinen Bedarf dafür sieht. Die Shopbetreiber aber sehr wohl.

Unterstützung kam unter anderem wieder von José, der mich darauf aufmerksam machte, dass VISA ein neues Logo hat. Jetzt ist es ja so, dass sich das neue, das nur noch den blauen VISA-Schriftzug mit der gelben Ecke im V hat, irgendwie flächendeckend durchgesetzt hat. Da ist es natürlich ne völlig geniale Idee erneut ein geändertes Logo einzuführen. Die gelbe Ecke fällt weg, dafür hat der Schriftzug jetzt einen Farbverlauf. Und wenn das noch nicht genug Verwirrung wäre sieht das neue VISA-Electron-Logo dem ganz alten VISA-Logo deutlich ähnlicher als dem neuen. Daher gibt es im Set auch ein alternatives Electron-Logo, das besser in die neue Bildsprache passt. Und auch eine Variante ohne Farbverlauf, für alle, denen Farbverläuf zu 90er sind.

Apropos neues Logo: Die UPS-Nachnahme zeigt jetzt das neue, flache UPS-Logo und apropos Nachname: Christin hat mich darauf hingewiesen, dass es ja gar kein Icon für Deutsche Post Nachnahme gibt. Das ist hier auch enthalten.

Und dann haben wir noch fünf neue Texticons, einfach schwarze Schrift mittig.

Enthaltene Icons:
Nachnahme UPS
Nachnahme UPS (alternativ)
PayPal Express
PayPal PLUS
Bancontact
Bancontact/Mister Cash
Belfius
Mollie
Bankomat
Sodexo
Accor Services
Unionpay
Unionpay (alternativ)
VISA
VISA (alternativ)
V-Pay
Visa Electron
VISA Electron (alternativ)
Billpay (alternativ)
Swisscom Easypay
Swisscom Natel® Pay
Swisscom Natel® Pay (alternativ)
Nachnahme Post Deutschland
Nachname Post Deutschland (alternativ)
Nachnahme Post Schweiz
Nachnahme Post Schweiz (alternativ)
Nachname Post Österreich (alternativ)
Texticon schwarz „Überweisung“
Texticon schwarz „Rechnung“
Texticon schwarz „Lastschrift“
Texticon schwarz „Nachnahme“

Update v13

Ich hab mich dann mal nochmal mit dem Thema Rechnungs-Icon auseinandergesetzt und bin dabei etwas über das Ziel hinausgeschossen. Das Update enthält neben den von Alex beigesteuerten Text-Icons für „Rechnung“ und „auf Rechnung“ ein alternatives Mastercard-Icon, ein optimiertes PostPay-Icon und, ähm, 136 weitere Icons für Rechnung.

Obwohl ich kein Freund von Skeuomorphismus bin habe ich doch mal ein Rechnungskuvert auf’s Icon gebaut. Das ganze gibt es mit und ohne Banner „Rechnung inliegend“, mit deutscher, österreichischer und schweizer Briefmarke, einer weiteren Edition mit der deutschen Briefmarke zur Fußball-Weltmeisterschaft inkl. Sonderstempel und mit passenden Anschriften auf den Kuverts. Und da hat es dann angefangen, das hinausschießen über das Ziel. Es gibt für jedes Land sowohl eine weibliche als auch eine männliche Empfängeranschrift und in Deutschland gibt es das auch noch für jedes Bundesland. Macht am Ende 136 Icons. Und wenn dann doch nicht das passende dabei sein sollte – das PSD enthält jetzt auch dieses Rechnungsicon.
Ob das aber so bleibt weiß ich noch nicht, die Datei ist dadurch immerhin auf 11,2MB angewachsen.

Für die Schweiz außerdem noch dabei: Ein Icon für Twint, das Marco beigesteuert hat. Allen Zulieferern an dieser Stelle vielen Dank.

Enthaltene Icons:
Rechnung (136 Varianten)
Texticon „Rechnung“
Texticon „auf Rechnung“
Mastercard (alternativ)
PostPay
TWINT

Update v12

Da ich heute eine Stunde mehr Zeit hatte habe ich mal die offenen Requests soweit abgearbeitet. Herausgekommen sind zwei Versionen für yapital und zwei für micropayment.

Enthaltene Icons:
micropayment
micropayment (alternativ)
yapital
yapital (alternativ)

Update v11

Kleiner Rundumschlag zu Ostern: Barzahlen in zwei Varianten, ServiRed in zwei Varianten, MasterPay in zwei Varianten (Danke an José für den Hinweis und das eine davon), ebenfalls von José das neue Diners-Club-Logo und das neue dpd-Logo mit Nachnahme-Ecke in zwei Varianten.

Enthaltene Icons:
Diners Club
Nachnahme DPD
Nachnahme DPD (alternativ)
ServiRed
ServiRed (alternativ)
Barzahlen
Barzahlen (alternativ)
Masterpass
Masterpass (alternativ)

Update v10

PayPal hat ein neues Logo. Neue Schriftart, leicht geänderte Farben und ineinanderfließende P’s.

Enthaltene Icons:
PayPal
PayPal (alternativ)
PayPal (alternativ 2)

Update v9

Ein kleines Update mit allem, was sich hier so in den letzten Monaten an Wünschen und Anregungen angesammelt hat:
Von José habe ich wieder einige Icons für Zahlungsarten aus den Nachbarländern erhalten: iDeal (Niederlande), Carte Blanche (Frankreich), Manor MyOne (Schweiz) und Paysafecard (ebenfalls Schweiz inkl. einer Variante von mir). Darüber hinaus wurden Wünsche laut nach Bitcoin (drei Varianten), Nachnahme durch die österreichische Post und Barzahlung bei Abholung, die sich auch alle in diesem Update wiederfinden. Das letztgenannte Icon ist auch in der PSD enthalten, damit man es sich nach eigenen Wünschen umfärben kann.

Enthaltene Icons:
Paysafecard
Paysafecard (alternativ)
Nachnahme Post Österreich
Bitcoin
Bitcoin (alternativ)
Bitcoin (alternativ 2)
Carte Blanche
Barzahlung bei Abholung
Manor MyOne

Update v8

2014 wirft seine Schatten voraus und mit ihm SEPA, die Single Euro Payments Area. Aus diesem Grund gibt es hier kurz vor dem Jahreswechsel ein passendes SPEA-Logo.

Enthaltenes Icon:
SEPA

Update v7

Von José habe ich ein PostFinance-Icon bekommen. Dazu habe ich noch zwei alternativen erstellt und außerdem gibt’s noch das schon länger gewünschte VR-Pay-Icon.

Enthaltene Icons:
PostFinance
PostFinance (alternativ)
PostFinance (alternativ 2)
VR-Pay

Update v6

Großes Kino von Sofortüberweisung. Es scheint echt zu viel verlangt zu sein, vorher zu prüfen, ob das neue Logo irgendwelche bestehenden Copyrights verletzt. Deshalb gibt es schon wieder ein neues. Einmal, nur einmal mit Profis arbeiten…

Enthaltenes Icon:
Sofortüberweisung

Update v5

Klarna hat ebenfalls sein Logo überarbeitet.

Enthaltene Icons:
Klarna
Klarna (alternativ)
Klarna (Rechnung)
Klarna (Ratenkauf)

Update v4

Sofortüberweisung hat ein neues Logo, das ab sofort im Icon-Set enthalten ist.

Enthaltenes Icon:
Sofortüberweisung

Update v3


Ich hab mal die Vorschläge aus den Kommentaren aufgegriffen und das Set etwas ergänzt.

Enthaltene Icons:
UPS Nachnahme
UPS Nachnahme (alternativ)
amazon payments

Außerdem gibt es jetzt ein neues Set mit Logistikdienstleistern.

Update v2

Kaum einen Tag alt gibt es schon das erste Update, in diesem sind enthalten:

Enthaltene Icons:
Billpay
Billsafe
klarna
paymorrow
Nachnahme GLS
Nachnahme GLS (alternativ)
Nachnahme Hermes (siehe auch den Kommentar von Martin)
sage pay
Skrill

Außerdem enthält die Datei jetzt generische Icons mit Text für Überweisung, Vorkasseskonto oder beliebige andere Zahlungsarten. Da nicht jeder was mit Kuckucksuhren-Grün oder rein deutschsprachigen Icons anfangen kann ist im Zip eine PSD-Datei, mit deren Hilfe man sich die benötigten Icons schnell selber machen kann. Als Schrift kommt Aller bzw. Aller Display zum Einsatz. Wer mehr zu dieser Schrift wissen will wird bei Gerrit fündig.

Release

Format:
PNG, 512px
Enthaltene Icons:
American Express
CartaSI
Carte Bleue
Carte Bleue (altes Logo)
Cirrus
clickandbuy
Diners Club
Direct Debit
Discover
EC
eps netpay
girocard
giropay
JCB
Maestro
Mastercard
Moneybookers
Nachnahme DHL
Nachnahme DPD
Paypal
postepay
sofortüberweisung.de
Solo
Switch
Überweisung
V Pay
VISA Electron
VISA
Western Union
wirecard

Weiterentwicklung

Ich glaube, dass diese Icons für viele Shopbetreiber hilfreich sind. Mir ist aber auch klar, dass es zahlreiche Zahlungsarten gibt, die noch nicht berücksichtigt sind. Gerne füge ich weitere Logos hinzu. Dazu einfach einen Kommentar hinterlassen oder mich über das Kontaktformular kontaktieren.

Lizenz

Die Icons sind kostenlos für private und kommerzielle Nutzung und stehen unter der CC BY Lizenz.
Das Copyright der einzelnen Logos liegt bei den jeweiligen Gesellschaften.

Baseball-Bundesliga.de

Es war ruhig hier die letzten Wochen. Die Baseballsaison 2012 wirft ihren Schatten voraus und in ihrem Windschatten kommt eine neue Website mit. Und diese Website war in den letzten Wochen mein liebstes Betätigungsfeld. Meistens jedenfalls.

Grundlage

Die Seite basiert auf WordPress. Was anderes darf man von mir derzeit auch nicht wirklich erwarten. Aufgrund des strammen Zeitplans (ein Monat, ein Entwickler, der zu allem Überfluss auch noch einem Beruf nachgeht) wurde ein fertiges Template als Grundlage herangezogen, das durch den grandiosen Christian Swoboda für die eigentliche Aufgabenstellung umgestaltet wurde.

Ausschlaggebend für die Wahl des Mediaflux-Templates war nicht nur die grundsätzliche optische Ausrichtung, sondern auch die Tatsache, dass es mehr oder weniger moderne WordPress-Features wie Menüs von Haus aus unterstützt. Der Quelltext ist aber leider nicht besonders hübsch und vor allem das CSS ist dermaßen überspezifiziert, da kann man mitunter schon mal zu viel bekommen.

Besonderheiten

Es gibt für WordPress ja Plugins für jeden (un)möglichen Anwendungsfall. Es gibt aber nichts für eine Ligaverwaltung. Aus diesem Grund ist der komplette spielbetriebsrelevante Teil selbst geschrieben. Für Spielpläne und Tabellen werden Schnittstellen verwendet, die ich bereits vor einigen Jahren in die Spielbetriebssoftware des DBV integriert habe und die für die neue Website entsprechend erweitert wurden. Gleiches gilt für Daten, die aus der Spielerpasssoftware opaso kommen. Auch hier wurden die Schnittstellen zum Teil beträchtlich erweitert und stehen in Kürze vermutlich auch allen Landesverbänden zur Verfügung.

Zum ersten Mal in einem meiner Projekte kommt auf dieser Seite leaflet zum Einsatz, nicht nur optisch das bessere Google Maps.

Eine besondere Herausforderung war die Anbindung des Livescoring und der daraus resultierenden Statistiken, bietet doch GameChanger keine API an. Ein Teil der Daten steht zwar als JSON zur Verfügung, manchmal hilft dann aber nur ein beherzter Griff zu PHP Simple HTML DOM Parser, um an die gewünschten Informationen zu kommen.
Ob und wie performant diese Lösung ist wird sich am 30. April zeigen, wenn die Saison mit dem Nightgame Mainz Athletics gegen die Buchinder Legionäre beginnt. Und ich werde am Mikro sitzen, also macht’s nicht gleich kaputt.

Geschwindigkeit

Performance ist natürlich ein gutes Stichwort.
Neben Caching- und Expire-Einstellungen, die man im Detail in meiner Artikelserie „xtcModified on steroids nachlesen kann, ist hier die Plugin-Schatulle von WordPress reich gefüllt:
Als Cache-Plugin kommt, wegen guter Erfahrungen bei Mister Baseball, WP Super Cache zum Einsatz.
Um Minimierung und Verknüpfung von Javascript- und CSS-Dateien kümmert sich Better WordPress Minify, das überragende Konfigurationsmöglichkeiten bietet, mir deren Hilfe man einstellen kann, was wie und wo minimiert wird.
Diese Maßnahmen bringen die Seite auf respektable 92 von 100 möglichen Page-Speed-Punkten.
Darüber hinaus werden die Informationen, die aus den APIs bezogen werden, mit Hilfe der Transients API von WordPress gechached.

Und jetzt: Play Ball!

Startseite


Clubs


Clubinfo


Roster


Liveticker

Hinten anstellen – xtcModified on steroids

Man kennt das aus dem Supermarkt: An der Kasse mal eben vordrängeln, um dann den Betrieb komplett aufzuhalten, weil man 14,83 Euro passend abgezählt in aller Seelenruhe aus dem Geldbeutel kramt. Gerne noch gepaart mit: „Ich hou mei Brilln daham vergessn, guggn sa amol, sinn des fünf odder zwaa Zent?”. Gibt’s bei der Geschwindigkeitsoptimierung im Web auch. Heißt da aber nicht Oma Meier sondern Javascript.

Javascript später parsen

Parsen Sie Javascript später, um die Blockierung der Seitendarstellung zu reduzieren.

Weil Javascript Inhalt und DOM der Seite verändern kann warten die Browser, sobald sie auf einen Script-Tag stoßen, bis das Javascript geladen, geparsed und gerendert ist, bevor sie mit dem eigentlichen Rendering der Seite fortfahren. Durch das Mischen von Javascript- und CSS-Tags kann das Laden noch einmal zusätzlich verlangsamt werden, Page Speed listet das unter ‘Reihenfolge der Formate und Skripts optimieren’. Eine Grafik, wie diese Verzögerung eben durch das Stoppen des eigentlichen Rendervorgangs aussehen kann, findet sich bei Google.

Heute geht es also darum, die Reihenfolge von CSS und Javascript im Hinblick auf Ladezeiten zu optimieren. Dabei gilt die Faustregel, CSS gleich zu Beginn und Javascript ganz am Ende zu laden. Allerdings muss man beachten, dass es Fälle gibt, bei denen man von dieser Regel abweichen muss, weil man Javascript-Funktionen schon vorher benötigt. Hat man beispielsweise einen SSL-Proxy und muss Cross-Domain-Tracking mittels Google Analytics implementieren, benötigt man das Analytics-Javascript vorher und kann es eben nicht ganz ans Ende verfrachten.
Auch die eigentliche Reihenfolge der Scripte ist wichtig, erfordern manche Funktionen bestimmte Bibliotheken, z.B. jQuery, muss dieses natürlich vorher geladen werden. Und vertauscht man die Reihenfolge bei CSS-Dateien könnte es aufgrund der Kaskade zu unerwarteten Darstellungsfehlern kommen.

Im Sourcecode von xtcModified finden sich Hinweise, dass man dieses Thema auch schon mal angegangen ist, aufgrund von Fehlern bei jQuery wurde das aber wieder rückgängig gemacht. Aktuell konnten ich bei Tests im Demoshop keine derartigen Probleme feststellen. In xtcModified findet sich außerdem noch sehr viel Javascript-Code, der nicht über eine externe Datei geladen wird. Hier aufzuräumen und den Code, der zum Teil noch aus dem originalen xt:Commerce stammt, gegen moderne, auf jQuery basierende Funktionen zu tauschen, würde eine eigene Serie gut füllen.

Daher beschränke ich mich hier mal auf das naheliegendste: In includes/header.php alles von Zeile 75 bis Zeile 278 in die Zwischenablage kopieren und dann löschen, ebenso Zeile 279 löschen. In includes/application_bottom.php die Zeilen 42 bis 46 markieren:

//BOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page
//BOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//require('templates/'.CURRENT_TEMPLATE.'/javascript/general.js.php');
//EOF - web28 - 2010-07-14 -  change to TOP of page again because jquery view problems
//EOF - DokuMan - 2010-02-25 - Enhance page loading time by putting CSS on TOP of page and JavaScript on BOTTOM of page

und durch

?>

ersetzen. Anschließend den Inhalt der Zwischenablage einfügen.

Betrachtet man die reinen Zahlen könnte man meinen, diese Änderung bringt uns primär ein gutes Gefühl.

YSlow mit Javascript am Seitenende

Page Speed mit Javascript am Seitenende

Der eigentliche Erfolg ist hier aber eher offensichtlich, wenn man sich das Rendering ansieht. Mit Javascript im oberen Bereich der Seite wird der Browser sehr früh blockiert und beginnt erst nach ca 2,5 Sekunden mit dem Rendern. Hingegen beginnt dieser Prozess nach der Änderung gut eine Sekunde früher.

Weitere Artikel der Serie

  1. Höher, schneller, weiter
  2. Verfallsdatum überschritten
  3. Druck machen – xtcModified on steroids

Disclaimer: Ich bin nach wie vor der Meinung, dass viele der Einstellungen in der Serverkonfiguration besser aufgehoben sind als in der .htaccess-Datei, da aber sicherlich viele das ganze auch auf Shared Hosting umsetzen möchten werden alle Änderungen, die auch über die .htaccess durchgeführt werden können, im Rahmen dieser Artikelreihe dort vorgenommen.

Druck machen – xtcModified on steroids

Diesmal wollen wir im Rahmen der Artikelserie zur Geschwindigkeitsoptimierung mal ein bisschen Druck ausüben, denn die Steigerung von 36 auf 60 Punkten ist bestenfalls ein Teilerfolg.

Komprimierung aktivieren

Die Komprimierung der folgenden Ressourcen mit gzip könnte ihre Übertragungsgröße um 90.0 KiB verringern (Reduzierung um 70%).

70% der zu übertragenden, komprimmierungsfähigen Daten könnte man sich also sparen, wenn man diese vor der Auslieferung zippt. Das Entpacken findet dann beim Empfänger durch den Browser transparent statt. Jeder moderne Browser kann damit umgehen. Will man es auf die Goldwaage legen könnte man argumentieren, dass der Browser durch den erforderlichen Entpackvorgang länger braucht, um die Seite zu rendern. Aber das Nadelöhr ist nach wie vor ganz klar die Bandbreite der Leitung zum Empfänger, während die Prozessoren in moderner (Desktop-)Hardware gerade mal müde lächeln, wenn sie komprimierte Daten vorgesetzt bekommen.
Für die meisten eher unbedeutend ist in Zeiten von Traffic-Flatrates auch für Server die Einsparung beim Datenvolumen. Aber spätestens beim Thema CDN, wo nach wir vor nach Traffic abgerechnet wird, wird es plötzlich wieder interessant.

Komprimierung? Bringt der Shop doch schon mit!

php bietet von Haus aus die Möglichkeit, Daten komprimiert auszuliefern und in xtcModified ist die Option im Admin unter ‘Erweiterte Konfiguration’ – ‘Gzip Kompression’ auch schnell gefunden und aktiviert. Nur: Das gelbe Ausrufezeichen in Page Speed verschwindet nicht, die Note von YSlow für die Komprimierung wird nur marginal besser.

Der Grund ist einfach: Die shopeigene Komprimierung wird wie gesagt vom php-Parser zur Verfügung gestellt. Nur Dateien, die diesen vor Auslieferung passieren, werden komprimiert. Und genau das gilt nicht für CSS und Javascript. Aber gerade hier findet sich ein enormes Einsparpotential.

mod_deflate kümmert sich um alles

Auch hier kommt uns wieder ein Apache-Modul zu Hilfe: mod_defalte (seit Apache 2, davor hieß es mod_gzip und wer noch einen Apache 1 im Einsatz hat sollte seinen Serveradmin mal fragen, ob er nicht lieber mit etwas Geld verdienen möchte, womit er sich auch auskennt). Und auch hier lohnt ein Blick in die .htaccess des HTML5Boilerplate. Zuvor schalten wir aber die shopeigene Komprimierung wieder aus, sie wird nicht benötigt.

<IfModule mod_deflate.c>
 
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)s*,?s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
    RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
  </IfModule>
</IfModule>
 
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
  FilterDeclare   COMPRESS
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/html
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/css
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/plain
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $text/x-component
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/javascript
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/json
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/xhtml+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/rss+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/atom+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/vnd.ms-fontobject
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $image/svg+xml
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $application/x-font-ttf
  FilterProvider  COMPRESS  DEFLATE resp=Content-Type $font/opentype
  FilterChain     COMPRESS
  FilterProtocol  COMPRESS  DEFLATE change=yes;byteranges=no
</IfModule>
 
<IfModule !mod_filter.c>
  # Legacy versions of Apache
  AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
  AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>

Zunächst kümmert man sich um Clients, die aufgrund von Proxies oder anderer Einflüsse kaputte Header schicken und standardmäßig nicht mit komprimierten Inhalten versorgt werden würden. Gemäß einem Blogpost im Yahoo! Developer Network sind das ca. 15% der Besucher, also eine nicht zu unterschätzende Anzahl.

Anschließend werden mit Hilfe von mod_filter, das wesentlich flexibler ist als das früher benutzte AddOutputFilterByType, Inhalte in Abhängigkeit ihres MIME-Type (den wir ja schon im zweiten Teil gerade gezogen haben) komprimiert. Bei Bildern beispielsweise wäre das nur verschwendete Rechenleistung. Der letzte Block ist für Server, die ohne mod_filter laufen, indem die ‘alte’ mod_deflate-Syntax zum Einsatz kommt.

Wer jetzt neu lädt wird sich wundern, dass sich nach wie vor nichts tut, unsere Javascript- und CSS-Daten noch immer bemängelt werden. Nachdem wir aber bereits im vorherigen Teil die Expire-Zeiten hoch gesetzt haben fragt der Browser gar nicht mehr beim Server nach, sondern holt die Datei aus seinem Cache und die ist natürlich unkomprimiert.
Um realistische Ergebnisse aus Page Speed zu bekommen müssen wir also den Browsercache umgehen, entweder indem wir ihn leeren oder indem wir mit gedrückter Hochstelltaste auf das ‘Neu laden’-Icon klicken – zumindest in Firefox und Chrome führt das zum gewünschten Ergebnis. Das ist aber auch nur deshalb praktikabel, weil sich unser Shop noch im Testbetrieb befindet. Wie man das Problem im Livebetrieb umgeht haben wir ja schon behandelt.

YSlow jetzt mit der Gesamtnote A

YSlow jetzt mit der Gesamtnote A

Auch bei Page Speed die 75%-Marke überschritten

Auch bei Page Speed die 75%-Marke überschritten

Natürlich gibt es auch die neue .htaccess mit dem aktuellen Status zum Dowload.

Weitere Artikel der Serie

  1. Höher, schneller, weiter
  2. Verfallsdatum überschritten

Disclaimer: Ich bin nach wie vor der Meinung, dass viele der Einstellungen in der Serverkonfiguration besser aufgehoben sind als in der .htaccess-Datei, da aber sicherlich viele das ganze auch auf Shared Hosting umsetzen möchten werden alle Änderungen, die auch über die .htaccess durchgeführt werden können, im Rahmen dieser Artikelreihe dort vorgenommen.

Verfallsdatum überschritten – xtcModified on steroids

36 von 100 möglichen Punkten erreicht ein frisch installierter xtcModified auf einem 1&1 Virtual Server. Diesen Wert gilt es jetzt im Rahmen dieser Artikelserie zu optimieren.

Browser-Caching nutzen

Ganz oben auf der Liste von Page Speed steht das fehlende Browser Caching.

Die Aktualität der folgenden Cache-fähigen Ressourcen ist nur von kurzer Dauer. Legen Sie fest, dass folgende Ressourcen künftig mindestens einmal pro Woche ablaufen:

Und darunter kommt so ziemlich jedes Bild, das Stylesheet und die Javascript-Dateien, die alle kein Ablaufdatum haben. Dieses würde festlegen, wie lange der Browser oder auch ein Proxyserver die Datei als aktuell betrachtet. Mit der aktuellen Konfiguration fordert er jede Datei bei jedem Aufruf erneut an, denn kein Ablaufdatum bedeutet, dass die Datei aus Browsersicht sofort veraltet ist.

Ein solches Verhalten ist sinnvoll und wünschenswert bei Inhalten, die bei jeder Anforderung die aktuellen Gegebenheiten reflektieren müssen, so führt beispielsweise das hinzufügen eines Artikels zum Warenkorb zu einer Änderung und das HTML für den Warenkorb darf dann eben nicht aus dem Cache geholt werden. Bilder, Stylesheets und Scripts ändern sich aber in der Regel nicht mit jedem Klick. Es ist also völlig unnötig, diese Dateien jedes Mal erneut anzufordern bzw. auch nur beim Server anzufragen, ob sich was geändert hat.

mod_expires for the rescue

Zwar gibt es in der .htaccess-Datei, die mit xtcModified mitkommt, einen Eintrag, um bestimmte Formate mit einem Ablaufdatum von einem Monat zu versehen (der aber standardmäßig nicht aktiv ist), ich bevorzuge hier aber die feiner aufgranulierte Lösung aus dem HTML5Boilerplate:

<IfModule mod_expires.c>
  ExpiresActive on
 
# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"
 
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"
 
# Your document html 
  ExpiresByType text/html                 "access plus 0 seconds"
 
# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"
 
# Feed
  ExpiresByType application/rss+xml       "access plus 1 hour"
  ExpiresByType application/atom+xml      "access plus 1 hour"
 
# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week" 
 
# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
 
# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"
 
# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 
# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
 
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
 
</IfModule>

Das ganze in If-Bedingungen zu verpacken verhindert effektiv Internal Server Errors (500), wenn das Modul nicht installiert ist. Klar, dass das ganze dann auch nichts bringt, aber ein Shop, der Inhalte ohne die Optimierung ausliefert ist immer noch besser als ein Shop, der nur eine Fehlermeldung zurückgibt.
Wenn aber mod_expires aktiv ist geschieht folgendes: Der generelle Wert für das Ablaufdatum wird auf einen Monat gesetzt und das ganze dann für Inhalte, die nicht gecached werden sollen, wieder zurückgesetzt. Anschließend werden die Werte für einzelnen Formate basierend auf dem MIME-Type gesetzt. Man könnte alles weglassen, was dem generellen Wert entspricht, aber ich lasse das hier mal mit aufgeführt, vielleicht will man den ein oder anderen Ablaufzeitraum doch anpassen, bei X-Skating sind es beispielsweise 10 Jahre für Bilder. Auf die dabei auftretenden Probleme gehe ich später noch ein.
Cache-Control “public” sorgt dann noch dafür, dass diese Inhalte auch von Proxies gecached werden können, auch wenn man sich vorher per HTTP authentifizieren musste (was für xtcModified aber nicht zutrifft).

Da mod_expires auf Grundlage der MIME-Types arbeitet empfiehlt es sich, noch einen anderen Bereich aus der Datei von HTML5Boilerplate zu übernehmen, nämlich den Teil, wo die MIME-Types vereinheitlicht werden, gerade Javascript kommt je nach Serverkonfiguration mit den obskursten MIME-Types daher:

# JavaScript
#   Normalize to standard type (it's sniffed in IE anyways)
#   tools.ietf.org/html/rfc4329#section-7.2
AddType application/javascript         js
 
# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a
 
# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm
 
# SVG
#   Required for svg webfonts on iPad
#   twitter.com/FontSquirrel/status/14855840545
AddType     image/svg+xml              svg svgz
AddEncoding gzip                       svgz
 
# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff
 
# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard                        vcf

Die einzige Änderung, die wir noch an den Expires vornehmen ist das Favicon, das wird ebenfalls auf einen Monat gesetzt. Die .htaccess, wie sie bis zu diesem Zeitpunkt aussieht, kann hier heruntergeladen werden.

Erneut durch YSlow und Page Speed überprüft ergibt sich schon ein wesentlich besseres Bild. YSlow pendelt sich jetzt bei 89 Punkten ein, noch deutlicher ist die Steigerung bei Page Speed, 60 von 100 möglichen Punkten stehen jetzt bereits zu Buche.

YSlow klettert von 80 auf 89 Punkte...


...Page Speed sogar von 36 auf 60

Auch schön zu sehen ist die extreme Reduktion an HTTP-Requests durch diese Maßnahme. So zeigt das Wasserfalldiagramm bei webpagetest.org ohne mod_expire auch bei der Anfragewiederholung noch alle Bilder etc. Der Server antwortet zwar mit 304 Not Modified, aber die Anfrage geht trotzdem raus und muss beantwortet werden. Sind Expire-Header gesetzt gehört das der Vergangenheit an.

Inhalte aktualisieren bei langen Expires

(Sehr) lange Expire-Zeiten bringen ein Problem mit sich: Da der Browser davon ausgeht, dass die CSS-Datei, die er gestern geladen hat, noch ein Jahr gültig ist, wird er erst gar nicht auf die Idee kommen, diese neu anzufordern. Daher kommt man um eine Versionierung nicht herum. HTML5Boilerplate empfiehlt das über Query-Paramter zu machen, statt stylesheet.css ruft man also beispielsweise stylesheet.css?20120112 auf. Damit man das nicht jedes Mal händisch aktualisieren muss sollte man die Zeilen 15 und 16 in templates/xtc5/css/general.css.php wie folgt ändern:

<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/stylesheet.css?<?php echo filemtime('templates/'.CURRENT_TEMPLATE.'/stylesheet.css') ?>" type="text/css" />
<link rel="stylesheet" href="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/css/thickbox.css?<?php echo filemtime('templates/'.CURRENT_TEMPLATE.'/css/thickbox.css') ?>" type="text/css" media="screen" />

Damit wird immer das Datum der letzten Modifikation als Unix-Zeitstempel angehangen. Das gleiche sollte man auch für das Javascript machen, aber da wir uns dem eh im Rahmen dieser Serie noch gesondert annehmen müssen verschieben wir das auf einen späteren Zeitpunkt.

Als letztes Problemkind bleiben die Bilder. Die Lösung dafür ist etwas aufwendiger und wird behandelt werden wenn wir auf das Thema Content Delivery Networks (CDN) zu sprechen kommen.

Weitere Artikel der Serie


Disclaimer: Ich bin nach wie vor der Meinung, dass viele der Einstellungen in der Serverkonfiguration besser aufgehoben sind als in der .htaccess-Datei, da aber sicherlich viele das ganze auch auf Shared Hosting umsetzen möchten werden alle Änderungen, die auch über die .htaccess durchgeführt werden können, im Rahmen dieser Artikelreihe dort vorgenommen.

Höher, schneller, weiter – xtcModified on steroids

So langsam erreicht die Erkenntnis, dass Websitegeschwindigkeit (auch) ein Rankingkriterium sein kann, auch die kleineren und ganz kleinen Shops.

Zeit, in einer Artikelserie mal zu zeigen, wie man aus einem der derzeit beliebtesten Open-Source-Systeme, nämlich aus xtcModified, das Maximum rauskitzeln kann.

Ausgangssituation

Shopsystem

Es beginnt mit einem xtcModified, wie er aus der Schachtel fällt. Zum Zeitpunkt dieser Artikelserie trägt er den schönen und leicht zu merkenden Namen 1.05 SP1b. In diesen wurden die Demoartikel importiert, allerdings mit individuellen Artikelnummern, damit es mehr als vier unterschiedliche Produkte sind. Außerdem wurden noch SEO-URLs aktiviert und vier Artikel auf die Startseite gestellt.

Hosting

Installiert ist der Shop auf einem 1&1 Virtual Server L, denn nur so hat man die maximale Kontrolle. Das sollte man im Hinterkopf behalten, wenn man die im Rahmen dieser Serie vorgestellten Tipps auf einem Shared Hosting umsetzen will, manche Sachen gehen dort einfach nicht.

Domain

Ach ja, Domains kauft man nicht, Domains hat man. Es stimmt, dass man die bei eigentlich jedem Hosting hinterherworfen bekommt. Trotzdem sollte man darauf achten, dass man eine größtmögliche Flexibilität bei der Konfiguration hat.
10 Subdomains, wie es 1&1 beispielsweise früher für einen Server angeboten hat, sind eine absolut sinnlose künstliche Limitation. Domaindiscount24 hat sich in den vergangenen Jahren als zuverlässiger Partner erwiesen was das Domainhosting angeht. Wer keinen eigenen Server hat sollte aber vorher mit seinem Hoster klären, ob dieser Fremddomains einrichten kann. Bei den meisten geht das kostenlos, bei manchen muss man eine geringe monatliche Gebühr einplanen.

Tools

Yahoos YSlow und Googles Page Speed sind sicherlich die beiden bekanntesten Browser-Plugins, die sich dem Thema Websitegeschwindigkeit widmen. Diese beiden werden uns im Rahmen der Serie begleiten, hin und wieder aber vom ein oder anderen Online-Tool ergänzt werden. Die Kritierien, die beide überprüfen, ähneln sich, die Ergebnisse könnten aber unterschiedlicher nicht sein.

Ausgangssituation YSlow

Während YSlow 80 Punkte vergibt und damit auf die amerikanische Schulnote ‘B’ kommt kann sich Page Speed bei unserem Testshop unter www.ladeze.it lediglich für 36 von 100 Punkten erwärmen, was zu einem roten Gesamtwert führt.

Ausgangssituation PageSpeed

Damit konfrontiert geht es jetzt an die Optimierung, denn auch beim ‘B’ von YSlow ist deutlich Optimierungspotential zu sehen, gibt es doch für den ein oder anderen Punkt eine glatte Sechs.

Wer sich die Wartezeit bis zum zweiten Teil etwas verkürzen will sollte in den Podacst von OnlineRader reinhören. Der bietet einen guten Überblick zum Thema.


Disclaimer: Ich bin nach wie vor der Meinung, dass viele der Einstellungen in der Serverkonfiguration besser aufgehoben sind als in der .htaccess-Datei, da aber sicherlich viele das ganze auch auf Shared Hosting umsetzen möchten werden alle Änderungen, die auch über die .htaccess durchgeführt werden können, im Rahmen dieser Artikelreihe dort vorgenommen.