PHPGangsta - Der praktische PHP Blog

PHP Blog von PHPGangsta


Archive for the ‘Optimierung’ tag

SQL richtig schreiben: Ausnutzung von Indizes

with 5 comments

PerformanceUm SQL kommt man in der heutigen Webentwicklung nicht herum, und jeder von uns kann SQL-Queries erstellen. Doch nicht jeder SQL-Query, der das korrekte Ergebnis zurückliefert, ist optimal aus Sicht der Performance. Hier ein kleines Beispiel:

Wir haben folgende Tabelle:

CREATE TABLE IF NOT EXISTS `Login` (
  `LoginId` int(11) NOT NULL AUTO_INCREMENT,
  `UserId` int(11) NOT NULL,
  `LoginDateTime` datetime NOT NULL,
  PRIMARY KEY (`LoginId`)
)

Nehmen wir an in der Tabelle sind 10.000.000 Zeilen. Es sind 10.000 verschiedene UserIds enthalten und jeder User hat im Schnitt 1.000 Logeinträge in den letzten 3 Jahren produziert. Die Tabelle enthält erstmal keine Indizes.

Die Aufgabe ist die folgende: Hole alle Logeinträge die in den letzten 30 Minuten stattgefunden haben.

Die Queries

Weiterlesen »

Written by Michael Kliewe

März 27th, 2013 at 10:10 am

CSS Sprites

with one comment

In einem meiner letzten Artikel zum Thema „ Externe Javascript Dateien zusammenfassen“ haben wir bereits gemerkt, dass man HTTP-Requests verringern sollte, um die Performance auf dem Client und die Benutzererfahrung zu verbessern. Dies kann im Falle von CSS-Dateien weniger effektiv sein als beispielsweise bei Javascript-Dateien.

Bei Bildern in großer Anzahl muss der Browser diese auch nacheinander laden, was zu Verzögerungen bei der Anzeige führen kann. Nehmen wir an, wir haben eine Webseite mit vielen Grafiken. Das Menu besteht aus 10 Bildern, jedes davon hat einen Mouseover-Effekt, und es gibt noch einige weitere Bilder. Es resultiert also in >25 Bildern, die der Browser einzeln laden muss. Außerdem stehen dann die Mouseover-Bilder bereits von Anfang an zur Verfügung, und müssen nicht erst geladen werden, wenn die Maus darüber bewegt wird, wir haben also eine Art eingebauten Preload.

Um die Anzahl von HTTP-Requests zu verringern, kann man alle Bilder in ein großes Bild packen, und mit Hilfe von CSS dann den richtigen Abschnitt anzeigen. In diesem Schritt kann man auch nochmal diese Bilder etwas komprimieren, um noch Bandbreite zu sparen, denn häufig sehen die Bilder auch mit weniger Farben genausogut aus.

Ein solches Bild könnte zB. so aussehen:

nav-final

Wir haben also viele kleine Bilder in einem Bild untergebracht. Um diese Bildchen dann nutzen zu können und nur einen kleinen Ausschnitt dieses großen Bildes anzeigen zu können, nutzen wir die CSS-Funktion „background-position“.

Beispielsweise könnte der HTML-Code so aussehen:

<ul id=”navigation”>
	<li id=”navigation-01"><a href=”#”><span>Blog</span></a></li>
	<li id=”navigation-02"><a href=”#”><span>Portfolio</span></a></li>
	<li id=”navigation-03"><a href=”#”><span>Resume</span></a></li>
	<li id=”navigation-04"><a href=”#”><span>Contact</span></a></li>
</ul>

Wir schreiben die einzelnen Menupunkte noch als Text rein, damit Suchmaschinen sie lesen können. Das entsprechende CSS sieht dann so aus:

#navigation {
	background:url(”/images/navigation.jpg”) no-repeat;
	width:490px;
	height:40px;
	margin:0;
	padding:0;
}

#navigation span {
	display: none;
}

#navigation li, #navigation a {
	height:40px;
	display:block;
}

#navigation li {
	float:left;
	list-style:none;
	display:inline;
}

#navigation-01 {width: 98px;}
#navigation-02 {width: 131px;}
#navigation-03 {width: 123px;}
#navigation-04 {width: 138px;}

#navigation-01 a:hover {background:url(”/images/navigation.jpg”) 0px -40px no-repeat; }
#navigation-02 a:hover {background:url(”/images/navigation.jpg”) -98px -40px no-repeat; }
#navigation-03 a:hover {background:url(”/images/navigation.jpg”) -229px -40px no-repeat; }
#navigation-04 a:hover {background:url(”/images/navigation.jpg”) -352px -40px no-repeat; }

Standardmäßig soll die „erste Zeile“ des Bildes angezeigt werden. Das erreichen wir, indem wir das ganze Bild nehmen, aber nur 490*40 Pixel anzeigen (Zeilen 2-6). Wir blenden die spans aus (Zeile 10), ändern noch das Verhalten der Liste, damit die einzelnen Punkte nicht untereinander, sondern nebeneinander erscheinend (Zeilen 19-21). Wir definieren die Breite der einzelnen Listenelemente, und spezifizieren zum Schluss noch den Hover-Effekt, der einen anderen Ausschnitt anzeigen soll.

Es gibt auch Online CSS Sprite Generatoren, mit deren Hilfe es einfach ist, viele einzelne Bilder zu einem großen Bild zusammenzufassen, und dann die entsprechenden Koordinaten zu erhalten. Schaut euch einfach die folgenden Webseiten an:

http://www.csssprites.com

http://spritegen.website-performance.org

Written by Michael Kliewe

September 3rd, 2009 at 1:09 am

Optimierung meines Blogs

with 2 comments

SEO ist in aller Munde. Es gibt Millionen von SEO-Experten, die einen „100%-ig auf Platz 1 bei Google“ bringen können. Natürlich für viel Geld, und mit komischen, teils verbotenen Methoden.

Ich verlasse mich da lieber auf die kleinen Tipps und Tricks, die man so liest, und die auch Sinn machen. Auch Google gibt Webmastern Tipps, um ihre Seiten gut indizierbar zu machen, und so einen guten Pagerank zu erhalten. Interessante Hintergrund-Informationen gibt es zB bei Google’s Webmaster Tools.

Ich möchte hier keine riesen Sammlung eröffnen, sondern nur das WordPress-Plugin „All in One SEO Pack“ vorstellen. Dieses Plugin hilft dabei, auf jeder Seite unterschiedliche und vor allem passende Keywords und Descriptions setzen zu lassen (automatisch extrahiert aus dem Artikel-Text). Auch den Titel kann man auf jeder Seite anpassen lassen. Des weiteren unterstützt es die Möglichkeit, doppelte Inhalte unter verschiedenen URLs zu vermeiden mit dem „canonical“-Tag.

Damit sind die wichtigsten Dinge erstmal abgedeckt. Alle anderen Meta-Tags sind heutzutage relativ unwichtig geworden, jedenfalls liest man das oft.

Schaut es euch selbst an, ich finde es sehr hilfreich, und werde es auch vorerst dabei belassen.

So sehen die Optionen aus:

seo

Written by Michael Kliewe

August 31st, 2009 at 7:46 pm