4 Συμβουλές για τη βελτίωση της απόδοσης της σελίδας σας

Sep 16, 2025

πως να

Web-performance expert Henri Helvetica sitting with his laptop

Αναλυτής απόδοσης ιστού Henri Helvetica θα μοιράζονται τις συμβουλές του για το πώς να ενισχύσουν τις επιδόσεις του ιστότοπού σας στο Δημιουργία της Νέας Υόρκης 2018. Πάρτε το εισιτήριό σας τώρα .

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

Ευτυχώς, ανεξάρτητος προγραμματιστής και ο αναλυτής Web-Performance Henri Helvetica (πραγματικό όνομα Henri Brisard), είναι στο χέρι για να προσφέρει τις κορυφαίες συμβουλές του για να σούπα τις επιδόσεις του ιστότοπού σας.

01. Προσπαθήστε να μετρήσετε

Η Helvetica προτείνει ότι πρώτα απ 'όλα θα πρέπει να διασφαλίσετε τη μέτρηση. "Δεν μπορείτε ποτέ να βελτιώσετε τι δεν μετράτε", εξηγεί. "Μόλις έχετε τις μετρήσεις και τα δεδομένα σας, πρέπει να καταλάβετε ποια σημαντικά στοιχεία για τη μέτρηση. Θα μπορούσατε να έχετε δύο σελίδες που φορτώνουν σε εννέα δευτερόλεπτα, αλλά μπορεί κανείς να έχει το παράθυρο προβολής να γεμίσει πολύ πιο γρήγορα, έτσι έχετε μια καλύτερη εμπειρία χρηστών.

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

Μόλις είχε μια ματιά σε ένα φορτίο σελίδας, ο οποίος τον βοηθά να πάρει το πώς και όταν φορτώνονται ορισμένα αντικείμενα, το επόμενο βήμα της Helvetica είναι συνήθως να πυροβολήσει χρώμιο devtools για να αξιολογήσει ακριβώς τι συμβαίνει. Είναι μια προφανής επιλογή, επειδή είναι ακριβώς εκεί και είναι δωρεάν - δεν χρειάζεται να μεταβείτε σε ένα άλλο εργαλείο για να προσπαθήσετε να ανακαλύψετε γιατί μια σελίδα μπορεί να είναι αργή. Ωστόσο, πολλοί προγραμματιστές το χρησιμοποιούν ελάχιστα. "Το Devtools είναι λίγο σαν ανιχνευτής καπνού", υποστηρίζει η Helvetica. "Αν υπάρχει πυρκαγιά, το Devtools θα σας πει. Θα σας δείξει τουλάχιστον όπου ο καπνός είναι. "

02. Χάστε λίγο βάρος σελίδας

Στη συνέχεια, η Helvetica εξετάζει τον καταρράκτη, το οποίο θα υποδείξει διάφορα θέματα όπως το μέγεθος ενός περιουσιακού στοιχείου και η καθυστέρηση που συμμετείχε στη φόρτωση του. Εάν ο ιστότοπος περιέχει εικόνες κακής μεγέθους, για παράδειγμα, θα δείτε συνήθως έναν πολύ μεγάλο καταρράκτη, το οποίο είναι ένα από τα ευκολότερα σημεία πόνου για να πάρει γρήγορα. Οι εικόνες είναι ένας από τους μεγαλύτερους ένοχους για μια τοποθεσία αργής φόρτωσης - ένα ζήτημα που μπορεί να καθοριστεί αρκετά εύκολα. Δεδομένου ότι είναι η μεγαλύτερη πηγή δεδομένων, οι εικόνες είναι επίσης η μεγαλύτερη πηγή εξοικονόμησης δεδομένων.

"Θα έλαβα πάντα υπόψη το βάρος της σελίδας σας", εξηγεί η Helvetica. "Ανεξάρτητα από το πώς να το φτιάξετε, αν έχετε μια εικόνα που είναι 3MB, ή ακόμα και τρεις εικόνες στο 1MB το καθένα, πιθανότατα θα έχετε μια πρόκληση εμπειρίας χρήστη.

Web-performance expert Henri Helvetica coding on his laptop

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

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

03. Δείτε πώς στοιβάζετε

Ένας άλλος λόγος η Helvetica ευνοεί τα Devtools είναι επειδή τώρα παρέχει επίσης μετρήσεις όπως το πρώτο χρώμα (ο χρόνος που χρειάζεται για τον χρήστη να δει το πρώτο εικονοστοιχείο περιεχομένου) και το πρώτο ουσιαστικό χρώμα (ο χρόνος που χρειάζεται να γίνει ορατός το κύριο περιεχόμενο της σελίδας ).

Στη συνέχεια, υπάρχει το filmstrip (είτε σε devtools είτε στο εργαλείο απόδοσης webpageetest) που δείχνει αυξητικές στιγμιότυπα οθόνης του προγράμματος περιήγησης που καθιστούν μια τοποθεσία, ώστε να μπορείτε να δείτε τι μια σελίδα μοιάζει όταν φορτώνεται. Εξετάζοντας τους, μπορείτε να καταλάβετε ποια περιουσιακά στοιχεία φορτώθηκαν όταν και αναζητούν τρόπους φόρτωσης ορισμένων από αυτούς σε μια προγενέστερη στιγμή στο χρονοδιάγραμμα.

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

04. Κόψτε την ακαταστασία

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

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

"Βεβαιωθείτε ότι διατηρείτε το svgs σας ως όσο το δυνατόν πιο ελεύθερη πολυπλοκότητα", η Helvetica προτείνει από ένα παράδειγμα. "Τότε θα έχετε λιγότερους κώδικες όταν κάνετε το SVG σας. Το ακούω από τους προγραμματιστές όλη την ώρα. Θα πάρουν ένα svg από τους σχεδιαστές και θα πρέπει να το στείλουν πίσω επειδή θα επηρέαζαν την απόδοση. "

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 303 του Net, το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγορά Τεύχος 303 ή Εγγραφείτε στο NET .

Θέλετε περαιτέρω διορατικότητα να σούπα την ταχύτητα του ιστότοπού σας;

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Η Henri Helvetica δίνει στον ομιλητή του πλανήτη του API: μια ιστορία απόδοσης & amp; Εμπειρία χρηστών στη δημιουργία της Νέας Υόρκης από τις 25 - 27 Απριλίου 2018

Εάν ενδιαφέρεστε να εξασφαλίσετε γρήγορα τις σελίδες σας, να φορτώσετε γρήγορα, βεβαιωθείτε ότι έχετε τραβήξει ένα εισιτήριο για Δημιουργία της Νέας Υόρκης . Η Henri Helvetica θα αναγκάσει τις σημερινές και ακόμη και πειραματικές πρακτικές που απασχολούνται στη μέτρηση των εφαρμογών στο Web και την παροχή εμπειριών από τους χρήστες του Performant, καθώς και προσφέροντας περισσότερη διορατικότητα σε μετρήσεις όπως το πρώτο χρώμα και το χρόνο σε διαδραστικό χρώμα.

Δημιουργία της Νέας Υόρκης πραγματοποιείται από τις 25-27 Απριλίου 2018. Πάρτε το εισιτήριό σας τώρα .

Σχετικά Άρθρα:

7 Συμβουλές εμπειρογνωμόνων για την απόδοση Web Nailing
3 κορυφαία εργαλεία για τη δοκιμή απόδοσης ιστού
Γιατί η απόδοση του Web πρέπει να αισθάνεται γρήγορα

4 Συμβουλές για τη βελτίωση της απόδοσης της σελίδας σας

01. Προσπαθήστε να μετρήσετε

02. Χάστε λίγο βάρος σελίδας

03. Δείτε πώς στοιβάζετε

04. Κόψτε την ακαταστασία

Θέλετε περαιτέρω διορατικότητα να σούπα την ταχύτητα του ιστότοπού σας;

πως να - Τα πιο δημοφιλή άρθρα

Pureref: Πώς να χρησιμοποιήσετε το εργαλείο αναφοράς εικόνας

Chiaroscuro Art: Ένας οδηγός βήμα προς βήμα

Πώς να δημιουργήσετε μια φωτορεαλιστική σκηνή δωματίου

Πώς να σχεδιάσετε μια εμπειρία Chatbot

5 πράγματα που δεν γνωρίζατε ότι θα μπορούσατε να κάνετε με το HTML

Κάντε ρεαλιστικά φυτά στον κινηματογράφο 4d

Πώς να τέλειες τρίχες στα πορτρέτα σας

Πώς να κάνετε ένα ρεαλιστικό αθλητικό αυτοκίνητο απόδοσης

Κατηγορίες