5 Συμβουλές HTML για να δημιουργήσετε έναν ιστότοπο γρήγορης φόρτωσης

Διαφήμιση

Μου ΗyperΤεσωτ Μκιβωτός μεγάλοΟι ικανότητες του anguage (HTML) είναι σκουριασμένες, αλλά ίσως αυτό με πληροί τις προϋποθέσεις για αυτό το άρθρο. Επιστροφή στην ημέρα που Οι φιλοι ήταν ακόμα στην τηλεόραση και η AOL έστειλε καθημερινά δωρεάν σουβέρ και μίνι-frisbees, δημιουργούσα ιστοσελίδες για φόρτωση σε dial-up μόντεμ. Με την πάροδο του χρόνου, είχα το θάρρος να σκεφτώ ότι υπάρχουν πολλοί άνθρωποι ακόμα εκεί έξω με συνδέσεις χωρίς ευρυζωνική σύνδεση (dial-up) και συνέχισαν να σχεδιάζουν ιστοσελίδες βάσει αυτού.

Τελικά, τα εγκατέλειψα σχεδιασμός και ανάπτυξη ιστοσελίδων Θέλετε να μάθετε το σχεδιασμό ιστοσελίδων; 7 κανάλια YouTube για να ξεκινήσετεΤο YouTube διαθέτει χιλιάδες βίντεο και κανάλια για αρχάριους στο σχεδιασμό ιστοσελίδων. Εδώ εξετάζουμε μερικά από τα καλύτερα για να ξεκινήσετε. Διαβάστε περισσότερα όταν η ποιότητα του περιεχομένου άρχισε να ωθείται στο πλάι από την ποσότητα του περιεχομένου. Ιστοσελίδες Flash, πολλές εικόνες, αναδυόμενα παράθυρα, αναδυόμενα παράθυρα, ρυθμιστικά κ.λπ. Εμπιστευτείτε το ποιοτικό περιεχόμενό σας και δεν χρειάζεστε αυτό το χνούδι. Εμπιστευτείτε το περιεχόμενό σας και μπορείτε να κάνετε τον ιστότοπό σας εξαιρετικά γρήγορο.

Με έναν ιστότοπο που φιλοξενείται σε μια δωρεάν υπηρεσία, είναι πιο γρήγορος σίγουρα καλύτερα. Γιατί; Επειδή το "δωρεάν" τείνει να προσελκύει πολλούς ανθρώπους και ο διακομιστής πρέπει να καθαρίσει τη σελίδα σας καθώς και χιλιάδες σελίδες άλλων ανθρώπων που δεν έχουν βελτιστοποιηθεί. Είναι σαν να προσπαθείς να περάσεις μια συνοδεία από τα κούτσουρα του Kenworths pullin με τα γουρούνια του Jimmy haulin. Αλλά αν έχετε μια μικρή Porsche, αυτό γίνεται πολύ πιο εύκολο να το κάνετε.

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

1. Χρησιμοποιήστε πίνακες με φειδώ

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

ντοαναρρίχηση μικρόύφος μικρόΤα φύλλα (CSS) ήρθαν και βοήθησαν πραγματικά το πρόβλημα της χρήσης πινάκων για διάταξη. Δυστυχώς, οι κατασκευαστές του προγράμματος περιήγησης δεν μπορούσαν να φανούν να τυλίγουν την ιδέα των προτύπων - και ακόμα δεν μπορούν. Αυτό που φαινόταν υπέροχο στο CSS στον Firefox έμοιαζε με πρωινό για σκύλους στο IE και πιθανώς δεν έδωσε καν στο Safari. Μην με ξεκινήσετε IE5 σε Mac. Είμαι ακόμα σε θεραπεία για αυτό.

Χρησιμοποιήστε μόνο πίνακες για τη διάταξη περιεχομένου που πρέπει να βρίσκεται σε α μορφή πίνακα Tableizer: Δημιουργία πίνακα HTML από υπολογιστικό φύλλο Excel Διαβάστε περισσότερα - σαν τιμοκατάλογος ή στατιστικά χόκεϊ. Αυτό μειώνει τον αριθμό των πινάκων και το βάθος της ένθεσης, που σημαίνει ταχύτερους χρόνους φόρτωσης. Εκμάθηση CSS Κορυφαίοι 5 ιστότοποι για να μάθετε CSS στο Διαδίκτυο Διαβάστε περισσότερα θα κάνει μια μεγάλη διαφορά, εάν πρέπει να έχετε μια φανταστική διάταξη.

2. Χρησιμοποιήστε HTML για να δημιουργήσετε χρώμα

Ναι, είμαι Καναδάς, οπότε είναι χρώμα για μένα. Γνωρίζω ότι το HTML είναι επικεντρωμένο στην Αμερική, οπότε το χαρακτηριστικό είναι «χρώμα». Μάθετε το δικό σας δεκαεξαδικοί χρωματικοί κωδικοί και χρησιμοποιήστε τα για να ζωντανέψετε περιεχόμενο αντί για εικόνες.

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

Εάν ήσασταν πρόγραμμα περιήγησης, θα γίνατε πιο γρήγορος στη φόρτωση απλών 7 χαρακτήρων του #FF00FF ή μια εικόνα 10 × 10 pixel του χρώματος fuschia μερικές χιλιάδες φορές; Αυτή είναι μια ρητορική ερώτηση, εσείς στην πίσω σειρά. Κατέβασε το χέρι σου.

3. Σύνδεσμος σε σενάρια / φύλλα στυλ

Εάν χρησιμοποιείτε ένα συγκεκριμένο Ιavaμικρόcript (JS) ή CSS επανειλημμένα σε ολόκληρο τον ιστότοπό σας, σκεφτείτε να δημιουργήσετε το δικό τους αρχείο και να το καλέσετε, αντί να το βάλετε σε κάθε σελίδα. Δεδομένου ότι ένα πρόγραμμα περιήγησης τείνει να αποθηκεύει προσωρινά ένα αρχείο και να καλεί πρώτα αυτό το αρχείο πριν ελέγξει με το διακομιστή, το πρόγραμμα περιήγησής σας θα έχει ήδη αυτό το σενάριο ή το CSS έτοιμο για χρήση. Αυτό σημαίνει λιγότερο ΗyperΤεσωτ Τελευθερωτής Πκλήσεις rotocol (HTTP) που σημαίνει μια ταχύτερη φόρτωση σελίδας.

Πώς να καλέσετε ένα εξωτερικό JavaScript:

–>

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

Πώς να καλέσετε ένα εξωτερικό φύλλο στυλ:

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

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

4. Συνδυάστε τα σενάριά που χρησιμοποιείτε συνήθως σε ένα αρχείο

Πολλοί προγραμματιστές ιστού θα χρησιμοποιούν τα ίδια σενάρια ξανά και ξανά. Ίσως υπάρχει ένα σενάριο ρολογιού και ένα σενάριο ημερολογίου και ίσως κάποιο είδος σεναρίου ειδικού εφέ που θα χρησιμοποιούν σε κάθε σελίδα. Αντί να έχετε 3 ξεχωριστά αρχεία, με 3 ξεχωριστές κλήσεις HTTP, τοποθετήστε τα σενάρια σε ένα αρχείο και καλέστε το μία φορά. Αυτό μειώνει τις κλήσεις HTTP κατά 66% και αποθηκεύεται και στην κρυφή μνήμη. Επιταχύνετε τον δαίμονα, εσείς! Πριν σηκώσετε ξανά το χέρι σας, ναι, μπορείτε να κάνετε το ίδιο πράγμα με αρχεία CSS.

5. Μην χρησιμοποιείτε HTML για να αλλάξετε το μέγεθος των εικόνων σας

Εάν θέλετε να χρησιμοποιήσετε μια εικόνα που είναι 1000 × 1000 εικονοστοιχεία στην ιστοσελίδα σας, αλλά θέλετε να είναι μόνο 250 × 250 εικονοστοιχεία, αλλάξτε την σε ένα πρόγραμμα επεξεργασίας εικόνων. Μερικά άτομα θα «συρρικνώσουν» την εικόνα χρησιμοποιώντας HTML όπως:

Εάν αυτή η εικόνα 1000 × 1000 εικονοστοιχείων έχει μέγεθος 2 MB, η αλλαγή μεγέθους της με HTML δεν καθιστά το μέγεθος του αρχείου μικρότερο! Στην πραγματικότητα, μπορεί να χρειαστεί περισσότερος χρόνος για τη φόρτωση, γιατί τώρα το πρόγραμμα περιήγησης πρέπει να βάλει 10 κιλά κουταλάκι σε μια σακούλα 2 λιβρών. Δεν είναι εύκολο έργο.

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