Ο ευκολότερος τρόπος για να ελαχιστοποιήσετε το Shopify CSS σας που έχει δημιουργηθεί με χρήση υγρών μεταβλητών

Minify Script για Shopify Liquid CSS αρχεία

Κατασκευάσαμε ένα ShopifyPlus τοποθεσία για έναν πελάτη που έχει έναν αριθμό ρυθμίσεων για τα στυλ του στο πραγματικό αρχείο θέματος. Αν και αυτό είναι πραγματικά πλεονεκτικό για την εύκολη προσαρμογή στυλ, σημαίνει ότι δεν έχετε στατικά φύλλα στυλ (CSS) αρχείο που μπορείτε εύκολα minify (μείωση σε μέγεθος). Μερικές φορές αυτό αναφέρεται ως CSS συμπίεση και συμπίεση το CSS σας.

Τι είναι η ελαχιστοποίηση CSS;

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

h1 {
  font-size: 30px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

p {
  font-size: 18px;
}

Μέσα σε αυτό το φύλλο στυλ, κάθε διάστημα, επιστροφή γραμμής και καρτέλα καταλαμβάνουν χώρο. Εάν αφαιρέσω όλα αυτά, μπορώ να μειώσω το μέγεθος αυτού του φύλλου στυλ πάνω από 40% εάν ελαχιστοποιηθεί το CSS! Το αποτέλεσμα είναι αυτό…

h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}

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

Φανταστείτε ένα μεγάλο αρχείο CSS και πόσος χώρος μπορεί να εξοικονομηθεί ελαχιστοποιώντας το CSS του… είναι συνήθως τουλάχιστον 20% και μπορεί να είναι πάνω από το 40% του προϋπολογισμού τους. Η αναφορά μιας μικρότερης σελίδας CSS στον ιστότοπό σας μπορεί να εξοικονομήσει χρόνο φόρτωσης σε κάθε σελίδα, να αυξήσει την κατάταξη του ιστότοπού σας, να βελτιώσει την αφοσίωση σας και, τελικά, να βελτιώσει τις μετρήσεις μετατροπών σας.

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

Shopify CSS Liquid

Μέσα σε ένα θέμα Shopify, μπορείτε να εφαρμόσετε ρυθμίσεις που μπορείτε να ενημερώσετε εύκολα. Μας αρέσει να το κάνουμε αυτό καθώς δοκιμάζουμε και βελτιστοποιούμε τοποθεσίες, έτσι ώστε να μπορούμε απλώς να προσαρμόσουμε το θέμα οπτικά αντί να εμβαθύνουμε στον κώδικα. Έτσι, το Stylesheet μας είναι κατασκευασμένο με Liquid (γλώσσα δέσμης ενεργειών του Shopify) και προσθέτουμε μεταβλητές για να ενημερώσουμε το Stylesheet. Μπορεί να μοιάζει με αυτό:

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

Αν και αυτό λειτουργεί καλά, δεν μπορείτε απλώς να αντιγράψετε τον κώδικα και να χρησιμοποιήσετε ένα διαδικτυακό εργαλείο για να τον ελαχιστοποιήσετε, επειδή το σενάριό τους δεν κατανοεί τις υγρές ετικέτες. Στην πραγματικότητα, θα καταστρέψετε εντελώς το CSS σας αν προσπαθήσετε! Τα καλά νέα είναι ότι επειδή είναι χτισμένο με Liquid… μπορείτε πραγματικά να ΧΡΗΣΙΜΟΠΟΙΗΣΕΤΕ scripting για να ελαχιστοποιήσετε την έξοδο!

Shopify CSS Minification In Liquid

Το Shopify σάς δίνει τη δυνατότητα να γράψετε εύκολα μεταβλητές σεναρίου και να τροποποιήσετε την έξοδο. Σε αυτήν την περίπτωση, μπορούμε πραγματικά να τυλίξουμε το CSS μας σε μια μεταβλητή περιεχομένου και στη συνέχεια να το χειριστούμε για να αφαιρέσουμε όλες τις καρτέλες, τις επιστροφές γραμμών και τα κενά! Βρήκα αυτόν τον κωδικό στο Κοινότητα Shopify από Tim (tairli) και λειτούργησε άψογα!

{%- capture content %}

ALL Your CSS CODE HERE

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minifed: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Έτσι, για το παραπάνω παράδειγμά μου, η σελίδα μου theme.css.liquid θα μοιάζει με αυτό:

{%- capture content %}

{%- assign fontsize_h1 = settings.fontsize_h1 -%}
{%- assign fontsize_h2 = settings.fontsize_h1 -%}
{%- assign fontsize_h3 = settings.fontsize_h1 -%}
{%- assign fontsize_p = settings.fontsize_p -%}
h1 {
  font-size: {{ fontsize_h1 }}
}
h2 {
  font-size: {{ fontsize_h2 }}
}
h3 {
  font-size: {{ fontsize_h3 }}
}
p {
  font-size: {{ fontsize_p }}
}

{%- endcapture -%}
{%- assign before =  content.size -%}
{%- assign content =  content | strip_newlines | split: " " | join: " " | split: "*/" -%}
{%- assign new_content = "" -%}
{%- for word in content -%}
{%- assign new_word = word | split: "/*" | first | strip | replace: "; ", ";" | replace: "} ", "}" | replace: "{ ", "{" | replace: " {", "{" -%}
{%- assign new_content = new_content | append: new_word -%}
{%- endfor -%}
/* CSS minified: {{ before }} --> {{ new_content.size }} */
{{- new_content  }}

Όταν εκτελώ τον κώδικα, το CSS εξόδου είναι ως εξής, τέλεια ελαχιστοποιημένο:

/* CSS minified: 119 --> 71 */h1{font-size:30px}h2{font-size:25px}h3{font-size:20px}p{font-size:18px}