Γρήγορη ιστοσελίδα σε οικονομικό πακέτο φιλοξενίας

Πολλοί χρήστες δεν επιθυμούν να πληρώσουν ακριβά πακέτα φιλοξενίας για την ιστοσελίδα τους, αλλά θέλουν η σελίδα τους να ανταποκρίνονται γρήγορα γιατί διαφορετικά θα χάνουν επισκέπτες. Σίγουρα ακούγεται τρελό, αλλά πως μπορεί να γίνει κάτι τέτοιο; Η εμπειρία μας, μας λέει πως σίγουρα μπορεί να επιτευχθεί αυτός ο στόχος, και για το λόγο αυτό σας παρουσιάζουμε μερικά από τα μυστικά μας, για να κάνετε και τη δική σας ιστοσελίδα να λειτουργεί πολύ γρήγορα.

Είναι προφανές, πως για να μπορέσετε να αγοράσετε οικονομικό πακέτο φιλοξενίας, θα πρέπει η εταιρεία που σας πούλησε την υπηρεσία web hosting, να βάλει στον ίδιο server και άλλους χρήστες μαζί με εσάς.

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

Ωστόσο, αυτό δεν αποτελεί αποτρεπτικό παράγοντα για την βελτιστοποίηση της ιστοσελίδας σας, αφού μπορείτε να ακολουθήσετε τις οδηγίες μας, και έτσι να κάνετε τη σελίδα σας να συμπεριφέρεται σαν να έχετε dedicated server και όχι shared hosting.

Δημιουργήστε στατική ιστοσελίδα

Υπάρχουν περιπτώσεις που η κατασκευή μιας δυναμικής ιστοσελίδας δεν αποτελεί απαραίτητη προϋπόθεση, και ένα web site μπορεί να δημιουργηθεί με απλές στατικές ιστοσελίδες.

Αν δημιουργήσετε μια στατική ιστοσελίδα, αυτό που συμβαίνει, είναι να μειώσετε τα αιτήματα για εγγραφή/ανάγνωση στους σκληρούς δίσκους του server και στη βάση δεδομένων.

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

Χρησιμοποιήστε λογισμικό για Cache

Όταν χρησιμοποιείτε δυναμικές ιστοσελίδες είναι απαραίτητη η χρήση Cache καθώς αποθηκεύει προσωρινά το αποτέλεσμα μιας σύνθετης για το web server εργασίας κατά την πρώτη φορά χρήσης των δεδομένων, και στη συνέχεια αντί ο server να μπαίνει στη διαδικασία υπολογισμού ξανά των σύνθετων δεδομένων, μοιράζει στους χρήστες κατευθείαν το αποτέλεσμα.

Για παράδειγμα, όσοι χρησιμοποιούν το CMS WordPress, συχνά εγκαθιστούν και λογισμικό Cache όπως το W3TotalCache, το WP Super Cache, DB Cache Reloaded Fix και άλλα.

Βελτιστοποίηση των CSS.

Η βελτιστοποίηση των CSS μπορεί να γίνει σε δυο σημεία. Το πρώτο είναι κατά την κωδικοποίηση και το δεύτερο είναι η συμπίεση του κώδικα.

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

div
{
    background-color : #FFFFFF;
    background-image : url('img.jpg');
    background-repeat: no-repeat;
    background-position : 50% 100%;
}

span
{
    background-color : #FFFFFF;
    background-image : url('img.jpg');
    background-repeat: no-repeat;
}

μπορεί να αλλάξει στον κώδικα που ακολουθεί:

div,span
{
    background-color : #FFF;
    background-image : url('img.jpg');
    background-repeat: no-repeat;
}

div
{
    background-position : 50% 100%;
}

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

div,span{background-color:#FFF;background-image:url('img.jpg');background-repeat:no-repeat;}div
{background-position:50%100%;}

Όπως βλέπετε ο κώδικας έχει συμπιεστεί σε μεγάλο βαθμό από το αρχικό κομμάτι κώδικα στο τελικό. Το αρχικό απόσπασμα κώδικα έχει μέγεθος 287 Bytes ενώ το τελικό 126 Bytes με μόνο λίγες αλλαγές που πραγματοποιήσαμε στον κώδικα.

Τέλος αφού συμπιέσετε και των κώδικα σας, ακόμα ένα βήμα που μπορείτε να ακολουθήσετε, είναι ο συνδυασμός των αρχείων CSS που έχετε στη σελίδα σας. Έτσι αν έχετε πέντε αρχεία CSS, μπορείτε να τα συγκεντρώσετε όλα σε ένα. Με αυτό τον τρόπο ο browser του τελικού χρήστη θα επικοινωνήσει λιγότερες φορές με τον web server και έτσι θα γίνει ταχύτερα η μεταφόρτωση της σελίδα σας.

Βελτιστοποίηση των αρχείων JavaScript

Η JavaScript αποτελεί πλέον αναπόσπαστο κομμάτι σχεδόν κάθε ιστοσελίδας, και δυστυχώς μερικές ιστοσελίδες είναι εξαιρετικά “εθισμένες” σε αυτή τη γλώσσα προγραμματισμού. Για να βελτιστοποίησουμε τη JavaScript μπορούμε να κάνουμε τα ακόλουθα βήματα:

Πολλές δημοφιλείς βιβλιοθήκες JavaScript είναι διαθέσιμες μέσω δικτύων CDN, οπότε αντί να ανεβάζουμε το δικό μας αντίγραφο της βιβλιοθήκης, μπορούμε να χρησιμοποιήσουμε το ίδιο αντίγραφο από μια σελίδα διαμοιρασμού της, όπως είναι για παράδειγμα το Google Library, το cdnjs από την CloudFlare και το Microsoft Ajax Content Delivery Network.

Συμπιέστε τα αρχεία σας. Όπως και με τα CSS αρχεία, έτσι και με τα JavaScript αρχεία, μπορείτε να αφαιρέσετε όλους τους λευκούς χαρακτήρες (κενά, νέες γραμμές, tab, κλπ).

Μετακινήστε όλα τα αρχεία πριν την ετικέτα </body> της ιστοσελίδας σας, και αφήστε μεταξύ τον ετικετών <head></head> μόνο τα αρχεία JavaScript που είναι απαραίτητα για αυτή την περιοχή.

Βελτιστοποίηση εικόνων

Οι εικόνες κατά κανόνα είναι τα μεγαλύτερα αρχεία μιας ιστοσελίδας, και για αυτό το λόγο απαιτούν περισσότερο χρόνο για να φορτωθούν στον web browser του χρήστη.

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

Για παράδειγμα, δεν ανεβάζουμε ποτέ στην ιστοσελίδα μας εικόνες κατευθείαν από την κάμερα μας, χωρίς πρώτα να τις έχουμε επεξεργαστεί για να ελαττώσουμε το μέγεθός τους.

Lazy Loading

Ακόμα μια καλή τεχνική είναι το lazy loading. Με αυτή την τεχνική, σελίδες που είναι πραγματικά μεγάλες δεν φορτώνονται άμεσα στον browser του χρήστη.

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

Ενεργοποιήστε την επέκταση gzip

Το gzip είναι μια επέκταση του server σας, που επιτρέπει συμπίεση των αρχείων σας, πριν αυτά μεταφερθούν στον browser του χρήστη. Στις περισσότερες περιπτώσεις αυτή η επέκταση θα είναι εξ ορισμού ενεργοποιημένη. Στην περίπτωση όμως που δεν συμβαίνει αυτό, τότε μπορούμε να την ενεργοποιήσετε μόνοι σας μέσω του αρχείου htaccess.

Για να ενεργοποιήσετε αυτή την επέκταση, εισάγετε τον κώδικα που ακολουθεί στο αρχείο .haceess που βρίσκεται στον κεντρικό κατάλογο της ιστοσελίδας σας:

<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>