Πώς να ελαχιστοποιήσετε HTML, CSS και JavaScript χρησιμοποιώντας το Autoptimize Plugin

Το Google και άλλες μηχανές αναζήτησης δίνουν αξία στον ιστότοπό σας εάν φορτώνεται τόσο γρήγορα. Επειδή κανένας από τους θεατές δεν έχει πολλούς ασθενείς να περιμένουν πολύ για να δουν το περιεχόμενό σας και έχετε μόλις 1,5 δευτερόλεπτο για να τραβήξετε την προσοχή τους. Εάν ο ιστότοπός σας χρειάζεται πολύ χρόνο για να ανοίξει, συνήθως χάνετε τους θεατές σας. Έτσι, αυτό είναι απαραίτητο για την επιτάχυνση του ιστότοπού σας. Υπάρχουν διάφοροι τρόποι με τους οποίους μπορείτε να βελτιστοποιήσετε τον ιστότοπό σας. Αλλά ένα από τα πιο σημαντικά μέρη είναι να Ελαχιστοποιήστε HTML, CSS και JavaScript.


Εάν κάνατε ποτέ ένα τεστ ταχύτητας Google PageSpeed ή GTmetrix, πιθανότατα βλέπετε αυτήν την επιλογή.

Κάθε ιστότοπος που φορτώνεται με πολλά αρχεία περιέχει HTML, CSS και JavaScript. Και τα περισσότερα από τα αρχεία περιλαμβάνουν πολύ χώρο, σχόλια, οριοθέτες μπλοκ κ.λπ. Επομένως, χρειάζονται επιπλέον χρόνοι για να φορτωθούν σωστά.

Αυτό εξαρτάται επίσης από την ποιότητα του θέματος. Για παράδειγμα, μια κορυφαία ποιότητα θέματος πάντα καλύτερη από ένα δωρεάν θέμα. Τα premium θέματα είναι καλώς κωδικοποιημένα και κατασκευασμένα από ειδικευμένους προγραμματιστές. Αλλά όλα τα θέματα δεν είναι τα ίδια και έχουν διαφορετικό τύπο λειτουργιών. Λοιπόν, από Ελαχιστοποίηση αυτά τα αρχεία HTML, CSS και JavaScript, μπορείτε να αυξήσετε στρατηγικά την ταχύτητα του ιστότοπού σας και να κάνετε τους επισκέπτες σας ευχαριστημένους.

Τι είναι το ελαχιστοποίηση και γιατί είναι ωφέλιμο?

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

Πριν από το Minify και μετά το Minify

Χρησιμοποιούνται για να προσθέσουν την αναγνωσιμότητα στον κώδικα αλλά δεν απαιτούνται για την εκτέλεση του. Με αυτόν τον τρόπο μειώνει την ποσότητα του κώδικα που πρέπει να μεταφερθεί μέσω του διαδικτύου και εξοικονομεί το εύρος ζώνης σας. Έτσι από ελαχιστοποιώντας HTML, CSS και JavaScript, μπορείτε εύκολα να αφαιρέσετε αυτούς τους περιττούς χαρακτήρες από τον ιστότοπό σας και σημαντικά αυξήσουν την ταχύτητα του ιστότοπού σας. 

Πώς να ελαχιστοποιήσετε HTML, CSS και JavaScript

Υπάρχουν δύο τρόποι με τους οποίους μπορείτε να ελαχιστοποιήσετε HTML, CSS & JavaScript. Είτε μπορείτε να το κάνετε επεξεργάζοντας τον κώδικα θέματος είτε μπορείτε να χρησιμοποιήσετε μια προσθήκη WordPress, που ονομάζεται Αυτόματη βελτιστοποίηση. Σε αυτό το άρθρο, θα σας δείξουμε και τις δύο διαδικασίες Πώς να ελαχιστοποιήσετε HTML, CSS και JavaScript.

Για να γνωρίζετε το ακριβές αρχείο HTML, CSS ή JavaScript που προκαλεί το πρόβλημα, πρέπει να το ελέγξετε σε οποιοδήποτε εργαλείο δοκιμής ταχύτητας ιστότοπου όπως Εργαλείο Google PageSpeed ή GTmetrix. Επειδή δεν περιέχουν όλα τα αρχεία σας αυτόν τον τύπο περιττών χαρακτήρων.

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

Ελαχιστοποίηση Css, JavaScript

Μειώνει την ποιότητα του θέματος. Λοιπόν, τίποτα να ανησυχείτε αν δείτε ότι λέγονται και οι δύο ότι ελαχιστοποιούν και είναι καλύτερο να αποκτήσετε ένα θέμα Premium.

Υπάρχουν ορισμένα διαδικτυακά εργαλεία με τα οποία μπορείτε να ελαχιστοποιήσετε κώδικα HTML, CSS και JavaScript. 

Πριν κάνετε οποιαδήποτε αλλαγή, πάρτε ένα αντίγραφο ασφαλείας αυτού του αρχείου.

# 1 Ελαχιστοποιήστε τον κωδικό:

Εργαλείο ελαχιστοποίησης κώδικα

Ελαχιστοποιήστε τον κωδικό είναι ένα εργαλείο ελαχιστοποίησης όλων σε ένα. Μπορεί να ελαχιστοποιήσει τους κώδικες JavaScript, CSS και HTML. Το μόνο που χρειάζεστε για να αντιγράψετε τον κώδικα HTML ή CSS ή JavaScript και να τον επικολλήσετε εδώ. Στη συνέχεια κάντε κλικ στο Ελαχιστοποιήστε Επιλογή. Αυτό το εργαλείο ελαχιστοποιεί αυτόματα τον κωδικό σας. Μετά από αυτό, αντιγράψτε τον Minified κώδικα σε αυτό το αρχείο.

Μπορείτε επίσης να ελαχιστοποιήσετε τον κώδικα CSS και JavaScript όπως τον κώδικα HTML με αυτό το εργαλείο.

# 2 Willpeavy:

Willpeavy

Το Willpeavy είναι ένα άλλο εξαιρετικό εργαλείο Ελαχιστοποίηση HTML κωδικοί. Αυτό το εργαλείο λειτουργεί με τον ίδιο τρόπο όπως και ο κωδικός ελαχιστοποίησης. Ελαχιστοποιεί HTML και οποιοδήποτε CSS ή JS περιλαμβάνεται στη σήμανση σας. Για να χρησιμοποιήσετε αυτό το εργαλείο, απλώς πρέπει να αντιγράψετε τον κωδικό σας εδώ και να κάνετε κλικ στο Minify.

Ελαχιστοποίηση με χρήση της Αυτόματης βελτιστοποίησης προσθήκης

Αυτόματη βελτιστοποίηση

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

Η αυτόματη βελτιστοποίηση συνδυάζει όλα τα σενάρια και τους κωδικούς στυλ και τα καθιστά μικρότερα που φορτώνουν τόσο γρήγορα. Ελαχιστοποιεί όλο το HTML, CSS & Ο ίδιος ο κώδικας Javascript και η σελίδα σας είναι πραγματικά ελαφριά. Με το Minification, αυτή η προσθήκη προσθέτει κεφαλίδες που λήγουν και μετακινεί στυλ στην κεφαλίδα της σελίδας και μπορεί να μετακινήσει σενάρια στο υποσέλιδο.

Αυτόματη βελτιστοποίηση ρυθμίσεων προτάσεων

Μπορείτε εύκολα να κάνετε όλα τα πράγματα από τις ρυθμίσεις προσθηκών. Αφού ενεργοποιήσετε αυτήν την προσθήκη, μεταβείτε στο Ρυθμίσεις> Αυτόματη βελτιστοποίηση.  Κάντε κλικ στο κουμπί “Εμφάνιση σύνθετων ρυθμίσεων”.

Στο HTML ενότητα, επιλέξτε “Βελτιστοποίηση κώδικα HTML” και “Διατήρηση σχολίων HTML” για ταχύτερη απόδοση.

Αυτόματη βελτιστοποίηση επιλογών HTML

Στο JavaScript ενότητα, ενεργοποιήστε το “Βελτιστοποίηση κώδικα JavaScript”. Μπορείτε επίσης να ενεργοποιήσετε το “Force JavaScript in” για να φορτώσετε JS νωρίς και να μειώσετε την πιθανότητα σφαλμάτων JS. Σε περίπτωση που το JS σας σπάσει τα σενάρια, τότε μπορείτε να ενεργοποιήσετε το “Add try-catch wrapping”.
Αυτόματη βελτιστοποίηση επιλογών JavaScript

Σε CSS ενότητα, ενεργοποιήστε την επιλογή “Βελτιστοποίηση κώδικα CSS”, “Συγκεντρώστε επίσης ενσωματωμένο CSS”. Μπορείτε επίσης να ενεργοποιήσετε το “Inline and Defer CSS” εάν έχετε ελαχιστοποιήσει το CSS. Δοκιμάστε αυτό το εργαλείο για να ελαχιστοποιήσετε το CSS σας και να το επικολλήσετε στο πλαίσιο.

Αυτόματη βελτιστοποίηση επιλογών CSS

Καταχώρησε CDN URL στο πεδίο “CDN Base URL”. Για παράδειγμα, “//cdn.example.com/”.

Και τελευταίο, ενεργοποιήστε το “Αποθήκευση συγκεντρωτικών σεναρίων / css ως στατικού αρχείου”. Αλλά βεβαιωθείτε ότι ο διακομιστής ιστού σας μπορεί να χειριστεί σωστά τη συμπίεση και τη λήξη.

Αυτόματη βελτιστοποίηση επιλογών CDN

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

συμπέρασμα

Ελαχιστοποίηση HTML, CSS και JS είναι ευεργετικά για τον ιστότοπό σας. Καταργεί τους περιττούς χαρακτήρες του κώδικα και τους καθιστά μικρότερους που είναι φιλικοί στο πρόγραμμα περιήγησης. Με αυτόν τον τρόπο μπορείτε να βελτιώσετε την ταχύτητα φόρτωσης του ιστότοπού σας.

Εάν αυτό το σεμινάριο βοηθά στην Ελαχιστοποίηση HTML, CSS και JavaScript, μοιραστείτε αυτό το άρθρο Facebook, Κελάδημα, Google+.

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

  • Πώς να αξιοποιήσετε την προσωρινή μνήμη του προγράμματος περιήγησης στο WordPress
  • Πώς να βελτιστοποιήσετε τη βάση δεδομένων WordPress χρησιμοποιώντας το WP-Sweep
  • 7 Best Image Optimizer για το WordPress 2017
  • Πώς να ενεργοποιήσετε εύκολα τη συμπίεση Gzip στο WordPress για ταχύτερη φόρτωση
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map