Η ταχύτητα είναι χρηστικότητα.
Για να το πούμε με μεγαλύτερη ακρίβεια, η ταχύτητα του ιστότοπου αποτελεί σημαντικό μέρος της χρηστικότητας. Η πιο διαισθητική διεπαφή που δημιουργήθηκε ποτέ από το μυαλό του ανθρώπου δεν θα σας κάνει καλό αν ο χρήστης είναι pee'd μακριά από τη στιγμή που φορτώνει.
Αυτό είναι. Το άρθρο τελειώνει ... Εντάξει, έτσι υπάρχουν πολλά περισσότερα, αλλά αυτή η πρώτη πρόταση είναι περίπου τα μισά από αυτά που πρέπει να γνωρίζετε. Πρέπει να κάνουμε τους ιστοτόπους μας γρήγορα.
Θα μπορούσα να χρησιμοποιήσω πολλές υπερπαραγωγικές εκφράσεις όπως "φλεγόμενα γρήγορα" ή "εξαιρετικά γρήγορα", ή ακόμα και "γρηγορότερα από μια σφαίρα επιτάχυνσης", αλλά θα ήταν ανεπαρκείς. Είναι πιο απλό να πούμε ότι δεν υπάρχει κάτι τέτοιο όπως "πολύ γρήγορα".
Πρέπει να αφιερώσουμε ένα λεπτό για να μιλήσουμε για το τι ταχύτητα αναφέρομαι. Με λίγα λόγια, όλη η ταχύτητα. Πιο συγκεκριμένα, τρία είδη ταχύτητας:
Αυτός θα είναι ο χρόνος που απαιτείται για τη λήψη όλων των πληροφοριών στις συσκευές των χρηστών σας. Αυτό επηρεάζεται κυρίως από την ταχύτητα της σύνδεσης στο Internet και το πραγματικό μέγεθος των αρχείων.
Δεν μπορείτε να κάνετε πολλά για τη σύνδεση, αλλά μπορείτε να κάνετε πολλά για το μέγεθος του αρχείου.
Μετά τη λήψη των αρχείων σας, πρέπει να επεξεργαστούν και να αποτυπωθούν από το πρόγραμμα περιήγησης. Όλη αυτή η επεξεργασία και η απόδοση επηρεάζονται από το πόσο καλά γράφτηκε ο κώδικας σας και όλα τα άλλα που γίνονται στο τηλέφωνο, το tablet ή το φορητό υπολογιστή / υπολογιστής του χρήστη.
Το μόνο που μπορείτε να ελέγξετε είναι ο δικός σας κώδικας, αλλά αυτό κάνει μεγάλη διαφορά.
Και τότε υπάρχει ο ψυχολογικός παράγοντας. Οι γρήγοροι ιστότοποι μπορούν να φαίνονται και να αισθάνονται σαν να πηγαίνουν αργά. Οι αργές ιστοσελίδες μπορούν να γίνουν για να αισθάνονται λίγο πιο γρήγορα με τη δικαστική εφαρμογή ορισμένων κόλπα.
Αυτό το μέρος αφορά μόνο τη μελέτη του χρήστη και την ενημέρωσή του για το τι συμβαίνει όταν αλληλεπιδρά με τον ιστότοπο ή την εφαρμογή σας.
Πρέπει να δώσετε προσοχή και στις τρεις πτυχές της ταχύτητας του ιστότοπου, για να κάνετε το site σας να νιώθει σαν να πηγαίνει γρήγορα. Και όσο μεγαλύτερη είναι η τοποθεσία, τόσο περισσότερο πρέπει να βελτιστοποιηθεί.
Ας αρχίσουμε λοιπόν.
Πολλές φορές, ειδικά σε εκείνα τα μικρότερα, πειραματικά έργα που αγαπώ τόσο πολύ, βρίσκω τον εαυτό μου να ξοδεύει περισσότερο χρόνο στο CSS από οποιοδήποτε άλλο μέρος του κώδικα. Πολλές φορές υπάρχει επίσης περισσότερη γραφή CSS από HTML ή JavaScript. Έτσι, εκεί, είναι ένας δείκτης για το πόσο το CSS σας μπορεί να επηρεάσει το μέγεθος του αρχείου.
Στη συνέχεια, φυσικά, υπάρχει το θέμα του πόσο γρήγορα ο ιστότοπός σας θα τρέξει στην επιφάνεια εργασίας του υπολογιστή σας, φορητό υπολογιστή, tablet ή τηλέφωνο. Ένα μεγάλο μέρος της πραγματικής "εργασίας" ή η απόδοση μιας ιστοσελίδας γίνεται από το λογισμικό, με λίγη βοήθεια από τη GPU σας.
Μπορεί να φορτωθεί γρήγορα, αλλά να μετακινηθείτε αργά. Ο τρόπος που γράφεται το CSS σας έχει άμεση επίδραση στο πόσο γρήγορα μια συγκεκριμένη συσκευή είναι σε θέση να εμφανίσει στην πραγματικότητα την ιστοσελίδα αφού τα αρχεία έχουν ληφθεί.
Όταν βελτιστοποιείτε έναν ιστότοπο για να τρέχετε πιο γρήγορα, το CSS είναι συνήθως ένα καλό μέρος για να ξεκινήσετε.
Το CSS που βρίσκεται στο φύλλο στυλ σας και δεν κάνει τίποτα κάνει τα αρχεία σας άσκοπα μεγαλύτερα. Εντάξει, έτσι αυτό μπορεί να φαίνεται σαν ένα μη-brainer? αλλά εξακολουθεί να συμβαίνει στον καλύτερο από εμάς.
Μπορείτε να αφαιρέσετε κάποιο περιεχόμενο και να ξεχάσετε να διαγράψετε το παλιό CSS. Αλλάζετε την κλάση ή το αναγνωριστικό ενός στοιχείου κοντέινερ και ξεχάσετε να διαγράψετε το παλιό CSS. Γράφετε μερικά CSS, συνειδητοποιείτε ότι υπάρχει ένας καλύτερος τρόπος και ξεχνάτε ... το καταλαβαίνετε.
Τοποθετήστε πολλούς προγραμματιστές στο μίξερ και έχετε μια συνταγή για ένα δύσκαμπτο, ανεξέλεγκτο φύλλο στυλ ή συλλογή από αυτά, αν δεν είστε προσεκτικοί. Ο αχρησιμοποίητος κώδικας επιβραδύνει τη φόρτωση της σελίδας χάρη στην ίδια την ύπαρξή του ως δεδομένων. Αναστέλλει την ανάπτυξη επειδή μπορεί να προκαλέσει σύγχυση στους ανθρώπους που διαβάζουν το φύλλο στυλ.
Μπορεί επίσης να σημαίνει χαμηλότερους χρόνους εμφάνισης, επειδή είναι απλώς περισσότερο CSS για να μπορέσει ο browser να κοιτάξει, ενώ ταιριάζει με όλα τα CSS στα κατάλληλα στοιχεία HTML.
Είτε ελέγχετε και διαγράφετε όλα τα παλιά CSS με μη αυτόματο τρόπο, χρησιμοποιήστε αυτοματοποιημένα εργαλεία για να βρείτε ανεκμετάλλευτους επιλογείς CSS ή απλώς διαγράψτε τυχαία τα πράγματα μέχρι να σπάσουν κάτι (μην το κάνετε αυτό), πρέπει να πάρετε αυτόν τον παλιό κώδικα.
Μιλώντας για το πώς ο περιηγητής ταιριάζει με το CSS με την κατάλληλη HTML, ήρθε η ώρα να δούμε τους επιλογείς CSS. Πολλά έχουν γραφτεί για το ποιοι επιλογείς καθιστούν το γρηγορότερο, ποιοι είναι αργίοι, αν πρέπει να κάνετε τον κόπο με τους αργούς αυτούς καθόλου και ούτω καθεξής.
Το πρόβλημα είναι ότι πολλές από αυτές τις πληροφορίες είναι παλιές. Πίσω στο έτος 2000, ο Dave Hyatt (ένας προγραμματιστής που εργάζεται στο Safari και ενεργό μέλος της ομάδας εργασίας του CSS του W3C) έγραψε το εξής:
Η θλιβερή αλήθεια σχετικά με τους επιλογείς CSS3 είναι ότι πραγματικά δεν θα πρέπει να χρησιμοποιηθούν καθόλου αν ενδιαφέρεστε για την απόδοση της σελίδας.
Αν θα ρίξετε μια ματιά το έγγραφο αυτό το απόσπασμα προέρχεται από, θα δείτε ότι μιλούσε για επιλογείς όπως : πρώτος-παιδί και άλλοι ψευδο-επιλογείς. Και είχε δίκιο.
Είναι ακόμα? αλλά τα τελευταία δεκαπέντε χρόνια, οι υπολογιστές έχουν προχωρήσει λίγο. Σήμερα, η επιπλέον προσπάθεια που απαιτείται από τον υπολογιστή για να καταστήσει αυτό το CSS να μην είναι ορατό από κανέναν εκτός από εκείνους που χρησιμοποιούν το φθηνότερο από φτηνές κινητές συσκευές.
Αυτό είναι ένα ζήτημα αυτό καθεαυτό, έτσι πραγματικά, θα εξαρτηθεί από το τρέχον έργο, το δημογραφικό στόχο σας, και ούτω καθεξής. Με απλά λόγια, χρησιμοποιήστε την καλύτερη κρίση σας, και ίσως να μην πάτε στη θάλασσα πάνω στους ψευδο-επιλογείς.
Διαφορετικά, αν οι σελίδες σας δεν φτάσουν στο μήκος των βιβλίων, οι επιλογείς που χρησιμοποιείτε θα έχουν πολύ μικρό αντίκτυπο στην απόδοση του ιστότοπού σας. Ακόμα, ρίξτε μια ματιά στο έγγραφο που συνδέεται παραπάνω και εξοικειωθείτε με αυτό που κάνει το ταχύτερο και τι όχι. Ενδέχεται να εξακολουθείτε να βρίσκετε τις πληροφορίες χρήσιμες.
Μπορείτε επίσης να δείτε αυτό το άρθρο από τα CSS-Tricks για μια ελαφρώς πιο πρόσφατη ανάληψη του θέματος.
Φυσικά, υπάρχουν επίσης ιδιότητες CSS που χρειάζονται περισσότερο χρόνο από άλλους. Οι κλασικές ιδιότητες όπως το πλάτος, το ύψος και το χρώμα εξακολουθούν να είναι οι γρηγορότερες. Αυτά που τείνουν να διαρκέσουν λίγο περισσότερο (και μπορεί να ποικίλουν από το πρόγραμμα περιήγησης στο πρόγραμμα περιήγησης) τείνουν να είναι ιδιότητες CSS3 όπως κουτί-σκιά.
Η διαδικασία προσθήκης μιας σκιάς σταγόνας σε ένα στοιχείο είναι περίπλοκη, όσον αφορά την απόδοση ιστοσελίδων. Αυτό που είναι ενδιαφέρον να σημειωθεί είναι ότι, όπως επισημάνθηκε HTML5 Rocks , η απαιτούμενη ισχύς επεξεργασίας μπορεί να ποικίλει σημαντικά ανάλογα με τις συγκεκριμένες διαστάσεις της σκιάς σταγόνας.
αυτό το άρθρο υποδηλώνει ότι το ίδιο ισχύει και για άλλες ιδιότητες όπως η ακτίνα-ακτίνα και το μετασχηματισμό.
Και πάλι, αυτά θα έχουν ελάχιστη επίδραση στην απόδοση μιας σελίδας στον μέσο υπολογιστή γραφείου ή φορητού υπολογιστή σας. Εντούτοις, οι κινητές συσκευές ενδέχεται να έχουν μεγαλύτερο χτύπημα και η εμπειρία θα μπορούσε να υποστεί ως αποτέλεσμα. Όλοι μισούν την αδράνεια κύλισης.
Ωστόσο, αυτό πρέπει να σταθμιστεί ενάντια στο κόστος χρήσης εικόνων για την παραγωγή των ίδιων αποτελεσμάτων. Όποιος θυμάται τα πράγματα που κάναμε για να πάρουμε στρογγυλεμένες γωνίες, μια φορά την φορά;
Απλά μην πηγαίνετε στη θάλασσα, και τα στυλ σας θα πρέπει να καταστούν αρκετά γρήγορα.
Τώρα μπαίνουμε σε άλλη περιοχή. Τα CSS κινούμενα σχέδια μπορούν να είναι απίστευτα γρήγορα ή μπορούν να επιβραδύνουν το πρόγραμμα περιήγησης στο σημείο που τα μηχανήματα τυχερών παιχνιδιών δυσκολεύονται να κρατηθούν.
Αυτό οφείλεται εν μέρει στο γεγονός ότι όλα τα κινούμενα σχέδια δεν αποδίδονται εξίσου. Κάποια από τα βαριά ανύψωσης γίνεται από το υλικό, ενώ άλλα είδη κινούμενων σχεδίων πρέπει να αποδίδονται εξ ολοκλήρου από τις λειτουργίες του προγράμματος περιήγησης. Αυτό είναι ιδιαίτερα δαπανηρό σε κινητές συσκευές.
Σε ένα άλλο άρθρο σε HTML5 Rocks, οι ιδιότητες CSS που είναι η ταχύτερη για κίνηση είναι η θέση , η κλίμακα , η περιστροφή και η αδιαφάνεια.
Ανατρέξτε στο άρθρο για μια πιο ολοκληρωμένη επισκόπηση του τι μπορεί να κινούμαστε ενώ διατηρούμε χαμηλό το κόστος.
Εδώ σας προσφέρω τις πιο πρακτικές συμβουλές που μπορώ να σας δώσω εγώ, ο συγγραφέας. Χρησιμοποιήστε προεπεξεργαστές CSS όπως το LESS, SASS και το Stylus. Σίγουρα, αν τα χρησιμοποιήσετε λάθος, μπορείτε να δημιουργήσετε μεγαλύτερα φύλλα στυλ από αυτά που προορίζονταν. αλλά τα δυνητικά οφέλη αξίζουν τον κόπο.
Για παράδειγμα, εάν θέλετε να μειώσετε τον αριθμό των αιτήσεων HTTP που έγιναν στο διακομιστή (πάντοτε μια καλή ιδέα), συμπεριλάβετε όλες τις επαναρυθμίσεις, πλαίσια, σε ένα αρχείο LESS / SASS. Κατά τη σύνταξη, όλα θα είναι σε ένα φύλλο στυλ. Επιπλέον, οι περισσότεροι προεπεξεργαστές προσφέρουν την επιλογή να εξάγουν όλα τα CSS σε μικρογραφημένη μορφή.
Με αυτόν τον τρόπο, μπορείτε να χρησιμοποιήσετε όσα διαφορετικά αρχεία χρειάζεστε για σκοπούς οργάνωσης κώδικα, χωρίς να επηρεαστεί υπερβολικά το μέγεθος του αρχείου.
Το JavaScript μπορεί να είναι πολύ αργό. Για να είμαστε πιο συγκεκριμένοι, το JavaScript μπορεί να έχει πολύ πιο άμεσο αποτέλεσμα στο τμήμα "επεξεργασίας" της εξίσωσης ταχύτητας από το CSS. Ακόμη χειρότερα, το JS μπορεί να πάρει εκθετικά βαρύτερο από την άποψη του μεγέθους του αρχείου για να επιτύχει φαινομενικά ασήμαντα πράγματα.
Είναι μια διπλή μίζα με οδυνηρή καθυστέρηση και οι χρήστες μας είναι συχνά τα θύματα, ειδικά εκείνα στα προγράμματα περιήγησης για κινητά. Αυτό, όμως, δεν είναι το σφάλμα της γλώσσας. Το πόσο βίαιες γίνεται η JS μας είναι συχνά σε άμεση αναλογία με την άγνοια του προγραμματισμού γενικά.
Είμαι μη-προγραμματιστής. Έχω συχνά χρησιμοποιήσει βιβλιοθήκες όπως jQuery, ή μεμονωμένα ανεξάρτητα plug-in JS για να γίνουν πράγματα. Όσο περισσότερο πρέπει να κάνω, τόσο περισσότερα plugins πρέπει να τα καταφέρω όλα. Αυτά τα πρόσθετα και τα πλαίσια έρχονται με επιπλέον επιλογές και δυνατότητες που ίσως δε χρησιμοποιώ ποτέ.
Υπάρχει το εύρος ζώνης-κλοπή bloat, εκεί ακριβώς.
Επιπλέον, τα πρόσθετα ενδέχεται να μην λειτουργούν καλά. Θα μπορούσαν να επιβραδυνθούν ο ένας τον άλλον κάτω, ή κάποιος θα μπορούσε να σταματήσει άλλο από το να εργαστεί εντελώς.
Υπάρχει η χαμένη ισχύς επεξεργασίας, ακριβώς εκεί.
Εάν θέλετε πραγματικά να επιταχύνετε τον ιστότοπό σας, ξυρίστε τα χιλιοστά του δευτερολέπτου (ή ολόκληρα δευτερόλεπτα, σε ορισμένες περιπτώσεις) εδώ πρέπει να κάνετε:
Όπως το CSS, είναι καλύτερο να κρατήσετε το JS σε εξωτερικά αρχεία και να συνδεθείτε στο HTML σας. Ίσως να μην νομίζετε ότι είναι τόσο μεγάλη, αν δεν έχετε πολύ JS κώδικα, και προσθέτει ένα αίτημα HTTP, αλλά εδώ είναι το πράγμα: τα εξωτερικά αρχεία CSS και JS αποθηκεύονται από το πρόγραμμα περιήγησης.
Έτσι, όταν ζητηθεί ξανά η ίδια σελίδα ή άλλες σελίδες στον ιστότοπό σας που χρησιμοποιούν το ίδιο CSS ή JS, ζητούνται τα προσωρινά εξωτερικά αρχεία αντί να τα κατεβάσετε ξανά. Αυτά είναι ταχύτεροι χρόνοι φόρτωσης ιστότοπου και ελαφρώς ταχύτερη επεξεργασία Αξίζει την πρόσθετη κλήση στο διακομιστή ξανά και ξανά.
Βασικά, η θεωρία πηγαίνει έτσι: το πρόγραμμα περιήγησης καθιστά πρώτα ό, τι βρίσκεται στην κορυφή του πηγαίου κώδικα μιας σελίδας. Γι 'αυτό τα πράγματα όπως η ετικέτα πάνε κοντά στην κορυφή.
Τα αρχεία JavaScript, ωστόσο, μπορούν να επιβραδύνουν τα πάντα, σταματώντας το πρόγραμμα περιήγησης να αποδώσει την HTML σας μέχρι να φορτωθεί. Δεδομένου ότι τα περισσότερα από τα κοινά χρησιμοποιούμενα εφέ JS και plugins πρέπει να λειτουργούν μόνο αφού η υπόλοιπη σελίδα είναι στην οθόνη, αυτό είναι λιγότερο από το ιδανικό.
Βελτιώστε την εμπειρία του χρήστη και μειώστε τον αντιληπτό χρόνο φόρτωσης συνδέοντας τα εξωτερικά αρχεία στο κάτω μέρος της σελίδας, ακριβώς πριν την ετικέτα.
Μέχρι τη στιγμή που ένας χρήστης παίρνει γύρω για να αλληλεπιδράσει με οτιδήποτε απαιτεί JS, θα πρέπει να είναι έτοιμος να πάει.
Εάν σχεδιάζετε μια ολοκληρωμένη εφαρμογή, τότε μπορείτε και ίσως να αγνοήσετε αυτό το τμήμα. Ένα καλό, ευέλικτο και ελαφρύ πλαίσιο μπορεί να δώσει στους προγραμματιστές ένα τεράστιο πλεονέκτημα. Για ιστότοπους μικρού έως μεσαίου μεγέθους, ωστόσο, συμπεριλαμβανομένου ενός πλαισίου JavaScript, μπορεί να είναι υπερβολικό. Σε αυτές τις ιστοσελίδες, το JS θα χρησιμοποιηθεί ως επί το πλείστον στο back-end του CMS για τη διαχείριση του περιεχομένου. Στο front-end, μπορεί να έχετε ένα ρυθμιστικό εικόνας ή μια διάταξη τοιχοποιίας ή δύο. Αν είστε πραγματικά φανταχτερός, ίσως έχετε ολοκληρώσει αυτόματα τη γραμμή αναζήτησης.
Το μεγαλύτερο μέρος του περιεχομένου δεν χρειάζεται να φανταστεί και να κινείται σαν αυτό. Το JavaScript θα πρέπει, στο μέτρο του δυνατού, να προορίζεται για τη βελτίωση της εμπειρίας των χρηστών. Η εμπιστοσύνη σε αυτό απλά σε μια τοποθεσία μπορεί να οδηγήσει σε μια αργή, αργή περιοχή, ειδικά σε κινητές συσκευές.
Κατά κάποιο τρόπο, όλα τα πλαίσια κώδικα είναι όλα τα ίδια, είτε είναι JavaScript, PHP, Python, HTML, ή CSS: κάθε χαρακτηριστικό είναι μια δέσμη κώδικα. Όταν επιλέγετε ένα πλαίσιο ή ένα πρόσθετο για μια δουλειά, ρωτήστε τον εαυτό σας αν πρόκειται να χρησιμοποιήσετε κάθε χαρακτηριστικό που προσφέρει ή ακόμα και τα περισσότερα από αυτά.
Εάν όχι, είναι το δομοστοιχειωτό πλαίσιο; Μπορείτε να επιλέξετε και να επιλέξετε μόνο τα μέρη που πραγματικά χρειάζεστε; Αν ναι, και πιστεύετε ότι το μέγεθος του μεγέθους του αρχείου αξίζει τον κόπο, τότε με όλα τα μέσα πάτε για αυτό! Διαφορετικά, είναι βέλτιστη πρακτική να βλέπετε τι μπορείτε να πάρετε περισσότερο από ό, τι μπορείτε να τσιμπήσετε.
Όχι μόνιμα! Σκεφτείτε με αυτό τον τρόπο, υπάρχει κάποιο περιεχόμενο ή λειτουργικότητα στον ιστότοπό σας κρυμμένο από το JS; Μπορούν οι χρήστες να έχουν πρόσβαση σε αυτά χωρίς να έχουν ενεργοποιηθεί τα JS στα προγράμματα περιήγησής τους;
Αν ναι, τότε θαυμάσιος. Ωστόσο, εάν οι χρήστες δεν μπορούν να δουν σημαντικές πληροφορίες, να επικοινωνήσουν μαζί σας ή να πλοηγηθούν σωστά χωρίς JavaScript, τότε έχετε ένα πρόβλημα. Σίγουρα, μπορείτε να βασιστείτε στους περισσότερους ανθρώπους που έχουν ακόμα ενεργοποιημένη, αλλά πάντα έχετε τα περιθώρια αυτά.
Πώς σχετίζεται αυτό με την ταχύτητα του ιστότοπου; Φανταστείτε πώς η αργή περιήγηση θα πάρει εάν ένα μέρος της ιστοσελίδας σας ξαφνικά απλά δεν λειτουργεί.
Δεν είναι σοβαρά, αν δεν είστε προγραμματιστής και έχετε τον προϋπολογισμό για ένα, πάρετε ένα, ακόμη και για μικρές και απλές εργασίες. Είναι φθηνότερο σε μακροπρόθεσμη βάση να προσλάβει κάποιον έμπειρο για να το κάνει σωστά, μία φορά.
Σε περίπτωση που τα πράγματα γίνονται καταφατικά λανθασμένα (και μιλάμε για υπολογιστές εδώ, έτσι κάτι θα πάει στραβά), θα μάθουν τι πήγε στραβά πιο γρήγορα. Θα έχουν εμπειρία στην εξεύρεση τέτοιων προβλημάτων και την επίλυσή τους. Εάν δεν υπάρχει τίποτα άλλο, θα είναι καλύτερα να προχωρήσουμε σε αυτά τα συγκεκριμένα θέματα.
Το πιο σημαντικό, θα ξέρουν πώς να κάνουν ό, τι πρέπει να γίνει με λιγότερο κώδικα. Λιγότερος κώδικας (συνήθως) τρέχει πιο γρήγορα και (πάντα) κατεβάζει ταχύτερα. Αυτή είναι η απλούστερη συμβουλή που μπορώ να δώσω.
(Αν είστε προγραμματιστής ή μαθαίνω, έχω συντάξει μια λίστα από μαθήματα που θα βρίσκονται στο κάτω μέρος αυτού του άρθρου. Περιλαμβάνονται μερικοί οδηγοί για αρχάριους που γράφουν JavaScript που τρέχει γρήγορα).
Όταν βγάζετε βίντεο από την εξίσωση, το μεγαλύτερο πράγμα σε κάθε συγκεκριμένο ιστότοπο με γνώμονα το περιεχόμενο είναι οι εικόνες. Οι εικόνες τείνουν να είναι μεγάλες, ογκώδεις και αργές ως κόλαση όταν δεν βελτιστοποιούνται.
Τώρα, με τον πολλαπλασιασμό των οθονών αμφιβληστροειδούς που μας ωθούν να χρησιμοποιήσουμε μεγαλύτερες εικόνες αν θέλουμε τα πράγματα να φαίνονται καλά σε κάθε συσκευή, το πρόβλημα δεν πρόκειται να πάρει πιο εύκολο να λυθεί. Και χειρότερα, είναι ένα θέμα που είναι εύκολο να ξεχάσουμε μέχρι να καταλήξετε να δαπανάτε περισσότερα από όσα προορίζεστε για εύρος ζώνης.
Όταν κάθε byte μετρά, δεν μπορούμε να το ξεχάσουμε.
Τα καλά νέα είναι ότι δεν πρόκειται για νέο πρόβλημα με κανένα τρόπο. Γιατί είναι καλό; Αυτό σημαίνει ότι υπάρχουν αρκετοί δυνατοί τρόποι επιλογής και μπορείτε να χρησιμοποιήσετε περισσότερους από έναν από αυτούς τη φορά. Στην πραγματικότητα, αυτή είναι γενικά μια καλή ιδέα.
Έτσι, έως ότου οι πάροχοι υπηρεσιών Ίντερνετ και οι εταιρείες φιλοξενίας αρχίσουν να μας δίνουν όλοι απεριόριστο ελεύθερο εύρος ζώνης (μην κρατάτε την αναπνοή σας), εδώ είναι μερικά πράγματα που μπορείτε να κάνετε:
Με απλά λόγια, κάνετε ό, τι μπορείτε, οπτικά, με CSS και JavaScript προτού γυρίσετε σε εικόνες. Ο κώδικας θα είναι πάντοτε φθηνότερος από ό, τι οι εικόνες, ώστε να κολλήσετε όσο πιο πολύ μπορείτε. Παρά τη δύναμη επεξεργασίας που καταναλώνουν οι σκιάσεις, κλίσεις και τα παρόμοια με βάση το CSS, εξετάστε τα συμπεράσματα.
Έχετε επίσης κατά νου ότι οι εικόνες SVG υπολογίζονται, σε αυτή την περίπτωση, ως "κώδικας", επειδή αυτό είναι όλο που είναι: ο κώδικας XML που απεικονίζεται ως εικόνα. Έτσι θα πρέπει να χρησιμοποιούνται κάθε φορά που χρειάζεστε κάτι σχετικό με τον φορέα.
Τώρα, επιστρέφοντας σε αυτές τις οθόνες αμφιβληστροειδούς, τι κάνουμε γι 'αυτούς; Πώς μπορούμε να κερδίσουμε στο εύρος ζώνης εκεί;
Εδώ περιστρέφουμε το στοιχείο και την ιδιότητα της εικόνας . Είναι σχετικά καινούργια και δεν υποστηρίζονται πλήρως, αλλά επιτρέπουν στα προγράμματα περιήγησης να επιλέγουν το κατάλληλο μέγεθος εικόνας για τη συσκευή που χρησιμοποιείται.
Έτσι, αν και αυτό δεν θα σας εξοικονομήσει κανένα εύρος ζώνης για κάποιον που βλέπει τον ιστότοπό σας στο iMac, δεν είναι τόσο μεγάλη για μια συμφωνία, επειδή κατά πάσα πιθανότητα έχει ευρυζωνική σύνδεση. Κάποιος στο τηλέφωνό τους, εν τω μεταξύ, παίρνει μια μικρότερη έκδοση της ίδιας εικόνας, κρατώντας τους από την αναμονή πάρα πολύ καιρό.
Πολλά προβλήματα θορύβου εικόνας διορθώνονται όταν μάθετε ποια μορφή εικόνας θα χρησιμοποιηθεί σε οποιαδήποτε δεδομένη κατάσταση. Θα μπορούσα να συνεχίσω για τις συγκεκριμένες μορφές εικόνας, για το πώς λειτουργεί η συμπίεση κ.ο.κ., αλλά πρέπει πραγματικά να θυμάστε μόνο μερικά πράγματα:
Αυτό είναι πραγματικά όλο αυτό. Αν το κάνετε αυτό και παίζετε με τις ρυθμίσεις βελτιστοποίησης όταν αποθηκεύετε τις εικόνες, μπορείτε συχνά να έχετε αρκετά καλή ποιότητα σε σχετικά μικρά μεγέθη αρχείων.
Ωστόσο, υπάρχει μια νέα μορφή που ονομάζεται WebP, η οποία υποστηρίζεται αυτόματα από το Chrome και την Opera. Google αξιώσεις ότι τα αρχεία WebP είναι 26% μικρότερα από τα PNG και 25-34% μικρότερα ανάλογα με μερικούς παράγοντες.
Αυτό είναι μεγάλη είδηση, εκτός από δύο πράγματα: Firefox και IE. Τώρα, εάν δεν σας πειράζει να χρησιμοποιείτε εναλλακτικές λύσεις και ένα επιπλέον σενάριο, μπορείτε να χρησιμοποιήσετε τη μορφή WebP τώρα, σήμερα. Απλά κατεβάστε WebPJS , και είστε καλό να πάτε.
Το WebPJS χρησιμοποιεί JavaScript και λίγο Flash ( αναστεναγμός ... αλλά αυτό είναι μόνο για τον IE) για να το κάνει να λειτουργήσει, αλλά λειτουργεί. Μπορεί να το εξετάσετε εάν πρέπει να εξυπηρετήσετε πολύ και πολλές μεγάλες εικόνες γρήγορα, με το μειονέκτημα να μην λειτουργεί χωρίς το JS.
Υπάρχουν δύο είδη συμπίεσης που μπορείτε να χρησιμοποιήσετε στις εικόνες σας. Πρώτον, έχουμε συμπίεση απώλειας . Αυτό χρησιμοποιείται σε απώλειες μορφές όπως JPEG. Σας επιτρέπει να συμπιέζετε οποιαδήποτε εικόνα για όσο θέλετε, με την κατανόηση ότι η ποιότητα θα χειροτερέψει και θα χειροτερέψει. Τα πράγματα θα πάρουν pixelated και χάνουν τον ορισμό.
Η απώλεια συμπίεσης χρησιμοποιείται σε μορφές όπως το PNG και μπορεί να μειώσει το μέγεθος του αρχείου σε κάποιο βαθμό. Ωστόσο, έχει τα όριά της. Πάντα έρχεται ένα σημείο στο οποίο είναι αδύνατο να γίνει μια εικόνα μικρότερη χωρίς να χάσει την ποιότητα.
Αν έχετε το Photoshop ή έναν παρομοίως προηγμένο επεξεργαστή εικόνων, είναι συχνά καλύτερο να τα χρησιμοποιήσετε για να συμπιέσετε τις εικόνες σας, ώστε να μπορείτε να δείτε ποια θα είναι η έξοδος όταν τελειώσετε.
(Τα αυτόματα εργαλεία, ειδικά τα ηλεκτρονικά εργαλεία, κατά την εμπειρία μου, τείνουν να συμπιέζουν τα πράγματα ίσως λίγο πολύ μακριά. Παρ 'όλα αυτά, θα αναφέρω τα καλύτερα εργαλεία συμπίεσης που έχω βρει στην ενότητα των συνδέσμων παρακάτω.)
Εάν χρησιμοποιείτε ένα CMS όπως το WordPress, θα αλλάξει αυτόματα τις εικόνες που είναι πολύ μεγάλες. Είναι επίσης εύκολο να βρείτε plugins που θα τα συμπιέζουν αυτόματα για εσάς.
Σας παρακαλώ, συστήνω μόνο την αυτόματη συμπίεση σε περιπτώσεις που ξέρετε ότι πρόκειται να ανεβάσετε πολλά και πολλές εικόνες παρόμοιων για τον ίδιο σκοπό. Ένα φωτογραφικό blog είναι ένα παράδειγμα.
Εάν εκτελείτε έναν ιστότοπο όπου οι χρήστες μεταφορτώνουν τις δικές τους εικόνες, καλά ... η αυτόματη αλλαγή μεγέθους και συμπίεση είναι απόλυτη ανάγκη και γι 'αυτό κάθε κοινωνικό δίκτυο το κάνει.
Εδώ είναι μερικά κομμάτια συμβουλές που δεν ταιριάζουν σε καμία από τις τρεις κατηγορίες παραπάνω.
Η "ελαχιστοποίηση" του κώδικα σημαίνει απλά ότι αφαιρούνται όλοι οι επιπλέον χώροι και τα διαλείμματα γραμμής. Αυτό μπορεί να μειώσει σημαντικά το μέγεθος του αρχείου.
Μπορεί να ακούγεται σαν πολλή δουλειά, αλλά υπάρχουν εργαλεία για την αυτόματη εξολόθρευση των CSS και JS και διατήρηση ξεχωριστών αρχείων ξεχωριστά για τα αρχεία προέλευσης, για αρκετά προφανείς λόγους.
Όπως αναφέρθηκε προηγουμένως, διάφοροι προεπεξεργαστές CSS μπορούν να εξάγουν ολόκληρο τον κώδικα σας σε εξολοκλήρου μορφή.
Με την προϋπόθεση ότι ο διακομιστής σας έχει ρυθμιστεί σωστά, όλος ο κωδικός μπορεί να αποσταλεί στο πρόγραμμα περιήγησης σε συμπιεσμένη μορφή. Τα αρχεία κειμένου συμπιέζονται πολύ καλά, μειώνοντας το μέγεθος των αρχείων που αποστέλλονται σημαντικά.
Τώρα, ο διακομιστής σας πρέπει να πάρει μια στιγμή ή δύο για να συμπιέσει τα αρχεία που στέλνει και το πρόγραμμα περιήγησης του χρήστη πρέπει να τα αποσυμπιέσει, αλλά αυτό συνήθως αξίζει το εύρος ζώνης.
Για μια πλήρη εξήγηση για το πώς λειτουργεί αυτό, δείτε Πώς να βελτιστοποιήσετε τον ιστότοπό σας με συμπίεση GZIP .
Η προσωρινή αποθήκευση του προγράμματος περιήγησης γίνεται αυτόματα σε κάποιο βαθμό χάρη στα σύγχρονα προγράμματα περιήγησης. Ένα πρόγραμμα περιήγησης μεταβαίνει σε έναν ιστότοπο και αποθηκεύει προσωρινά τις εικόνες και άλλες πληροφορίες που βρίσκει εκεί.
Με αυτόν τον τρόπο, αν ο ίδιος χρήστης επιστρέψει σε μια δεδομένη χρονική περίοδο, το πρόγραμμα περιήγησης δεν χρειάζεται να ζητήσει ξανά τις ίδιες εικόνες. Απλώς φορτώνει αυτά που έχει ήδη και ζητά νέες εικόνες που ίσως δεν έχει.
Υπάρχει, ωστόσο, κάτι που μπορείτε να κάνετε για να ενημερώσετε τους φυλλομετρητές τι να αποθηκεύσετε και για πόσο καιρό, όπως φαίνεται στο αυτόν τον οδηγό .
Και στη συνέχεια υπάρχει η προσωρινή αποθήκευση του διακομιστή. Η προσωρινή αποθήκευση του διακομιστή βασικά απορροφά μόνο τον ιστότοπό σας και βάζει ένα είδος "αντιγραφής" αυτού μεταξύ των χρηστών σας και του πραγματικού διακομιστή σας. Γιατί θα σας ενοχλήσει;
Λοιπόν, είναι ιδιαίτερα χρήσιμο για άτομα που χρησιμοποιούν συστήματα διαχείρισης περιεχομένου σε μεγάλη κλίμακα. Έχοντας τους χρήστες σας πρόσβαση σε ένα προσωρινό αντίγραφο του ιστότοπού σας αντί για το πραγματικό πράγμα μειώνει τον αριθμό των κλήσεων στη βάση δεδομένων σας. Οι πληροφορίες εμφανίζονται και φορτώνονται γρηγορότερα, διότι δεν χρειάζεται να επαναχρησιμοποιούνται κάθε φορά.
Ανάλογα με τον τρόπο που έχει ρυθμιστεί, η προσωρινή αποθήκευση του διακομιστή μπορεί επίσης να μειώσει το κόστος εύρους ζώνης γενικά. Βασικά, όσο μεγαλύτερος είναι ο ιστότοπός σας, τόσο μεγαλύτερος λόγος πρέπει να κάνετε για να το αποθηκεύσετε.
Και τώρα, το τμήμα που περιμένατε όλοι: τη λίστα των συνδέσμων! Έχουμε προπονητικά και οδηγούς, ως επί το πλείστον, και μερικά εργαλεία συμπίεσης εικόνων για να σας προτείνουμε.
Yahoo! μπορεί να μην είναι τόσο μεγάλη διαπραγμάτευση όσο ήταν κάποτε, αλλά το δίκτυο προγραμματιστών τους έχει πολλά καλά πράγματα σε αυτό. Αυτό περιλαμβάνει τους Βέλτιστες πρακτικές για την επιτάχυνση της ιστοσελίδας σας , το οποίο καλύπτει μερικά από τα βασικά πράγματα που μπορείτε να κάνετε. Μερικά από αυτά καλύπτουν το ίδιο έδαφος με αυτό το άρθρο, αλλά υπάρχουν και άλλα.
Στην εισαγωγή, ανέφερα την αντιληπτή ταχύτητα του τόπου, γνωστή και ως αντιληπτή ερμηνεία. Εάν θέλετε να διαβάσετε περισσότερα σχετικά με αυτό, ελέγξτε έξω Ένας οδηγός αρχαρίων για την αντιληπτή απόδοση: 4 τρόποι για να κάνετε το κινητό σας site να αισθάνεστε σαν native app .
Effeckt.css είναι ένα σύνολο κινούμενων εικόνων με βάση το CSS που έχουν σχεδιαστεί για να αποδίδουν γρήγορα, ανεξάρτητα από την πλατφόρμα που χρησιμοποιεί ο χρήστης.
Αυτό είναι ένας οδηγός για να βεβαιωθείτε ότι το CSS σας κατεβάζει και επεξεργάζεται το συντομότερο δυνατό από το πρόγραμμα περιήγησης.
Όταν ξεκινάτε απλά, μαθαίνοντας να κωδικοποιήσετε σωστά μπορεί να είναι εξίσου μεγάλη ώθηση ταχύτητας με τυχόν τυχαίες συμβουλές κόλπα που μπορεί να μάθετε. Ο κακός κώδικας κοστίζει περισσότερο από την άποψη του χρόνου επεξεργασίας, οπότε μάθετε να κάνετε τα πράγματα με τον σωστό τρόπο.
Εδώ είναι α βασικός οδηγός που εστιάζει ειδικότερα στη σύνταξη JavaScript που τρέχει γρήγορα.
Ακριβώς όπως λέει ο τίτλος, Αυτό είναι όλες οι συμβουλές που στοχεύουν ειδικά στο JavaScript V8.
Και μερικές φορές, μάλλον θα καταλήξετε χρησιμοποιώντας το jQuery. Εάν πρόκειται να το κάνετε αυτό, τουλάχιστον θα πρέπει να ξέρετε πώς να γράψετε επιλογείς jQuery που δεν θα σας επιβραδύνουν. Και εδώ είναι Το Sitepoint καλύπτετε .
Διάβασε αυτό για περισσότερες πληροφορίες σχετικά με τις μορφές εικόνας στον ιστό. Οι πληροφορίες είναι λίγο παλιές, αλλά εξακολουθούν να είναι έγκυρες και χρήσιμες.
Αυτό είναι ένας πιο τεχνικός οδηγός βελτιστοποίησης εικόνας που παρέχεται από το Δίκτυο προγραμματιστών Google.
Compressor.io είναι ένα από τα πιο εντυπωσιακά εργαλεία που έχω αντιμετωπίσει προσωπικά. Πρόκειται για μια εφαρμογή στο διαδίκτυο, επομένως θα πρέπει να φορτώσετε όλα τα αρχεία που θέλετε να συμπιέσετε, αλλά μπορεί να κάνει αναρωτιμίες για JPGs. Προσφέρει τόσο απώλειες όσο και απώλειες επιλογές συμπίεσης, καθένα με αρκετά εκπληκτικά αποτελέσματα, και μπορεί να κάνει και την παρτίδα επεξεργασίας.
Περίγραμμα ειδικεύεται σε συμπίεση χωρίς απώλειες, αλλά μπορεί να εγκατασταθεί στον δικό σας υπολογιστή, σε Windows, Mac ή Linux. Δεδομένου ότι εγκαθιστά στον υπολογιστή σας (και ναι, έρχεται με διάφορες επιλογές γραμμής εντολών καθώς και ένα GUI), μπορεί εύκολα να εκτελεστεί αυτόματα ως τμήμα μιας ροής εργασιών ανάπτυξης.
Όπως πάντα, υπάρχουν πολλά περισσότερα για μάθηση. Αλλά οπλισμένοι με τις πληροφορίες που έχουμε παράσχει και τους πόρους με τους οποίους έχουμε συνδέσει, θα είστε στο δρόμο σας στην οικοδόμηση ιστότοπων και εφαρμογών που δεν ενοχλούν την κόλαση από τους χρήστες σας.
Και αυτό είναι το πρώτο βήμα για να τους εντυπωσιάσεις.