Επιτάχυνση του ιστότοπού σας με CSS Sprites

web spritemaster

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

Το πρότυπο για το αρχικό Cascading Style Sheet είναι άνω των 15 ετών τώρα. Το CSS ήταν μια σημαντική εξέλιξη στην ανάπτυξη ιστού, διότι χώριζε το περιεχόμενο από το σχεδιασμό. Κοιτάξτε αυτό το blog και οποιοδήποτε άλλο και η πλειοψηφία της διαφοράς στυλ είναι απλώς στο συνημμένο φύλλο στυλ. Τα φύλλα στυλ είναι επίσης σημαντικά, επειδή αποθηκεύονται τοπικά σε κρυφή μνήμη στο πρόγραμμα περιήγησής σας. Ως αποτέλεσμα, καθώς οι άνθρωποι συνεχίζουν να επισκέπτονται τον ιστότοπό σας, δεν κάνουν λήψη ενός φύλλου στυλ κάθε φορά… μόνο το περιεχόμενο της σελίδας.

Ένα στοιχείο του CSS που συχνά δεν χρησιμοποιείται είναι CSS Sprites. Όταν ένας χρήστης επισκέπτεται τον ιστότοπό σας, ενδέχεται να μην συνειδητοποιήσετε ότι δεν υποβάλλει απλώς ένα αίτημα για τη σελίδα. Αυτοί κάντε πολλά αιτήματα… Ένα αίτημα για τη σελίδα, για τυχόν φύλλα στυλ, για τυχόν συνημμένα αρχεία JavaScript και, στη συνέχεια, για κάθε εικόνα. Εάν έχετε ένα θέμα που έχει μια σειρά εικόνων για περιγράμματα, γραμμές πλοήγησης, φόντο, κουμπιά κ.λπ.… το πρόγραμμα περιήγησης πρέπει να ζητήσει το καθένα, ένα κάθε φορά από τον διακομιστή ιστού σας. Πολλαπλασιάστε αυτό με χιλιάδες επισκέπτες και μπορεί να είναι δεκάδες χιλιάδες αιτήματα που υποβάλλονται στον διακομιστή σας!

Αυτό, με τη σειρά του, επιβραδύνει τον ιστότοπό σας. ΕΝΑ Ο αργός ιστότοπος μπορεί να έχει δραματικό αντίκτυπο στην αφοσίωση και τις μετατροπές που κάνει το κοινό σας. Μια στρατηγική που χρησιμοποιούν οι μεγάλοι προγραμματιστές ιστού είναι να βάλουν όλες τις εικόνες σε ένα μόνο αρχείο… που ονομάζεται α ξωτικό. Αντί να υποβάλετε αίτημα για καθεμία από τις εικόνες του αρχείου σας, τώρα πρέπει να υπάρχει μόνο ένα αίτημα για τη μοναδική εικόνα sprite!

Μπορείτε να διαβάσετε σχετικά πώς λειτουργούν τα CSS Sprites στο CSS-Tricks or CSS Sprite του περιοδικού Smashing Magazine Θέση. Δεν θέλω να σας δείξω πώς να τα χρησιμοποιήσετε, απλώς για να σας συμβουλεύσω να διασφαλίσετε ότι η ομάδα ανάπτυξης σας τα ενσωματώνει στον ιστότοπο. Το παράδειγμα που παρέχει το CSS Tricks εμφανίζει 10 εικόνες που είναι 10 αιτήματα και προσθέτουν έως και 20.5 KB. Όταν μαζεύεται σε ένα μόνο sprite, είναι 1 αίτημα που είναι 13kb! Το αίτημα μετ 'επιστροφής και οι χρόνοι απόκρισης για 9 εικόνες έχουν πλέον φύγει και ο όγκος των δεδομένων μειώνεται κατά περισσότερο από 30%. Πολλαπλασιάστε αυτό με τον αριθμό των επισκεπτών στον ιστότοπό σας και θα εξοικονομήσετε πραγματικά πόρους!

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

Εάν οι προγραμματιστές σας λατρεύουν τα εργαλεία, υπάρχει ένας τόνος εκεί έξω που μπορεί να τους βοηθήσει, συμπεριλαμβανομένου του Πλαίσιο πυξίδας CSS, RequestReduce για ASP.NET, CSS-Spriter για την Ruby, Σενάριο CSSSprite για το Photoshop, SpritePad, SpriteRight, SpriteCow, ZeroSprites, Γεννήτρια CSS Sprite του Project Fondue, Sprite Master Web, και το SpriteMe Σελιδοδείκτης.

Screenshot από Sprite Master Web:
web spritemaster

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

2 Σχόλια

  1. 1

    Περιμένετε… δεν είναι ολόκληρη η συλλογή «εικόνα» (ή «αεροπλάνο») και κάθε υπο-εικόνα (ή υπο-ομάδα εικόνων στην περίπτωση κινούμενων ή αλληλεπιδραστικών αλλαγών) «sprite»;

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

    ("Sprite table" ... έτσι δεν ήταν;)

    • 2

      Μπορεί να μιλάμε για δύο διαφορετικά πράγματα, Μαρκ. Με το CSS, μπορείτε βασικά να καθορίσετε ποιο "τμήμα" ενός αρχείου εικόνας θα εμφανίζεται χρησιμοποιώντας συντεταγμένες. Αυτό σας επιτρέπει να βάλετε όλες τις εικόνες σας σε ένα μόνο «sprite» και, στη συνέχεια, απλά να δείξετε την περιοχή που θέλετε να εμφανίσετε με το CSS.

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.