Σας αρέσει να περιμένετε ώρα για να δείτε μία σελίδα; Ούτε στους επισκέπτες σας αρέσει. Διαβάστε παρακάτω πως μπορείτε να κάνετε την σελίδα σας ταχύτερη…

1. Δημιουργήστε τις σελίδες σας με CSS, όχι με πίνακες (tables)

Το CSS φορτώνει πιο γρήγορα από τους πίνακες διότι:

• Οι Browsers διαβάζουν τους πίνακες δύο φορές πριν τους εμφανίσουν, μία φορά για να αναγνωρίσουν την δομή τους και άλλη μία φορά για να δουν το περιεχόμενό τους
• Οι πίνακες εμφανίζονται στην σελίδα σας αφού τους κατεβάσει ο browser σας και τους κάνει render
• Οι πίνακες ενθαρύνουν την χρήση κενών εικόνων (spacer images) γιατί βοηθούν στην σωστή διάταξη των αντικειμένων του πίνακα
• Το CSS απαιτεί πολύ λιγότερες γραμμές κώδικα από ότι ένας τεράστιος πίνακας
• Ο κώδικας που έχει να κάνει με την δομή τοποθετείται σε ένα CSS αρχείο, το οποίο καλείται μία φορά και μετά αποθηκεύεται στην cache του browser σας. Αντίθετα ένας πίνακας αποθηκεύεται στο HTML αρχείο της σελίδας και πρέπει να φορτωθεί κάθε φορά που καλείται η σελίδα
• Με το CSS μπορείτε να ελέγξετε την σειρά με την οποία θα εμφανιστεί το περιεχόμενο μιας σελίδας. Αυτό έχει ως αποτέλεσμα καλύτερο έλεγχο του τρόπου που φορτώνει μία σελίδα. π.χ. δείχνουμε κάποιο περιεχόμενο όσο κατεβαίνουν κάποιες εικόνες

2. Μην χρησιμοποιείτε εικόνες για να δείξετε κείμενο

Δεν υπάρχει κανένας λόγος να χρησιμοποιήσετε εικόνες για να δείξετε ένα κείμενο στον χρήστη μιας και το CSS μπορεί να σας βοηθήσει σε αυτό. Δείτε το ακόλουθο παράδειγμα:

a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}

a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}

Ο παραπάνω κώδικας θα δημιουργήσει ένα πολύ απλό κουμπί το οποίο αλλάζει χρώμα όταν περάσει το ποντίκι από πάνω του.

3. Χρησιμοποιήστε το CSS για το backgrounds

Εάν έχετε μία εικόνα 200px μήκος και 100px ύψος μπορείτε να δημιουργήσετε ένα background με τον ακόλουθο κώδικα:

<div class=".pretty-image"></div>

Και αυτό το CSS:

.pretty-image
{
background: url(filename.gif);
width: 200px;
height: 100px
}

Αυτό μπορεί να φαίνεται ανούσια στην αρχή αλλά αυτή η τεχνική θα κάνει την σελίδα σας να φορτώσει πιο γρήγορα. Οι Browsers κατεβάζουν τις εικόνες background αφού κατεβάσουν όλη την σελίδα. Χρησιμοποιώντας αυτή τη τεχνική το κείμενο της σελίδας σας θα φορτώσει απευθείας και οι χρήστς του ιστότοπού σας μπορούνε να πλοηγηθούν στη σελίδα σας όσο κατεβαίνει η 50kb εικόνας σας.

Αυτή η τεχνική μας αναγκάζει να μην χρησιμοποιήσουμε το ALT attribute της εικόνας. Οπότε εάν θέλετε οπωσδήποτε να έχει ένα alt tag μπορείτε να προσθέσετε στο HTML σας την ακόλουθη γραμμή:

<image src="spacer.gif" alt="description" />

Το Spacer.gif είναι μία διάφανη εικόνα 1px x 1px. Οπότε πρώτα φορτώνουν τα 50 bytes της εικόνας και το περιεχόμενο της σελίδας και έπειτα κατεβαίνει το φανταχτερό background σας, και όλα αυτά έχοντας και στο alt tag την περιγραφή σας. Τέλεια!

Σημειώστε πως αυτή η τεχνική είναι καλή μόνο για τις διακοσμητικές εικόνες σας και όχι για τις πληροφοριακές. Δεν θέλετε να αφήσετε τον χρήστη να ψάχνει μέσα στην σελίδα και το κείμενο σας μέχρι να φορτώσει η εικόνα που λείπει.

4. Χρησιμοποιήστε Contextual Selectors

Ο παρακάτω κώδικας δεν είναι παραγωγικός:

<p class="text">Αυτή είναι μία πρόταση</p>
<p class="text">Αυτή είναι ακόμη μία πρόταση</p>
<p class="text">Αυτή είναι άλλη μία πρόταση</p>

.text
{
color: #03c;
font-size: 2em
}

Αντί να γράφετε το class=”text” σε κάθε παράγραφο μπορείτε να κάνετε το παρακάτω:

<div class="text">
<p>This is a sentence</p>
<p>This is another sentence</p>
<p>This is yet another sentence</p>
<p>This is one more sentence</p>
</div>

.text p
{
color: #03c;
font-size:2em
}

Το δεύτερο παράδειγμα λέει στον browser μας ότι κάθε παράγραφος μέσα στο <div>  που έχει  class="text" θα έχει ένα χρώμα #03c και μέγεθος γραμματοσειράς 2em.

Με μια πρώτη ματιά αυτό δεν δείχνει τόσο σημαντικό, αλλά εάν χρησιμοποιήσετε αυτόν τον κανόνα σε όλες τις σελιδες σας θα γλυτώσετε ένα 20% από το τελικό μέγεθος.

Ίσως παρατηρήσατε πως η τιμή του χρώματος είναι 3ψήφια, αυτή είναι μια συμπιεσμένη εκδοχή του χρώματος #0033cc.

5. Χρησιμοποιήστε τις συμπτυγμένες ιδιότητες του CSS

Μπορείτε να χρησιμοποιήσετε μία συμπτυγμένη μορφή π.χ. για την ιδιότητα margin του CSS

Χρησιμοποιήστε:

margin: 2px 1px 3px 4px /* top, right, bottom, left */

αντί για αυτό….

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

Χρησιμοποιήστε:

margin: 5em 1em 3em /* top, right and left, bottom */

αντί για αυτό….

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em

Χρησιμοποιήστε:

margin: 5% 1% /* top and bottom, right and left */

αντί για αυτό….

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

Χρησιμοποιήστε:

margin: 0 /* top, bottom, right and left */

αντί για αυτό….

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0

Αυτοί οι κανόνες ισχύουν για τις ιδιότητες margin, border και padding.

6. Ελαχιστοποιήστε τα κενά, τις άδεις γραμμές και τα σχόλια στον κώδικα σας

Κάθε χαρακτήρας στο HTML σας πιάνει χώρο ενός byte. Δεν ακούγεται πολύ αλλά όλα αυτά αθροίζονται στο τέλος. Στην πράξη εάν δείτε παλιές σελίδες σας και ξεφορτωθείτε τα άχρηστα κενά και τις κενές γραμμές μπορεί να εξοικονομήσετε μέχρι και 10% του τελικού μεγέθους του αρχείου.

7. Αφαιρέστε άχρηστα META Tags και META Content

Τα περισσότερα META tags είναι άχρηστα και δεν βοηθούν ιδιαίτερα. Τα πιο σημαντικά tags για τις μηχανές αναζήτησης είναι το keywords και το description, αλλά λόγω τις μαζικής χρήσης του έχουν χάσει την σημαντικότητά τους στις μέρες μας. Όταν χρησιμοποιείτε META tags προσπαθήστε να τα κρατήσετε κάτω από 200 χαρακτήρες, οτιδήποτε περισσότερο θα αυξήσει και άλλο το μέγεθος της σελίδας σας. Έτσι κι αλλιώς το υπερμεγεθή META tags δεν είναι καλά για τις μηχανές αναζήτησης γιατί αποδυναμώνουν την αξία των λέξεων κλειδιών.

8. Τοποθετήστε τα CSS και JavaScript σε ξεχωριστά αρχεία

Για να τοποθετήσετε το CSS σε ένα ξεχωριστό αρχείο χρησιμοποιήστε:

<link type="text/css" rel="stylesheet" href="filename.css" />

Για να τοποθετήσετε το Javascript σε ένα εξωτερικό αρχείο χρησιμοποιήστε:

<script language="JavaScript" src="filename.js" type="text/javascript"></script>

Κάθε ξεχωριστό αρχείο καλείται μία φορά και μετα τοποθετείται στην cache του browser. Έτσι αντί να επαναλαμβάνετε τον ίδιο κώδικα συνεχώς μέσα στα HTML αρχεία σας μπορείτε να τον τοποθετήσετε σε ξεχωριστά αρχεία και έτσι θα καλούνται μόνο μία φορά.

9. Χρησιμοποιήστε την κάθετο ( / ) στο τέλος κάθε URL που είναι φάκελος

Μην κάνετε αυτό: <a href="http://www.URL.com/directoryname">

Κάντε αυτό καλύτερα: <a href="http://www.URL.com/directoryname/">

Γιατί; Εάν δεν υπάρχει η κάθετος στο τέλος του link ο server δεν ξέρει εάν το link δείχνει ένα αρχείο ή ένα directory. Βάζοντας την κάθετο ο server γνωρίζει απευθείας ότι το URL δείχνει ένα directory και δεν ξοδεύει περιτό χρόνο για να το καταλάβει.

Για τις περισσότερες μηχανές αναζήτησης το μέγιστο μήκος του τίτλου που εμφανίζεται είναι μεταξύ 60-70 χαρακτήρες. Εάν ο τίτλος της σελίδας σας είναι πάνω από 70 χαρακτήρες τότε θα αποκοπεί ένα μέρος του με αποτέλεσμα να φαίνονται μόνο οι πρώτοι 70 χαρακτήρες στα αποτελέσματα των μηχανών αναζήτησης.

Τα spiders των μηχανών αναζήτησης χρησιμοποιούν τα title tags σαν την κύρια πηγή ώστε να καθορίσουν το αντικείμενο που πραγματεύεται η συγκεκριμένη σελίδα. Αυτός είναι ο κύριος λόγος για τον οποίον πρέπει να χρησιμοποιείτε τις λέξεις κλειδιά που έχετε στοχεύσει στον τίτλο της σελίδας σας και όσο το δυνατόν πιο κοντά στην αρχή του τίτλου. Θυμηθείτε πως το κείμενο του τίτλου είναι αυτό το οποίο θα εμφανιστεί στα αποτελέσματα των μηχανών αναζήτησης ως το link το οποίο θα πατήσει ο κάθε ενδιαφερόμενος. Στην πραγματικότητα απλά φτιάχνοντας τον τίτλο μιας σελίδας θα δείτε πολύ συχνά μεγάλες αλλαγές στα rankings σας.

Θυμηθείτε να δημιουργείτε μοναδικούς τίτλους για κάθε σελίδα τoυ ιστοχώρου σας οι οποίοι είναι σχετικοί με το περιεχόμενο της σελίδας. Επίσης μην φορτώνετε την σελίδα σας με περιττές ή επαναλαμβανόμενες λέξεις.  Έστω και εάν η αρχική σελίδα σας εμφανίζεται στα αποτελέσματα αναζήτησης με 20-30 διαφορετικές λέξεις, μόνο δύο ή τρεις από αυτές θα πρέπει να συμπεριλαμβάνονται στον τίτλο σας.