Άρθρα

Ταχύτητα φόρτωσης ιστότοπου. 4 βασικοί παράγοντες.

Ετικέτες: SEO

Ταχύτητα φόρτωσης ιστότοπου. Πώς να αυξήσετε την ταχύτητα λήψης; Κύρια προβλήματα.

Συνιστάται ταχύτητα φόρτωσης ιστότοπου Google - 2 δευτερόλεπτα. (και τώρα κοιτάξτε την ταχύτητά σας)

(Πώς μπορώ να ελέγξω την ταχύτητα φόρτωσης ιστότοπου;Ο πιο εύκολος και γρήγορος τρόπος είναι να ανοίξετε εργαλεία προγραμματιστή CTRL+SHIFT+IΣτη συνέχεια, επιλέξτε την καρτέλα "Δίκτυο" και, στη συνέχεια, ανανεώστε τη σελίδα, για να δείτε την ταχύτητα λήψης που χρειάζεστε για να ανανεώσετε τη σελίδα, Ανανέωση χωρίς προσωρινή μνήμη: πρέπει να πατήσετε CTRL + F5 / CTRL + R. Και παρακάτω θα είναι η ταχύτητα λήψης.)

Ελέγξτε την ταχύτητα φόρτωσης του ιστότοπου
χρησιμοποιώντας μια υπηρεσία από την Google: PageSpeed ​​​​Insights

(infographic από το seoprofy ©2014)

Τα κύρια σημεία που επηρεάζουν περισσότερο:

  1. Κρύπτη
  2. css (στυλ)
  3. JS (σενάρια)
  4. εικόνες (το βάρος, το μέγεθός τους - ναι, ακριβώς το μέγεθος HxW, Μεταδεδομένα - ναι, υπάρχει κάτι τέτοιο, αυτές είναι οι πληροφορίες τους όπως: Ημερομηνία, τίτλος, θέμα κ.λπ.)

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

#1 ΜΕΤΡΗΤΑ

προσωρινή αποθήκευσηκρύπτη) είναι ένα buffer (ένα μέρος) όπου αποθηκεύονται οποιαδήποτε δεδομένα. Στην περίπτωσή μας, αυτά είναι Εικόνες, κώδικας, στυλ και πολλά άλλα.

Το πιο εύκολο αυτό που μπορείς να κάνεις μόνος σου είναι ενεργοποιήστε την προσωρινή αποθήκευση στη φιλοξενία.
(Εάν έχετε φιλοξενία Ukraine.com.ua, τότε πρέπει να μεταβείτε στις "ρυθμίσεις ιστότοπου" -> "βασικές ρυθμίσεις" και θα υπάρχει ένα στοιχείο "Αποθήκευση κρυφής μνήμης" και εκεί επιλέγετε τον απαιτούμενο χρόνο για τον οποίο θα Αποθηκεύεται στην κρυφή μνήμη. Από τον εαυτό μου, προτείνω να το ορίσω σε 2 εβδομάδες - με αυτήν την περίοδο προσωρινής αποθήκευσης, τα insights ταχύτητας σελίδας Google προσθέτουν πολλούς πόντους.)

Άλλες μέθοδοι που σχετίζονται με το htaccess, τις ετικέτες του προγράμματος περιήγησης κ.λπ. μπορούν να βρεθούν στο Διαδίκτυο για αρκετά άρθρα και δεν βλέπω το νόημα να το ξαναβάψω. Μπορείτε να διαβάσετε για τους τύπους προσωρινής αποθήκευσης στο άρθρο στο Habré.

#2 CSS (στυλ)

CSS - (Cascading Style Sheets - Cascading style sheets).
Τι μπορεί να γίνει με στυλ;
Καλά Πρώτα στύψτε τα.
κατα δευτερον μειώστε τον αριθμό των αρχείων, π.χ. συγχωνεύστε όσο το δυνατόν περισσότερο για να μειώσετε τον αριθμό των κλήσεων προς τον διακομιστή.
Τρίτονενσωματώστε τα κύρια στυλ που επηρεάζουν την εμφάνιση του ορατού τμήματος της πρώτης οθόνης απευθείας στο και αφήστε τα υπόλοιπα στο αρχείο.

Αφήνω επίσης μερικούς χρήσιμους συνδέσμους:

  • υπηρεσίες συμπίεσης css
  • πώς να συμπιέσετε αρχεία css

#3 JS (σενάρια)

Εδώ έχουμε επίσης αρκετούς τρόπους βελτιστοποίησης σεναρίων.

  1. Αναβολή φόρτωσης σεναρίου. Φουσκώστε το όσο πιο χαμηλά γίνεται, βάλτε το πίσω από ή ακόμα πιο χαμηλά μερικές φορές βοηθάει, μερικές φορές δεν είναι επιλογή. Αλλά το σημείο νούμερο 2 έρχεται στη διάσωση.
  2. ASYNC – ασύγχρονη φόρτωση σεναρίου. Αυτό γίνεται χρησιμοποιώντας την παράμετρο "async".

    Υπάρχουν περισσότερες λεπτομέρειες σχετικά με τον ασυγχρονισμό εδώ.
    Λίγες περισσότερες πληροφορίες για το JS και την επιρροή του.

  3. Μικρό σημείο.
    Το JS μπορεί επίσης να συμπιεστεί. Επίσης συγχώνευση σε 1 αρχείο.

#4 Εικόνες

Μπορείτε πάντα να κάνετε τρία πράγματα: Κοιτάξτε τη φωτιά, κοιτάξτε το νερό και βελτιστοποιήστε τις εικόνες.

Το θέμα είναι αρκετά εκτενές, οπότε θα προσπαθήσω να σας δώσω μόνο σημαντικές πληροφορίες.

Βελτιστοποιήστε το βάρος.

Πως? Μέσω προγράμματος ή υπηρεσίας.

  • Το πρόγραμμα για μαζική εργασία με εικόνες Γρήγορη πέτρινη εικόναμε αυτό μπορείς
    Μαζική αλλαγή μεγέθους εικόνων. Πώς και τι ήδη google εκεί δεν είναι δύσκολο.
    Κατεβάστε το Faststone Image.
  • Υπηρεσία μείωσης του μεγέθους των εικόνων - Αρκτοειδές ζώο της ασίας. Ή μάλλον TinyPNG & TinyJPG.
    Το κύριο πλεονέκτημα του ONLINE. Απλώς ανεβάστε τα αρχεία και επιστρέψτε σε συμπιεσμένη έκδοση - Η ποιότητα δεν υποφέρει καθόλου (είναι Magic).
    Σύνδεσμοι: tinypng.com & tinyjpg.com

Βελτιστοποίηση μεγέθους.

Το μέγεθος όπως έγραψα παραπάνω μπορεί να αλλάξει χρησιμοποιώντας το πρόγραμμα γρήγορη πέτρινη εικόνα.
Το μέγεθος είναι Ύψος x Βάρος (Ύψος κατά Πλάτος).

Παράδειγμα:

Το μέγεθοςPixelsμέγεθος αρχείου
100x10010 00039 KB
200x20040 000156 KB
300 x 30090 000351 KB
500x500250 000977 KB
800x800640 0002500 KB

(Εάν θέλετε να μάθετε περισσότερα σχετικά με αυτό, μπορείτε να διαβάσετε τη βοήθεια της Google σχετικά με αυτό το θέμα. ΑΡΘΡΟ από την Google, αλλά σας προειδοποιώ ότι είναι σπασμωδικό σε κάποιο βαθμό)

Για παράδειγμα έχουμε 2 εικόνες:
1) Βάρος 100kb, Μέγεθος 500x500
2) Βάρος 100kb, Μέγεθος 2500x2500
Φαίνεται ότι τι διαφορά έχει, ζυγίζουν το ίδιο, επομένως, η φόρτωσή τους θα πρέπει να είναι εξίσου περίπλοκη ή απλή, αλλά δεν ήταν εκεί αν το ελέγξετε με το google page speed insgiht, θα συνεχίσει να ορκίζεται σε υψηλότερη ανάλυση εικόνα.

Συνοψίζοντας: Το μέγεθος μετράει. Το βάρος επίσης. (τα υπόλοιπα δεν είναι τόσο σημαντικά, αλλά σύμφωνα με τα επιχειρήματα κάποιων ειδικών έχει επίσης αντίκτυπο, τώρα μιλάω για Image Metadata)

Δεν έγραψα τίποτα για τα μεταδεδομένα, καλά, δεν υπάρχει τίποτα να γράψω εδώ ...
Απλώς διαγράψτε όλα τα μεταδεδομένα για όλες τις εικόνες, σύμφωνα με το μύθο, μπορείτε να μειώσετε το μέγεθος κατά 2 φορές. Το έμαθα πρόσφατα (σχετικά με την επίδραση του μεγέθους του αρχείου, σκέφτηκα ότι ήταν αρκετά ασήμαντο).

Συνοπτικά για την κυκλοφορία:

  • τα πιο συνηθισμένα προβλήματα φόρτωσης ιστότοπου
  • επιλογές για την επίλυσή τους
  • τι πρέπει να προσέξεις για να πάνε όλα καλά

Πάμε στο βίντεο:

ΥΣΤΕΡΟΓΡΑΦΟ.
Εάν έχετε οποιεσδήποτε ερωτήσεις ή διαφωνείτε με κάτι, γράψτε γι 'αυτό στα σχόλια.