Lange Wörter machen auf Webseiten häufig Probleme, weil die Silben standardmäßig nicht vom Browser getrennt werden. Dadurch entstehen entweder Zeilenumbrüche mit sehr großen „Lücken“ oder das lange Wort wird einfach über die Container-Begrenzung hinaus geschrieben. Heute möchte ich euch einige einige Möglichkeiten aufzeigen, wie man trotzdem eine Silbentrennung realisieren kann.

Via HTML

Ich muss gestehen, dass auch ich erst kürzlich über den bedingten Zeilenumbruch mittels HTML-Befehl “SHY” gestoßen bin.

Das ist ein SUPER­LANGESWORT

Dieses besagt, dass der Browser die Möglichkeit hat, das Wort bei Bedarf an der mit shy markierten Stelle umzubrechen. Der Browser wird an der betreffenden Stelle den ganz normalen Trennstrich einfügen. Im Netz habe ich ein paar Experimente gefunden, die besagen, dass Google z.b.

key­word

als keyword erkennt, allerdings konnte ich keine konkrete Aussage von Google selbst finden. Bei den anderen großen Suchmaschinen ist es genauso. Einige kleine Suchmaschinen haben aber trotzdem möglicherweise Probleme mit diesem eher selten vorkommenden Befehl.

Vorteile

• kinderleichter Einbau an jeder beliebigen Stelle durch den Nutzer
• keine Gefahr der automatisierten Falschtrennung

Nachteile

• Jede mögliche Trennung muss manuell im Quelltext eingetragen werden => großer Arbeitsaufwand
• nicht alle Browser unterstützen shy

Via JavaScript

Ich habe die hyphenator-JavaScript-Klasse getestet und muss sagen, dass ich begeistert bin! Um die hyphenator-JavaScript-Klasse zu verwenden müssen die JS-Dateien hochgeladen werden und anschließend folgender Code im HEAD-Bereich eingefügt werden:

        <script src="Hyphenator.js" type="text/javascript"></script>
        <script type="text/javascript">
        	Hyphenator.config({
        		displaytogglebox : true,
        		minwordlength : 4
        	});
        	Hyphenator.run();
        </script>

Danach kann man jeden beliebigen Text zur Silbentrennung aktivieren, indem man den Text in einen Container mit der Klasse “hyphenate”. Über den Parameter lang kann man die Sprache des Textes auswählen. Dadurch ist auch möglich Texte aus verschiedenen Sprachen auf einer Seite zu verwenden.

<p class="hyphenate" lang="de">SEHRLANGESWORTDASUNBEDINGTGETRENNTWERDENMUSS</p>

Vorteile

• automatische Worttrennung (es ist kein Eingriff im Text notwendig)
• es werden viele Sprachen unterstützt (jede Sprache hat einen anderen Aufbau bei Worttrennungen)
• der Text steht im normalen Klartext im HTML-Code, d.h. auf Google & Co hat diese Variante keine Auswirkungen

Nachteil

• aktives JavaScript ist für das Feature der Silbentrennung notwendig (falls JS deaktiviert ist, wird der Text normal dargestellt)
• es sind zusätzliche JS-Dateien notwendig
  • 1 Klassendatei (unkomprimiert: 65Kb)
  • 1 Datei pro verwendeter Sprache (z.B. deutsch: rund 80Kb)
• Falls Fehler bei der Trennung auftreten (ich konnte keine Fehler finden), ist ein manueller Eingriff nur in Verbindung mit einem Eingriff in die umfangreiche JS-Klasse möglich

1. JavaScript und CSS komprimnieren
2. JavaScript und CSS cachen

Zusätzliche Optimierung für JavaScript und CSS finden Sie in einem früheren Artikel.

Javascript- und CSS-Dateien komprimieren

Im Gegensatz zu Bildern sind CSS und JavaScript Texte, die mit sehr hoher Kompressionsrate (70% sind durchaus üblich) komprimiert werden können. Alle modernen Browser können komprimierte Webinhalte dekomprimieren und anzeigen. Weil unsere Webseite allerdings auch von alten Browsern angezeigt werden soll müssen wir für unser Cache-System 2 verschiedene Varianten vorsehen: eine komprimierte und eine unkomprimierte Variante. Die einfachste Art ein PHP(-CSS)-Script zu komprimieren ist den folgenden Code vor die erste Ausgabe des CSS-Scripts zu schreiben:

ob_start('ob_gzhandler',xxx);

das xxx kann eine Zahl zwischen 1 und 9 sein, die angibt wie stark komprimiert wird. Wird keine Zahl angegeben so wird 6 als Standard verwendet. Beachte: Die Serverbelastung steigt bei Zahlen größer 6 extrem an, weshalb man sich den Einsatz genau überlegen sollte. Wer ein Cache-System verwendet und die Komprimierung z.B. nur einmal am Tag durchführt kann bedenkenlos die maximale Kompressionsstufe 9 verwenden. Wem die Komprimierung mittels PHP zu aufwendig ist kann das ganze alternativ auch per .htaccess regeln (Im folgenden Beispiel werden alle Dateien, die die Endung .css haben komprimiert übertragen (soweit der Browser des Nutzers das unterstützt).

<Files *.css>
SetOutputFilter DEFLATE   
</Files>

Kleiner Nachteil: Weil hier wird kein Cache-System verwendet wird muss der Server die Komprimierung für jeden Besucher neu durchführen.

JavaScript und CSS Cachen

Beim Cachen wird dem Browser des Nutzers mitgeteilt, dass die gerade heruntergeladene Datei noch eine gewisse Zeit X aktuell bleibt. Wird die Datei innerhalb dieser Zeit erneut gebraucht, so wird sie nicht aus dem Internet heruntergeladen, sondern wird direkt aus dem Speicher des Nutzers geladen. Am leichtesten lässt sich das ganze mit dem fertigen PHP-Script QuickCache realisieren.

Für ein optimales Caching werden meiner Meinung nach 4 Versionen der CSS-Datei gebraucht. Je eine Version für IE und die sonstigen Browser (je nach Design mehr oder weniger, je nach Anzahl der Browserweichen). Und von jeder dieser Versionen wird jeweils eine komprimierte und eine unkomprimierte Version benötigt. Dadurch kann der Server genau die richtige Version ausliefern, ohne erst den Prozessor für eine mögliche Kompression anwerfen zu müssen.

Wer die Cache-Header manuell setzen möchte kann folgenden PHP-Code verwenden.

   header ("cache-control: must-revalidate");   
   $offset = 60 * 60 * 24 * 31; //1 Monat  
   header ('expires: '.gmdate ('D, d M Y H:i:s', time() + $offset).' GMT');

#thing {
   padding: 5px;
   border-radius: 10px;
 
  /* HOVER OFF */
   -webkit-transition: padding 4s;
}
 
#thing:hover {
   padding: 25px;
   border-radius: 20px;
 
  /* HOVER ON */
   -webkit-transition: border-radius 4s;
}

Wenn man die Maus über das Feld bewegt, überschreibt die transition den regulären Zustand. Wenn die Maus das Feld wieder verlässt, wird der reguläre Zustand wieder hergestellt, indem die im Originalzustand definierte Animation ausgeführt wird. Der Einsatz von CSS3 hat gegenüber den JavaScript bzw. Flashlösungen einige Vorteile:

• es wird kein JavaScript benötigt
• es werden keine Frameworks benötigt
• die Animationen stören keine Skripte
• kein Flash wird benötigt
• weniger Speicherplatz verbrauch => geringere Übertragunsgzeit übder das Internet

Ein Kriterium für die Qualität einer Webseite ist die Ladegeschwindigkeit. Diese ist u.a. von der zu übertragenden Datenmenge abhängig. Um diese möglichst gering zu halten gibt es die Möglichkeit Dreiecke mit reinem CSS darstellen zu können. Dadurch können oft Teile des Templates durch reines CSS ersetzt werden, wodurch man weniger speicherintenisve Bilder braucht. Weil es nur sehr begrenze Dokumentation dazu im Netz gibt, möchte ich euch die Grundlagen vorstellen. Eine Demonstration ist neben diesem Abschnitt zu sehen.

.css-dreieck {
border-color: red green blue orange;
border-style:solid;
border-width:25px;
width:0;
height:0;
}

Durch das Anpassen der border-width kann man die Dreiecke in beliebige Form bringen. Dadurch ist der Kreativität keine Grenze mehr gesetzt. Es können auch mehrere Dreiecke zu komplexen Formen zusammengesetzt werden. Wenn man nur einzelne Dreiecke haben möchte so kann man die
übrigen Dreiecke ausblenden, indem man Ihnen die Farbe “transparent” zuweist (Hinweis IE6).

.css-dreieck {
  border-color: red green blue orange;
  border-style:solid;
  border-width:30px 10px 20px 30px;
  width:0;
  height:0;
}

Durch Anpassen des border-style können schöne, auf den ersten Blick unerwartete Formen erzeugt werden:

border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

IE6

Im IE6 funktioniert diese Technik nicht, weil er die Farbe „Transparent“ nicht kennt. Es gibt aber eine ebenso einfache wie geniale Lösung. Man weist den auszublendenden Dreiecken eine Farbe zu, die sonst nirgends verwendet wird und blendet diese anschließend über die CSS-Eigenschaft Chroma komplett aus.

.css_dreieck{
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);
}

Praktisches Beispiel mit CSS Dreiecken

Um den Nutzen zu demonstrieren folgt eine Sprechblase, die normalerweise mit hilfe von 3 Bildern erstellt wird: jeweils ein Bild für den oberen und unteren Bereich der Sprechblase, sowie ein Bild für den mittleren Teil, der je nach Textmenge mehrfach nach unten wiederholt werden würde. In diesem Beispiel, dass in allen Browsern funktioniert, wird ausschließlich CSS eingesetzt. Das hat neben der geringen Datenmenge auch andere Vorteile:

• Farben können durch eine einzige Zeile im CSS angepasst werden
• Die Breite der Box kann schnell beliebig angepasst werden

HTML

<div>
 Toller Text!<br>
 mit nützlichen Infos
 <div></div>
 <div></div>
</div>

CSS

.sprechblase {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}
.sprechblase_dunkles_freieck {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  _bottom:-66px;
  left:30px;
}
.sprechblase_helles_freieck {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  _bottom:-63px;
  left:30px; 
}

Inhalt

1. Was ist eine Blognische
2. Kriterien für eine gute Nische
   • In meiner Keywordliste stehen mindestens 250 Begriffe
   • Es gibt ein Mindestsuchvolumen über Suchmaschinen
   • Es gibt wenige schwache SEM-Mitbewerber (Adwords & Co)
   • Es gibt wenige Mitbewerber in der organischen Suche
   • Die Konkurrenten in der Organischen Suche haben schlecht optimierte Webseiten
   • Ich kann zum Nischenthema regelmäßig Beiträge verfassen (ich habe Ahnung vom Thema)
   • Ich kann ein Produkt oder eine Dienstleistung aus dem Nischenthema verkaufen

Was ist eine Blognische

Für mich ist eine Nische ein stark eingegrenztes Thema, in dem nur sehr wenige/schwache Konkurrenten unterwegs sind. D.h. das Nischenthema ist so speziell, dass es sich für große Firmen nicht lohnt dieses Abzudecken und andererseits groß genug ist, damit man damit ordentliche Gewinne erwirtschaften kann.

Kriterien für eine gute Blognische

In den nächsten Abschnitten werden die Kriterien aufgezählt, die für mich wichtig sind, wenn ich mich auf die Suche nach einer Nische mache. Falls Ihr andere Kriterien habt, schreibt das bitte in die Kommentare. Sobald ich ein Kriterium mit “nein” beantworten muss verwerfe ich das Thema und suche mir ein Neues.

Mindestgröße meiner Keywordliste

Die Keywordliste ist die Liste aller möglichen Nischenthemen, die für mich in Betracht kommen. Diese ist von fundamentaler Bedeutung, weil sämtliche folgenden Schritte immer wieder auf dieser Liste aufbauen. Eine schlechte Keywordliste ist ein Garant für ein erfolgloses Projekt. Um sicher zu gehen, dass ich mir lange genug Gedanken über andere mögliche Themen gemacht habe setze ich mir eine unter Schranke von 250 Begriffen. Je nach Thema können auch mehr oder weniger sinnvoll sein! Solange diese Anzahl nicht erreicht ist, suche ich weiter nach Artverwandten Begriffen und Synonymen.

Mindestsuchvolumen über Suchmaschinen

Je mehr potentielle Kunden existieren, desto erfolgreicher kann ein Nischenblog werden – logisch! Doch wie viele Besucher sind konkret notwendig damit sich der Betrieb eines Blogs langfristig lohnt? Erstellt man einen Blog über Luxusschiffe, bei denen man eine Provision pro Verkauf bekommt, könnten sich bereits 10 Besucher / Monat lohnen. Es gibt natürlich auch Themen, bei denen die Provisionen bzw. Erträge pro Besucher sehr gering sind. Bei diesen Themen sind entsprechend mehr Besucher notwendig. Für mich hat sich eine Zahl von 5.000 Suchanfragen im Google-Keywordtool als sinnvoll herausgestellt.

Wenige schwache SEM – Mitbewerber

Die meisten Besucher werden über SEO bzw. SEM auf unseren Nischenblog finden. Weil wir alle Keywords, bei denen wir mit SEO keine gute Platzierung erreichen mit SEM bewerben sollten die Preise für SEM möglichst gering sein. In den meisten Fällen sind preise bis max. 50ct akzeptabel. Diese Preishürde betrifft vor allem das Hauptkeyword, weil dieses i.a. die meisten Besucher erwarten lässt und deshalb am teuersten ist. Den späteren Klickpreis kann man bei Google Adwords sehen.

Wenige Mitbewerber in der organischen Suche

Die günstigsten Besucher sind die, für die man nichts bezahlen muss. Eine erfolgreiche Suchmaschinenoptimierung ist besonders wichtig, weil man so die meisten “kostenlosen Besucher” kommt. Die Suchmaschinenoptimierung selber ist umso aufwendiger/teurer je mehr starke Konkurrenten in der gewünschten Nische tätig sind. Auf vielen Seiten, die sich auch mit dem Nischenfinden beschäftigen habe ich Zahlen gefunden, die besagen, dass maximal 100.000 bis 500.000 Ergebnisse bei einer Googlesuche in der Nische vorhanden sein sollten, damit sich ein neuer Blog lohnt. Meiner Meinung nach kann man das wesentlich genauer festlegen, indem man in die Google-Suche folgendes eingibt (ohne Anführungsstriche): “intitle:keyword” bzw. wenn der Nischenname aus mehreren Worten besteht: “intitle:keyword1 intitle:keyword2″ uws. Dadurch erhält man die Anzahl der Seiten, bei denen unser Wunschnischenthema im Meta-Title steht. Der Metatitle ist das Hauptrankingkriterium (onpage). Dadurch erfährt man genau wie wie viele echte Konkurrenten vorhanden sind und filtert die “Opferseiten”, d.h. die Seiten, die eh keinen echte Gegner darstellen, aus.
Meiner Meinung nach sollte man das Thema vergessen, wenn es mehr als 500 Konkurrenten gibt – außer man kennt sich mit SEO wirklich aus.

Schlecht optimierte Konkurrenzseiten

Sobald man die echten Konkurrenten ermittelt hat untersucht man die Konkurrenzseiten auf ihre jeweiligen SEO – Werte (Onpage – Optimierung und Backlinks). Ist man der Meinung, dass man mit angemessenen Mitteln nicht gegen diese Konkurrenz ankommt, so sollte man sich ein anderes Nischenthema suchen.
Ggf. kann man auch ein ganzes Blognetzwerk erstellen und so auch scheinbar übermächtige Gegner bezwingen, indem man für jedes Unterthema der Nische einen eigenen Blog erstellt und diese geschickt untereinander verlinkt.

Kann ich Regelmäßig Beiträge verfassen?

Das Nischenthema sollte den eigenen Interessen entsprechen, d.h. man sollte sich in dem Bereich, über den man Bloggen möchte, sehr gut auskennen und sich sicher sein, dass man immer was zu erzähle hat. Weil man sich dabei die eigenen Fähigkeiten leicht schönredet hat es sich bewährt, wenn man in der Nischenthema-finden-Phase eine Liste mit 50 Themen macht, über die man im Blog berichten möchte. Dazu zählen nicht: Rezensionen, Werbeartikel für Andere, Administratives (ála ich habe heute den Blog geupdated) usw. Wenn man die Liste schnell füllt kann man sich sicher sein, dass einem die Themen nicht so schnell ausgehen und die Blognische genügend “Tiefgang” hat.

Produkt oder eine Dienstleistung verkaufen

Ein Blog wird nur dann wirtschaftlich funktionieren, wenn das Thema den Verkauf von Produkten und Dienstleistungen grundsätzlich zulässt und ob die potentiellen Kunden grundsätzlich bereit sind dafür Geld auszugeben. Als nächstes muss man sich Fragen, ob man das Produkt/Dienstleistung selber anbieten kann (optimal) oder ob man die Vermarktung auf Provisionsbasis macht. Die Provisionsbasis hat neben dem Vorteil, dass man sich um nichts kümmern muss einige Nachteile:

• was passiert wenn der, der die Provision bezahlt (Merchant) aus welchen Gründen auch immer nicht mehr existiert?
• i.a. geringerer Verdienst, als wenn man selber etwas verkauft
• meistens gibt es Einschränkungen bei der Bewerbung der eigenen Seite (z.B. Verbot von SEM zum Keyword)
• usw.

Weiterführende Links

• Google-Keywordtool
• Google-Adwords

Warum stört es mich, wenn andere meine Webseite kopieren?

Ganz einfach: zum einen verhindert es korrekte Statistiken, weil für jeden Artikel ein angeblicher Besucher hinzukommt. Zum anderen belastet es meinen Server / Traffic, was zum einen Geld kostet und zum anderen die Ladezeiten der anderer echten Besucher verlängert. Der dritte Grund liegt im Contentdiebstahl, d.h. Diebe könnten versuchen die Inhalte meiner Seite zu extrahieren und zukünftig auf anderen Seiten als jeweils Eigene
auszugeben.

So werde ich das Problem lösen

Ich würde in einer Datenbank die IPs der Besucher zwischenspeichern und wenn eine IP mehr als XX Seiten pro Minute oder XX Seiten pro Tag runterläd wird der Zugriff mit einer Fehlermeldung verweigert.
Ich nehme die IP und nicht die Session oder irgendein anderen Cookie, weil Sessions (Cookies) einfach vom Nutzer / Kopierprogramm deaktiviert werden können. Natürlich ist es auch möglich, dass mehrere Menschen die selbe IP verwenden, allerdings ist die Wahrscheinlichkeit, dass sich 2 verschiedene Menschen zeitgleich (innerhalb der selben Minute) auf der selben Seite bewegen sehr gering. Selbst wenn dieser unwahrscheinliche Fall eintritt, so müssten die Beiden jeweils massiv viele Seiten anklicken um den Filter zu aktivieren.

Die Datenbank

Als Datenbank verwende ich eine einfache einspaltige Relation:

CREATE TABLE `sec_antikopie` (
`ip` INT NOT NULL ,
`zeit` INT UNSIGNED NOT NULL ,
INDEX ( `ip` )
) ENGINE = MYISAM ;

Die IPs speicher ich als INT, weil IPs auf diese Art besonders effektiv gespeichert und verarbeitet werden können. Hier finden Sie genauere Informationen um IP´s effizient zu speichern. Die Zeit speichere ich als Time-Stamp.

Das Script

Das folgende Script sollte möglichst weit oben im Quellcode eingebaut werden. Falls die Seite standardmäßig eine Verbindung zur Datenbank herstellt, so sollte das Script direkt nach der Datenbankverbindung eingefügt werden.

<?php
mysql_connect('xxx','xxx',''); //Datenbankverbindung
mysql_select_db('xxx');
 
//Settings Start
$max_erlaubte_aufrufe_minute=10;
$max_erlaubte_aufrufe_tag=50;
//Settings Ende
 
$aufrufe=mysql_fetch_assoc(mysql_query('SELECT (select count(*) FROM `sec_antikopie` WHERE ip='.ip2long($_SERVER['REMOTE_ADDR']).' and zeit>'.(time()-60).') as zahl_minute,(select count(*) FROM `sec_antikopie` WHERE ip='.ip2long($_SERVER['REMOTE_ADDR']).' and zeit>'.(time()-60*60*24).') as zahl_tag'));
 
if (($aufrufe['zahl_minute']>$max_erlaubte_aufrufe_minute) || ($aufrufe['zahl_tag']>$max_erlaubte_aufrufe_tag))
  {
  die('Sie haben zu viele Aufrufe auf diese Seite gemacht');
  }
 
mysql_query('insert low_priority into sec_antikopie(ip,zeit) values ('.ip2long($_SERVER['REMOTE_ADDR']).','.time().')');
 
if (rand(1,1000)==10) //Jeder tausendste
  {
  mysql_query('delete from sec_antikopie where zeit <'.(time()-24*60*60));
  }
?>

Das Script baut zuerst eine Verbindung zur Datenbank auf. Falls diese bereits durch die Seite besteht muss man natürlich keine zweite Verbindung aufbauen und kann die ersten 2 Zeilen löschen. Die nächsten zwei Zeilen enthalten die Einstellungen: ich lege fest, dass jede IP maximal 10 Aufrufe pro Minute und maximal 50 Aufrufe pro Tag.
Als nächstes wird aus der Datenbank die Anzahl der Seitenaufrufe der letzten Minute und die Anzahl der heutigen Seitenaufrufe ermittelt. Falls diese die Grenzwerte aus den Einstellungen überschreiten wird der weitere Seitenaufbau abgebrochen. Die nächste Zeile fügt eine neue Eintrag in die Datenbank ein mit IP und Uhrzeit ein. Das “low_priority” signalisiert dem Datenbanksystem, dass es sich um eine “unwichtige” Anfrage handelt, die dann ausgeführt werden soll, wenn das System gerade nichts zu tun hat. Sämtliche weitere Nachteile von low_priority (z.B. Datenverlust bei Serverzusammenbruch) haben keinen funktionalen Einfluss auf dieses Script und werden deshalb hier nicht weiter besprochen.
Der letzte Abschnitt wird durchschnittlich bei jedem tausendsten Besucher durchgeführt. Es werden alle veralteten Einträge aus der Datenbank gelöscht. Dieser Schritt verhindert, dass die Datenbank “Datenleichen” ansammelt und mit der Zeit vollläuft. Je nach Geschmack kann man das Löschen auch in einen Cronjob auslagern, wodurch man den “ungünstigen Zufall” (das das Script z.B. eine million mal nicht die Zufallszahl 10 wählt) verhindert.

Zusammenfassung

Sie sind jetzt in der Lage Ihre Webseite gegen automatisiertes Kopieren zu schützen. Sie wissen wie die Datenbank zu erstellen ist, wie der Code eingebaut werden muss und was er bewirkt. Das Script geht äußerst schonend mit den Serverressourcen um und kann deshalb auch auf stark frequentierten Seiten eingesetzt werden.

1. Browserabhängiges CSS
2. JavaScript- und CSS-Dateien zusammenführen
3. JavaScript- und CSS minimieren
4. optimaler Ort/Reihenfolge zum Referenzieren von JavaScript und CSS

Browserabhängiges CSS

Dass CSS nicht von allen Browsern einheitlich interpretiert wird ist bekannt. Speziell der IE6 macht häufig was er will. Deshalb setzen Webentwickler häufig sogenannte Browserweichen ein.

#nav {left: 157px;}
body > #nav {left: 117px;}

Die obere Regel wird von allen Browsern verwendet. Die zweite Regel wird von allen Browsern außer dem IE verwendet, weil dieser den Selektor: > nicht kennt. Deshalb werden alle “nicht IE-Browser” die zweite Regel, und der IE die erste Regel verwenden. Diese gängige Praxis ist aus Performance-sicht nicht optimal, weil zum einen die CSS-Datei durch “Doppelregeln” unnötig groß wird und zum anderen mehr CSS-Regeln vom Browser verarbeitet werden müssen.
Um das Problem zu lösen wandel ich meine CSS-Datei in eine PHP-Datei um¹ und kann dadurch PHP innerhalb des CSS verwenden. Der folgende Code-Schnipsel löst das Problem von oben:

<?php
if (strstr($_SERVER['HTTP_USER_AGENT'],'MSIE'))
  {
  echo '#nav {left: 157px;}';
  }
else
  {
  echo '#nav {left: 117px;}';
  }
?>

JavaScript- und CSS-Dateien zusammenführen

Jede Datei, die zum Anzeigen einer Webseite notwendig ist muss (vereinfacht gesagt²) einzeln vom Server angefordert werden. Ziel dieser Optimierung ist die Reduzierung der HTTP-Requests, d.h. die Anzahl der Anfragen an den Server zu minimieren. So sieht der HEAD-Bereich einer typischerweisen Webseite aus:

<head>
<link rel='stylesheet' href='file_1.css' type='text/css' />
<link rel='stylesheet' href='file_2.css' type='text/css' />
<link rel='stylesheet' href='file_n.css' type='text/css' />
</head>

Es werden also N einzelne CSS-Dateien für die Darstellung benötigt. Der folgende PHP-Code¹ kann in eine CSS-Sammel-Datei geschrieben werden. Dadurch werden die Inhalte aller CSS-Dateien hintereinander in die neue CSS-Sammel-Datei geschrieben.

<?php
header('content-type: text/css');
echo file_get_contents('file_1.css');
echo file_get_contents('file_2.css');
.
.
echo file_get_contents('file_n.css');
?>

Diese CSS-Sammel-Datei wird ganz normal im HTML referenziert:

<head>
<link rel='stylesheet' href='CSS-Sammel-Datei.php' type='text/css' />
</head>

Die zu übertragende Datenmenge hat sich dabei nicht verändert. Es verringert sich nur die Anzahl der HTTP-Requests, wodurch die Seite wesentlich schneller läd. Kleiner Nebeneffekt: Je länger eine Datei ist, desto effizienter funktionert die Komprimierung. In einigen Sonderfällen sollte man auf die Zusammenführung verzichten: wird auf einer Unterseite nur eine sehr kleine CSS-Datei benötigt und auf einer anderen Unterseite mehrere sehr große, so bietet es sich an die CSS-Dateien nicht zusammenzuführen.
JavaScript-Dateien lassen sich genauso zusammenfügen. Dabei muss nur der Content-Type von “text/css” in “text/javascript” geändert werden.

JavaScript- und CSS minimieren

Bei dieser Optimierung geht es darum Zeichen aus der JavaScript bzw. CSS-Datei zu löschen, die für die funktionalität ohne Bedeutung sind. Im Internet existieren bereits etliche kostenlose CSS- und JavaScript minifier (z.B. CSSTidy oder cssdrive.com), die vollautomatisch ihre Arbeit erledigen. Die Qualität (Kompressionsrate) ist dabei meist sehr gut. Wer sein CSS / JavaScript allerdings häufig ändert wünscht sich vermutlich eine etwas komfortablere Variante. Der folgende PHP-Code komprimiert eine CSS-Datei zur Laufzeit (“on the fly”):

  ob_start('compress');  
 
  function compress($data)
    {
    $data = str_replace(array("\n","\r","\t",": "),array("","","",":"),$data);
    $data = str_replace("'","",$data);
    $data = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $data);
    $data = preg_replace("/;( *)}( *)/i","}",$data);
    $data = preg_replace("/ *{ */i","{",$data);
    $data = preg_replace("/; */i",";",$data);
    $data = preg_replace("/ *, */i",",",$data);
    return $data
    }

Da der PHP-Befehl preg_replace wie jeder Befehl, der reguläre Ausdrücke verwendet, äußerst langsam ist, ist ein Cachesystem für die Ergebnisdatei pflicht!
Für JavaScript gibt es ähnliche Codeschnipsel im Internet. Bei meinen Tests gab es allerdings kein Script, dass alle von mir getesten JavaScripts fehlerfrei verkleinern konnte. Deshalb möchte ich auch keine Empfehlung aussprechen – Probiert einfach einige aus!

Optimaler Ort und Reihenfolge zum Referenzieren von JavaScript und CSS

Es gibt eine einfache Faustregel: CSS so weit oben wie möglich im Quellcode stehen – ideal wenn alles was mit CSS zutun hat im head-Bereich steht. Dadurch kann der Browser bereits mit dem Seitenaufbau beginnen, obwohl noch nicht die ganze Seite heruntergeladen wurde.
Bei JavaScript ist es ganau andersrum: JavaScript sollte soweit wie möglich unten im Quellcode stehen – idealerweise kurz vor dem . Die Ursache dafür ist, dass JavaScript den HTML-Baum ändern kann und das natürlich nur Sinn macht, wenn der HTML-Baum auch vollständig bekannt ist.
Sollten in head-bereich mehrere CSS- und JavaScript-Dateien vorhanden sein, die nicht zusammengeführt werden können, so sollten diese streng nach typ sortiert werden: erst alle CSS-Dateien und dann alle JavaScript-Dateien. Der Grund hierfür liegt darin, dass der Browser gleiche Dateitypen parallel downloaden kann und beim wechsel von JavaScript und CSS jeweils warten muss, bis die erste Datei fertig runtergeladen wurde.
Das HTML-Attribut defer gibt dem Browser einen Hinweis, dass das JavaScript keine Inhalte in die Seite einfügt. Dadurch können nachfolgende CSS-Dateien parallel zur JavaScript-Datei heruntergeladen werden. Verfügbar ist das HTML-Attribut defer breits im Internet Explorer und seit Version 3.1 auch im Firefox.

<script defer="defer" type="text/javascript" src="" />

Dieser Artikel wurde von der iCrossing GmbH gesponsort (im Auftrag von Kaspersky Lab)

Kaspersky Anti-Virus 2011 Limited Edition

Dieses Blog richtet sich primär an Webentwickler. Webentwickler bewegen sich traditionell sehr viel im Internet und sind damit den Internet-Gefahren besonders stark ausgesetzt. Deshalb sollte jeder Webentwickler eine aktuelles Anti-Viren-Programm installiert haben.

Die Anti-Viren-Software „Kaspersky Anti-Virus“ hilft Ihnen, Viren, Würmer, Trojaner, Spyware, Rootkits und andere Malware auf Ihrem Computer aufzuspüren und zu vernichten. Wie jede (mir bekannte) Virensoftware bietet sie einen Echtzeitschutz, der völlig unauffällig im Hintergrund läuft und vor den oben genannten Gefahren schützt. Im Gegensatz zu anderen Anti-Viren-Programmen wird das System dabei nicht übermäßig belastet.
Für Webentwickler besonders wichtig ist das automatische Scannen von Webseiten und E-Mails. Bei Emails werden alle möglichen Konten (POP3, IMAP für eingehenden sowie SMTP für ausgehenden Nachrichten) geprüft bevor die Email den eigentlichen Weg auf die Festplatte nehmen kann. Sollten Schädlinge gefunden werden, so können diese wenigen Klicks gelöscht werden. Es können sogar Teile der durch einen Virus beschädigten Dateien wiederhergestellt werden.
Falls es doch mal zu einer schlimmen Infektion kommt, kann man sich mithilfe einer enthaltenen Notfall-CD der Schadsoftware erwehren.

Gewinnspiel

Um an der Verlosung teilzunehmen habt Ihr mehrere Möglichkeiten:

1. einen Artikel in eurem Blog über ein beliebiges Thema von Technologie4web.de schreiben und dabei einen Link auf den entsprechenden Artkel setzen. Bitte setzt die Trackback-Url dieses Artikels, damit ich euern Artikel als Teilnahmewunsch werten kann (falls euer Blogsystem kein Trackback unterstützt: schickt mir einefach eine email)!
2. ihr schreibt einen Kommentar in einem beliebigen Blog, der ein Thema behandelt, dass es ebenfalls auf technologie4web.de gibt und verlinkt unseren Artikel.
3. ihr habt eine viel bessere Idee und erzählt mir per email davon

Der Gewinner wird per Los aus allen Teilnehmern am 6.12.2010 ermittelt und per email benachrichtigt.

Ziele des Blognetzwerks

Ein Blognetzwerk kann helfen die folgenden vier Ziele der Hauptseite zu erreichen:

1. Index-Tuning

Sollte es auf der Hauptseite eine neue Unterseite geben, die möglichst schnell in die Serps aufgenommen werden soll, so ist es hilfreich einige Links im Blognetzwerk auf diese verweisen zu lassen. Da wir hier von einem WordPress-Blognetzwerk ausgehen werden neue Beiträge durch das Anpingen von Pingdiensten sehr zeitnah in die Suchmaschinen aufgenommen. Dadurch werden auch die verlinkten Seiten sehr schnell von den Suchmaschinen untersucht.

2. Backlinktuning

Jeder Link, der auf unsere Hauptseite verweist erhöht deren Ranking und damit die Besucherzahl und damit den Umsatz. Deshalb kann ein Blognetzwerk zum einen als direkten Linkgeber für die Hauptseite verwendet werden. Außerdem kann man äußerst effektiv Linktausch betreiben (z.B. ich gebe einen Link für deine Seite aus meinem Blognetzwerk und deine Seite verweist dafür auf meine Hauptseite).

3. Keywordtuning

Das Ranking der verlinkten Seite verbessert sich vor allem für die Worte, die im Anchor-Teil des Links stehen.

<a href="linkziel">anchor</a>

Weil das Blognetzwerk uns gehört können wir die Anchortexte beliebig selber festlegen. Dadurch können wir sehr genau steuern für welche Keywords unsere Hauptseite besonders optimiert werden soll.

4. Nischen beherrschen

Jeder Blog des Netzwerks kann verwendet werden um eine ganz spezielle Nische abzudecken. Verkauft man auf der Hauptseite beispielsweise Fahrräder, so könnte es in einen Blog ausschießlich um Fahrradbremsen gehen. So könnte man die “Nische” Fahrradbremse leicht beherrschen. Je nachdem wie viele Blogs man im Blognetzwerk hat könnte man auch eine noch feinere Nische finden (z.B. Fahrradbremsen für Down-Hill-Bikes).

Wieviele Blogs sollte ein Blognetzwerk umfassen

Je mehr, desto besser: Die Anzahl der Blogs im Blognetzwerk ist natürlich vom von den persönlichen Möglichkeiten (Zeit / Geld usw.) des Blognetzwerk-Besitzers abhängig, weil ein Blog von immer neuen Inhalten lebt, die manuell eingepflegt werden müssen. Das ganze lohnt sich umso mehr je mehr Geld man mit der Hauptseite verdienen könnte, wenn es keine Konkurrenz geben würde. Durch das Blognetzwerk verbessert man das Ranking seine Hauptseite in den Suchmaschinen, wodurch immer weniger Menschen die Seiten der Konkurrenz besuchen. Ich schlage für den Anfang einfach mal 20 Blogs vor und lasse offen, ob man später noch mehr Blogs betreuen kann.
Das Hosting eines Blognetzwerks ist verhältnismäßig teuer, weil man immer versuchen sollte die Blogs auf möglichst viele Class-C Netzwerke zu verteilen. Deshalb kann man nicht einfach einen Server mieten und zig Domains auf diesen verweise lassen. Vielmehr muss man entweder bei einem SEO-Hoster hosten oder manuell zig hosting-pakete bei verschiedenen Anbietern bestellen.

Class-C Netzwerk für Blognetzwerke

Suchmaschinen versuchen anhand der IP-Adresse des Servers zu ermitteln, ob verschiedene Webprojekte zusammengehören und die Links “aus dem selben Haus kommen”. Solche Links sind für Suchmaschinen nicht besonders wertvoll, weil sie nicht natürlich entstanden sind. Natürlich entstandene Links wurden gesetzt, weil die verlinkte Seite nützliche Informationen enthält, auf die die verlinkende Seite hinweisen möchte. Kommen die Links aber vom gleichen Besitzer, so ist davon auszugehen, dass sie nur wegen des gleichen Besitzers überhaupt gesetzt wurden.

Eine IP hat den typischen Aufbau: AAA.BBB.CCC.DDD. Sind 2 IPs im gleichen C-Classe-Netzwerk, so ist der Teil AAA.BBB.CCC. identisch.

Einige Domainanbieter (z.b. Godaddy) bieten eine anonyme Registrierung an. Dadurch können Suchmaschinen nicht erkennen, dass die Domains der selben Person gehören (Admin-C-popularity). Beachtet werden sollte allerdings unbedingt, dass der Webhoster verschiedene Nameserver verwendet, weil Suchmaschinen auch anhand der Nameserver zusammenghörige Domains identifizieren kann.

Beim Hosting gibt es die Möglichkeiten: dedicated class-c ips und shared class-c ips. In der Regel ist shared billiger, weil viele Webseiten auf der selben IP laufen. Ideal ist es, wenn nur die eigene Webseite auf einer IP läuft.

Domainregistrierung

Wie bei jeder SEO-Domain-Registrierung sollte man sich bereits vor der Registrierung über das Hauptkeyword der Seite im klaren sein und dieses im Domain-Namen verwenden (im Beispiel von oben z.B. “fahrrad-bremse-downhill.com”). Um wichtige Keywords für die Seite zu finden bietet sich wie immer das Google Traffc-Tool von Adwords an. Als nächstes sollte man beachten, dass man jeden Tag höchstens eine Domain registriert, damit Suschmaschinen nicht anhand des Registrierungsdatums erkennen können, das alle Domains am gleichen Tag entstanden sind. Hinweis: hier bieten sich ggf. auch wesentlich größere Zeitabstände als ein Tag an.

Blogs aufsetzen

WordPress Blogs lassen sich auch ohne Programmierkenntnisse innerhalb weniger Minuten installieren. Beachtet werden solllte, dass alle Blogs ein eigenes Theme (Design) und einen einzigartigen Titel verwenden. Kostenlose (SEO-)Wordpress-Designs gibt es massenhaft im Internet. Für Blogs, die als reine “Linkschleudern” eingesetzt werden sollen, sollte man ein Design verwenden, dass von Haus aus keine externen Links aufweist (z.B. zur Homepage des Designer). Hier kann man auch ein hässliches Design verwenden, solange es SEO-freundlich ist.
Als nächstes sollte man ein SEO-Plugin installieren, um so den eigenen Blog SEO-freundlicher zu gestallten.

Die Blognetzwerktechnik steht – was nun

Jetzt beginnt die eigentliche Arbeit: einzigartige Texte müssen her!

Am besten beobachtet man die Nachrichten aus dem entsprechenden Bereich un verfasst, wann immer es etwas interessantes gibt, einen Artikel zum Thema. Auf Content-Klau bzw. automatisierte Texte sollte man verzichten, weil Suchmaschinen doppelte Inhalte abstrafen.

Verlinkung im Blognetzwerk

Jetzt kommen wir zum wichtigsten Teil: Wie verlinke ich meine Blogs effektiv? Dazu gibt es einige grundlegende Regeln:

1. verlinke niemals Blogs des selben Class-C-Netzwerks
2. verlinke niemals Blogs reziprok, d.h. Blog A verlinkt B und Blog B verlinkt Blog A
3. Links zur Hauptseite (Seite, die Geld bringt) sind immer erlaubt

In der folgenden Grafik wird ein ideales beispielhaftes Blognetzwerk mit jeweils 3 Blogs in 4 Class-C-Netzen dargstellt:

Die blauen Kästen stellen ein Class-C-Netzwerk da. In jedem Class-C-Netzwerk gibt es eine gewisse Anzahl Blogs, die untereinander keine Verlinkung aufweisen. Die roten Pfeile symbolisieren externe Links. Für ein effektives Linknetzwerk sollte es stets mehr eingehende als ausgehende Links geben. Die Gelben Pfeile symbolisieren interne Links (also Links innerhalb des Blognetzwerks). Je mehr Class-C-Netzwerke es gibt, desto größer wird der Linkkreis und desto schwerer ist es für Suchmaschinen die Zusammengehörigkeit festzustellen. Es sollte nur die mit einem gelb Pfeil markierten internen Links geben, weil alle anderen Links den Suchmaschinen zeigen würde, dass es sich um zusammengehörige Projekte handelt.

Mögliche Datenbank-Daten-Typen

1. Datentyp Text: Braucht in MySQL genau 17 Byte (Textlänge + 2 Byte)
2. Datentyp VarChar(15): Braucht in MySQL genau 16 Byte (Textlänge + 1 Byte)
3. Datentyp Long: Braucht in MySQL genau 4 Byte

Wie man an dieser Auflistung sieht verbraucht der Datentyp Long mit Abstand am wenigsten Speicher, d.h. die Datenbank wird im Verhältnis zu den anderen Möglichkeiten wesentlich kleiner. Dieser Speichervorteil kann durch die Datenbank-Engine: Storage noch weiter verbessert werden. Ein weiterer Vorteil liegt darin, dass Mysql Zahlen wesentlich schneller durchsuchen kann als Text.

Wie kann man IPs in Long werte umwandeln?

Dafür gibt es zwei Möglichkeiten, die performancetechnisch identisch sind.

IP umwandeln mittels PHP

PHP bietet die netten Funktionen IP2LONG und LONG2IP. Damit lassen sich höchst komfortabel IPs in Long werte und Long-Werte in IP ‘s umwandeln. Bitte beachte: Die entstehenden Long-Werte können auch negative sein!

IP umwandeln mittels Datenbank

Alle (von mir untersuchten) Datenbanksysteme bietet eine eigene Implementierung der Funktionen. In Mysql heißen diese beispielsweise INET_ATON bzw. INET_NTOA.

Mein Testscript

Mein Testscript funktioniert so:

1. Test-Tabelle erstellen (in der jeweils die zu testenden Datentypen hinterlegt sind)
2. Test-Tabelle mit zufälligen IPs auffüllen
3. jeweils 500 Anfragen an jede Spalte der Test-Tabelle
4. Rückgabe der Resultate

$db_server = "localhost";
$db_name = "test";
$db_user = "root";
$db_passwort = "";
 
//Ab hier nichts mehr ändern!
 
$db = mysql_connect($db_server,$db_user,$db_passwort) or die ("Konnte keine Verbindung zur Datenbank herstellen, bitte versuchen Sie es später erneut!");
$db_check = MYSQL_SELECT_DB($db_name);
 
//Tabelle erstellen
 
mysql_query(' CREATE TABLE `ip` (
`ip_int` INT NOT NULL ,
`ip_int_index` INT NOT NULL ,
`ip_varchar` VARCHAR( 15 ) NOT NULL ,
`ip_varchar_index` VARCHAR( 15 ) NOT NULL ,
`ip_text` TEXT NOT NULL ,
INDEX ( `ip_int_index` , `ip_varchar_index` )
) ENGINE = MYISAM ');
 
 
//Tabelle mit zufälligen IPs füllen
for ($x=1;$x<10000;$x++)
  {
  $ip=rand(150,244).'.'.rand(0,254).'.'.rand(0,254).'.'.rand(0,254);
  mysql_query('insert into ip (ip_int,ip_int_index,ip_varchar,ip_varchar_index,ip_text) values ("'.ip2long($ip).'","'.ip2long($ip).'","'.$ip.'","'.$ip.'","'.$ip.'")');
  }
echo 'DB mit 10.000 IPs gefüllt<br />';  
flush();
 
 
 
//Zeit Messen: INT mit Index
$ip=rand(150,244).'.'.rand(0,254).'.'.rand(0,254).'.'.rand(0,254);
$t2=microtime(true);
 
for ($x=1;$x<500;$x++)
  {
  mysql_query('select * from ip where ip_int_index="'.(ip2long($ip)+$x).'" LIMIT 1');
  }  
$t2=microtime(true)-$t2;
echo 'INT (LONG) mit Index    :'.$t2.' s<br />';
flush();
 
//Zeit Messen: INT ohne Index
$ip=rand(150,244).'.'.rand(0,254).'.'.rand(0,254).'.'.rand(0,254);
$t1=microtime(true);
for ($x=1;$x<500;$x++)
  {
  mysql_query('select * from ip where ip_int="'.(ip2long($ip)+$x).'" LIMIT 1');
  }
$t1=microtime(true)-$t1;
echo 'INT (LONG) ohne Index   :'.$t1.' s<br />';
flush();
 
//Zeit Messen: VarChar ohne Index
$ip=rand(150,244).'.'.rand(0,254).'.'.rand(0,254).'.'.rand(0,254);
$t3=microtime(true);
for ($x=1;$x<500;$x++)
  {
  mysql_query('select * from ip where ip_varchar="'.long2ip(ip2long($ip)+$x).'" LIMIT 1');
  }
$t3=microtime(true)-$t3;
echo 'VarChar (15) ohne Index   :'.$t3.' s<br />';
flush();
 
//Zeit Messen: VarChar mit Index
$ip=rand(150,244).'.'.rand(0,254).'.'.rand(0,254).'.'.rand(0,254);
$t4=microtime(true);
for ($x=1;$x<500;$x++)
  {
  mysql_query('select * from ip where ip_varchar_index="'.long2ip(ip2long($ip)+$x).'" LIMIT 1');
  }
$t4=microtime(true)-$t4;
echo 'VarChar (15) mit Index   :'.$t4.' s<br />';
flush();
 
//Zeit Messen: Text ohne Index
$ip=rand(150,244).'.'.rand(0,254).'.'.rand(0,254).'.'.rand(0,254);
$t5=microtime(true);
for ($x=1;$x<500;$x++)
  {
  mysql_query('select * from ip where ip_text="'.long2ip(ip2long($ip)+$x).'" LIMIT 1');
  }
$t5=microtime(true)-$t5;
echo 'Text ohne Index  :'.$t5.' s<br />';
flush();
 
 
 
 
mysql_query('DROP TABLE ip');

Hinweis:: Ich benutze für jede SQL-Anfrage eine unique IP (ip2long($ip)+$x). Grund dafür ist, dass ich verhindern möchte, dass die Ergebnis aus dem Query-Cache kommen!

Ergebnisse meines Benchmarks

Benchmarkergebnisse

Ergebnis

Die Benchmarkergebnistabelle zeigt, dass die Abfragen der IP mit Datentyp INT (LONG) mit Index mit Abstand die schnellsten sind. Alles Andere ist etwa gleich langsam. Die Speichereinsparung von 75% der INT-Werte gegenüber Varchar oder Text sollte ebenfalls berücksichtigt werden!

Update ip_v6

Wer das ganze auch für ip_v6 braucht kann die folgende PHP-Funktion von php.net verwenden:

$ipv6 = "2001:4860:a005::68";
 
function ip2long6($ipv6) {
  $ip_n = inet_pton($ipv6);
  $bits = 15; // 16 x 8 bit = 128bit
  while ($bits >= 0) {
    $bin = sprintf("%08b",(ord($ip_n[$bits])));
    $ipv6long = $bin.$ipv6long;
    $bits--;
  }
  return gmp_strval(gmp_init($ipv6long,2),10);
}
 
function long2ip6($ipv6long) {
 
  $bin = gmp_strval(gmp_init($ipv6long,10),2);
  if (strlen($bin) < 128) {
    $pad = 128 - strlen($bin);
    for ($i = 1; $i <= $pad; $i++) {
    $bin = "0".$bin;
    }
  }
  $bits = 0;
  while ($bits <= 7) {
    $bin_part = substr($bin,($bits*16),16);
    $ipv6 .= dechex(bindec($bin_part)).":";
    $bits++;
  }
  // compress
 
  return inet_ntop(inet_pton(substr($ipv6,0,-1)));
}
 
print $ipv6long =  ip2long6($ipv6)."\n";
print $ipv6 = long2ip6($ipv6long)."\n";