9 τρόποι για να κάνετε την ιστοσελίδα σας ταχύτερη

Γιατί είναι σημαντική η ταχύτητα που κάνει να φορτώσει μία ιστοσελίδα

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

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

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

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

Θέλεις να μειώσεις τον λογαριασμό του ρεύματός σου; Είναι απλό!

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

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

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

Με κάθε burger, δώρο αναψυκτικό 330ml!

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 και δεν ξοδεύει περιτό χρόνο για να το καταλάβει.