Navigation öffnen

Archiv des Autors: Lars Messmer

Über Lars Messmer

Lars Messmer ist Geschäftsführer und zuständig für Consulting, Training und Beratung in allen Geschäftsbereichen der comsolit AG.

Website Geschwindigkeit optimieren

Veröffentlicht am von
Kommentar

Eine optimale Geschwindigkeit der Website ist sehr wichtig. Eine langsame Website kann fatale Folgen haben, dies reicht von schlechtem Google Ranking bis zu weniger Umsatz durch vermehrte Besucherabbrüche.

Website Speed optimieren

Speed ist wichtig

Amazon hat bereits 2006 Statistiken und Informationen präsentiert die aufzeigten das pro 100ms Verlangsamung 1% Umsatzeinbussen im Amazon Shop resultierten.
2010 hat Google bekanntgegeben das sie den Websitespeed als Rankingkriterium heranziehen.

Komplexes Thema

Website Speed ist ein komplexes Thema, auf die Frage was ist eine optimale Geschwindigkeit oder wie viel KB dar eine Website haben gibt es keine allgemein gültige Antwort.
Eine Website kann zum Beispiel eine erste Antwort nach 180ms ausliefern, nach 340ms ist die Struktur und das Dokument (DOM) geladen, nach 1.2 Sekunden sind die Bilder geladen und nach 2 Sekunden sind auch die Informationen über asynchrone Javascripts und externen Quellen geladen, dies wäre falls konstant reproduzierbar ein gutes Ergebnis.
Wichtig ist das man die verschiedenen Eckpunkte die der Surfer beim Besuchen einer Website spürt separiert betrachtet, dies sind z.B.:

  • Zeit bis zur ersten Antwort der Website
    Auflösen der Domain
    Der Server verarbeitet die Anfrage
    Das CMS / der Online Shop liefert die Inhalte aus
  • Aufbau der Struktur und laden der Inhalte
    Die Inhalte wie HTML, CSS, JavaScript und Bilder müssen vom Browser geladen und verarbeitet werden.
  • Geschwindigkeit beim Navigieren und Interagieren auf der Website, in den Warenkorb legen von Artikel.
    Beim Wechseln der Seiten über die Navigation müssen nur noch die gewünschten Inhalte geladen, beim Interagieren werden werden Inhalte ein/ausgeblendet oder asynchron nachgeladen.
Geschwindigkeit optimieren

Viele verschiedene Optimierungsmöglichkeiten stehen zur Verfügung:

  • Serveranfragen und Domainauflösung können verteilt und über Proxys und Clouds optimiert werden.
  • Die serverseitige Verarbeitung der Anfragen und Verarbeitung von Daten sollte konzeptionell optimal programmiert sein, dies reicht von der Datenbankintegration über das Inhaltskonzept bis zum Besucherorientierten Workflow.
  • Veröffentlichungs-, Stageing- und Caching-Konzept: viele CMS und Shops verfügen über gute Caching Frameworks die beim veröffentlichen von neuen Inhalten integriert werden sollten so das der Besucher von diesen Vorteilen.
  • Oft sind Feedbacks und Statusanzeigen während länger dauernden Prozessen auch eine gute Lösung den Besucher zu behalten.
  • Frontend Optimierung: Der vom Server ausgelieferte Code sollte optimiert, schlank, komprimiert und fehlerfrei sein, Einsatz von z.B. Preprozessoren.
  • und noch viel mehr.

Optimierungsbeispiel:
Website mit TYPO3 CMS wurde beschleunigt mit folgenden Massnahmen:

  • Frontend Analyse mit Google Pagespeed
  • Analyse mit PHP Profiler und Datenbank Profiler
  • Regelmässige Wartungs- und Cleaning-Jobs in Randzeiten
  • Cache Gültigkeits- und re-caching-Konzept so das immer nur gecachte Inhalte ausgeliefert werden
  • Frontendoptimierung durch Javascript und CSS Verbesserungen
  • Einsatz von Varnish Cache

Kontaktieren Sie uns, wir analysieren Ihre Website oder Ihren Online Shop gerne und zeigen Ihnen Speedoptimierungs Möglichkeiten auf.

 

 

Tags , , Kommentar hinterlassen

zweite internationale Flow Konferenz – Bericht

Veröffentlicht am von
Kommentar

Vom 19. bis 20. April 2013 fand in Kolbermoor bei Rosenheim die zweite internationale Flow Konferenz statt, die Inspiring Flow. Da wir bei comsolit AG voll auf das PHP-Framework Flow setzen und bereits seit Anfang 2012 aktiv an einem auf Flow basierten Internetportal entwickeln, waren wir auch mit drei Mitarbeitern an der Konferenz.

PHP Framework Flow

Wie schon im letzten Jahr wurde die Konferenz von der Agentur Techdivision organisiert. Das letzte Jahr bei der ersten Konferenz handelten die Themen vor allem von dem was noch so zu erwarten ist, wie die Entwicklung weiter gehen soll und was man alles mit Flow machen kann. Die einzelnen Vorträge wurden auch hauptsächlich vom Flow Core Team präsentiert. Zu diesem Zeitpunkt lag das PHP Framework noch in Version 1.0 vor.

Dieses Jahr sah man nun ganz klar dass Flow erwachsen geworden ist, weltweit Akzeptanz bei Software-, Webentwickler gefunden hat und Probleme welche letztes Jahr noch diskutiert wurden wie fehlende Funktionen, Performance usw. haben sich alle erledigt. Es waren nun Vorträge über Themen wie Best-Practice, über das Ecosystem (Surf, TYPO3 usw.) rund um Flow, die Integration und Anwendung in Kontext mit anderen Produkten und auch die eine oder andere praktische Webanwendung wurden vorgestellt.
Derzeit steht die Version 2.0 beta zur Verfügung.

Wer jetzt noch nicht von Flow überzeugt wurde, ist nach der Konferenz nun definitiv begeistert und voller neuer Ideen.

Unsere Kollegen von typovision haben wie wir es gewohnt sind von den Deutschen einen ausführlicheren Bericht gebloggt.

Tags Kommentar hinterlassen

Webdesign mit Sass und Compass

Veröffentlicht am von
Kommentar

Die CSS Extension Sass und der Compiler Compass haben das Webdesign unbestritten revolutioniert.

Sass ermöglicht beim Webdesign die CSS (Cascading Style Sheets) Anweisungen logisch, wiederverwendbar und fehlerfrei zu entwickeln, so wie man es von Programmiersprachen gewohnt ist. Gerade bei umfangreichen Websites, Online Shops usw., ergeben sich schnell mal CSS Dateien welche mehr als 10’000 Zeilen Code haben, dann kommt Sass und Compass sehr gelegen.

Es gibt aber eine kleine Hürde, die viele Webdesigner abschreckt, um Sass und Compass verwenden zu können, muss man zuerst Ruby installieren und anschliessend noch die Dateien per Comandline Tool manuel compilen, was den meisten Webdesigner keinen grossen Spass macht.

Nun das muss nicht sein, es gibt für Mac und Windows ein ganz hilfreiches Software Tool, die Scout-App.

Webdesign mit Sass, Compass und Scout

Webdesign mit Sass, Compass und Scout

Scout Compass and Sass without all the hass(le) hält auch was es verspricht.

Die App ist ganz einfach zu konfigurieren, kann verschiedene Webdesign Projekte gleichzeitig verwalten und compiliert Sass Dateien automatisch und blitzschnell im Hintergrund.

Die Syntax von Sass ist schnell gelernt, hier die umfangreiche Sass Referenz zum nachschauen. Es gibt zwei Möglichkeiten die Sass Dateien als .scss oder .sass mit den dazugehörigen Syntax zu verwenden.

Unterschiede Sass und Scss

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Scss

li
  font:
    family: serif
    weight: bold
    size: 1.2em

Sass

Code Beispiele

$green: #AACF29;

.greenbox {
background-color: $green;
}

.darkgreenbox {
background-color: darken($green, 20%);
}

Variable z.B. für Farbe verwenden

@import "colors.scss";

Scss Dateien können als sog. Partials eingefügt werden in dem dem Dateinamen “_” an den Anfang gestellt wird “_colors.scss” somit wird diese Datei nicht einzel compiliert.

Um bestehende css Dateien in Sass Dateien zu konvertieren eignet sich die .scss Variante, da man sämtliche normalen css Anweisung belassen kann.

Wenn man neue Sass Dateien erstellt, dann .sass verwenden, da der Syntax hier etwas schlanker ist.

Entwicklung mit Sass/Compass

Die Verwendung von Sass und Compass ist erst sinnvoll mit einem
Deployment welches über die Entwicklungsumgebung auf den Live Server staged.
Auf dem Live Server CSS Dateien anpassen würde das ganze Konzept von Sass ja unbrauchbar machen.

Bei comsolit verwenden wir beim Entwickeln von Websites  das Versionssystem Git und die Deploymentstruktur: Development Clones (Entwicklungsumgebungen mit Scout) -> Delopment Bare Repository (Entwicklungsserver) -> Master Bare Repository (Kundenserver) -> Checkout (Live Website)
Und schliessen die scss, sass und css Dateien in die Versionisierung ein.
Im .gitignore empfehlen wir den .sass-cache Ordner auszuschliessen.

Links:

SASS Referenz

SASS Language

Scout App

Ruby

 

Tags Kommentar hinterlassen

Online Shop / E-Commerce Checkliste 1/3

Veröffentlicht am von
Kommentar

Der Aufbau eines eigenen Online Shop oder eigenes E-Commerce Angebots ist keine einfache Aufgabe.
Was ist alles zu beachten um einen erfolgreichen Online Shop resp. ein erfolgreiches E-Commerce Angebot zu starten?
Viele Unternehmen überlegen sich Ihre Produkt oder Dienstleistungen auch online zum Verkauf anzubieten, zahlreiche tun es schon mit Erfolg aber einige sind damit auch gefloppt.

 Online Shop Checkliste

Onlineshops die Gewinn bringen von der Internetagentur comsolit AG

Diese Checkliste soll helfen die wichtigsten Punkte vorher zu klären und das Projekt Onlineshop so zu planen das dem Erfolg nichts mehr im Weg steht.

1. Was bringt ein Online Shop

  • Reduzierung von Verwaltungsarbeit in der
    Auftragsbearbeitung und dem Kundenservice
  • Betriebskosten reduzieren
  • Einfache Markterweiterung, Markterschliessung
  • Steigerung der Kundenzufriedenheit
  • Steigerung der Effizienz Ihres Personaleinsatzes
  • Verringerung von Fehlbestellungen und -lieferungen

2. Macht ein Online Verkauf für meine Produkte oder Dienstleitungen Sinn, eignen sich diese dafür?

Einerseits werden nicht mehr nur Bücher oder CD’s im Internet verkauft, auch hochpreisige Produkte wie Computer-Hardware, Elektrogeräte, Bekleidung und Haushaltswaren oder Reisen erfreuen sich wachsen­der Beliebtheit bei Online-Käufern

Anderseits lässt sich Online nicht alles gleich erfolgreich verkaufen, z.B. komplexe Produkte oder Dienstleistungen bei denen eine persönliche Beratung Face to Face wichtig ist und auch solche deren Produktabbildung online sehr komplex ist. Sonderanfertigungen eignen sich weniger gut.

3. Checkliste, eignet sich mein Produkte oder meine Dienstleistung für den Onlineverkauf?

Im ersten Schritt gilt es, die Produktinnovation sowie dessen Eignung für den Direktvertrieb bzw. die Distribution über den Einzelhandel zu untersuchen. Idealerweise eignen sich für den Online-Vertrieb neue Produkte, die sich für den Direktvertrieb eignen oder solche mit vielfältigen Konfigurationsvarianten.

Dazu gehören beispielsweise selbst konfigurierbare Computer-Systeme, die der Kunde nach seinen eigenen Wünschen zusammenstellt, wie sie bereits erfolgreich von den Firmen Dell angeboten werden.

Die parameterisierbaren Produkte haben zudem für das Marketing sowie die Fertigung einen positiven Nebeneffekt, da die Produkte unter Umgehung von Händler und Vertrieb in kürzester Zeit gefertigt werden. Zudem erhält der Hersteller vom Kunden direkt ein Kundenprofil, das für zukünftige Marketingaktionen von Nutzen sein kann.

4. Der Artikelpreis

Auch der Preis des Produkts spielt eine grosse Rolle für einen geeigneten Online-Vertrieb. Solange sich noch keine Zahlungssysteme für Kleinstbeträge bis 5 CHF etabliert haben, lassen sich Produkte im Niedrigpreissegment nur schwer vermarkten.

Artikel im Rappenbereich lassen sich nicht wirtschaftlich sinnvoll über Kreditkarte abrechnen, da die Evaluierungs- und Transaktionskosten für Kreditkartenbeträge je Evaluierung oftmals über dem Verkaufspreis liegen.

Eine Lösung hierfür ist das Micropayment.

Dieser Artikel ist dreiteilig.
Im nächsten Teil des Artikels: Strategie, Wettbewerb, Budget, Softwareprodukte und Lösungen

Tags , , Kommentar hinterlassen

Google Rich Snippet – How To

Veröffentlicht am von
Kommentar

Mit Google Rich Snippet lassen sich die Suchergebnisse auffälliger gestalten und somit mehr Traffic auf die Website leiten. Leider werden diese Rich Snippet hier zu Lande eher selten gesehen. Hier ein kleiner Überblick was möglich ist und ein How-To.

(Ansicht im Google Webmastertool)


Ein paar sinnvolle Möglichkeiten für Rich Snippet sind:

  • Flüge / Fluginformationen
  • Events / Vortäge / Seminare
  • Rezepte
  • Unternehmensinformationen
  • Informationen zu Personen
  • Produkte
  • Bewertungen
  • Wetter
  • Musik

Damit Google die Rich Snippets auch einblendet, muss der entsprechnende Inhalt z.B. mit einem speziellen Microformat gekennzeichnet werden. Der Syntax ist unter schema.org oder z.B. rdfa.info ganz gut dokumentiert.

Beispiel Event als Rich Snippet:

    <div itemscope itemtype="http://schema.org/Event">
      <a itemprop="url" href="nba-miami-philidelphia-game3.html">
      NBA Eastern Conference First Round Playoff Tickets:
      <span itemprop="name"> Miami Heat at Philadelphia 76ers - Game 3 (Home Game 1) </span>
      </a>

      <meta itemprop="startDate" content="2016-04-21T20:00">
        Thu, 04/21/16
        8:00 p.m.

      <div itemprop="location" itemscope itemtype="http://schema.org/Place">
        <a itemprop="url" href="wells-fargo-center.html">
        Wells Fargo Center
        </a>
        <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
          <span itemprop="addressLocality">Philadelphia</span>,
          <span itemprop="addressRegion">PA</span>
        </div>
      </div>

      <div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer">
        Priced from: <span itemprop="lowPrice">$35</span>
        <span itemprop="offerCount">1938</span> tickets left
      </div>
    </div>


(Microformat Beispiel eines Events)

Als nächstes wird der gekennzeichnete Inhalt getestet
und kann dann in die Website eingebunden werden.
Im Google Webmaster Tool wird dann die Auslieferung dieser Daten auch sichtbar.

Links:
http://www.schema.org/
http://rdfa.info/
http://www.google.de/webmasters/
http://www.google.com/webmasters/tools/richsnippets

Tags , Kommentar hinterlassen

Blog per E-Mail abonnieren

zum Seitenanfang