Συμπίεση css μέσω php

Συμπίεση του css file σας μέσω php

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)
FavoriteLoadingΠροσθήκη στα Αγαπημένα μου
1/11/2012 από
adavalas

Σήμερα θα σας παρουσιάσουμε ενα πολύ απλό τρόπο για να μπορέσετε να επιτύχετε συμπίεση του αρχείου σας css μέσω της χρήσης php. Η τεχνική αυτή βοηθάει στην ταχύτητα της φόρτωσης της ιστοσελίδας σας κάτι που σας δίνει πλεονέκτημα τόσο όσο αφορά στην κατάταξη της ιστοσελίδας σας στο google ( είναι ένας απο τους παράγοντες που συνεκτιμά το google -το λέγομενο page loading time – αλλά φυσικά και οι επισκέπτες του δικτυακού σας τόπου που φυσικά προτιμούν την κατά το δυνατόν συντομότερη φόρτωση του website σας και των πληροφοριών που αναμένουν να βρουν σε αυτό. Φυσικά εξοικονομείτε και bandwidth κάτι που είναι ιδιαίτερα σημαντικό σε sites υψηλής επισκεψιμότητας.

Αυτό το μικρό παράδειγμα αποτελεί μια απόδειξη το πόσο η κατασκευή ιστοσελίδας και η προώθηση ιστοσελίδας αποτελούν συγκοινωνούντα δοχεία όχι μόνο στο προφανές σημείο του Onsite SEO ( η τεχνική βελτιστοποίησης του κώδικα της ιστοσελίδας σας, ώστε να μπορούν η google, η yahoo και η bing  και άλλες μηχανές αναζήτησης να συγκεντρώσουν πληροφορίες για το webiste σας ) αλλά και έμμεσα σε σημεία όπως το παράδειγμα μας το οποίο αφορά την βελτιστοποίηση της ταχύτητας του ιστοτόπου σας ένα παράγοντα όμως που όπως προαναφέραμε συνεκτιμούν και συνυπολογίζουν οι μηχανές αναζήτησης.

Υπάρχουν και άλλες μέθοδοι συμπίεσης του css file σας μέσω php αλλά ή συγκεκριμένη που θα σας παρουσιάσουμε είναι η πιο εύκολη και δημοφιλής στο web.

Απλά κάνετε αρχικά rename το css file σας  απο yourfilename .css file σε  yourfilename.css.php

Ξεκινήστε το CSS files με τον ακόλουθο κώδικα php και κατόπιν μετονομάστε το σε style.php

<?php
    ob_start("ob_gzhandler");

    header("Content-type: text/css; charset: UTF-8");
    header("Cache-Control: must-revalidate");

    $offset = 60 * 60;
    $ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
    
    header($ExpStr);
?>

body
{
    color: red;
}

Μετά απλά απο τις σελίδες σας καλέσετε το νέο css με το PHP file name όμως πλέον.:

    <link rel='stylesheet' type='text/css' href='css/style.php' />

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








Hide ↑

Aσφάλεια στο opencart

04 September 2014

Με το θέμα της διαδικτυακής ασφάλειας να γίνεται ένας ολοένα και μεγαλύτερης σημασίας ζήτημα κατά την

Read more...

Μαθήματα opencart - Αλλαγή του navigation bar

02 September 2014

To OpenCart αποτελεί μια από τις πιο διάσημες πλατφόρμες για την κατασκευή[…]

Read more...

WordFence. Ασφάλεια στο wordpress

01 September 2014

Το WordFence είναι ένα ιδιαίτερα δημοφιλές WordPress plugin που χειρίζεται πολλούς διαφορετικούς και κρίσιμους τομείς ασφαλείας τόσο[…]

Read more...






Σχόλια

Νίκος Μέριανος
2 November 2012


Αυτή η τεχνική δυστυχώς δεν μπορεί να κάνει και πολλά.

Σαφώς και είναι απαραίτητη, ωστόσο πραγματική συμπίεση του αρχείου δεν κάνει.

Θα πρέπει να σημειωθεί επίσης πως υπάρχουν άλλες τεχνικές, οι οποίες είναι σαφώς ποιο εύκολες (απλά εισαγωγή “εντολών” στο htaccess) οι οποίες κάνουν ακριβώς το ίδιο πράγμα.

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

Για να γίνω ποιο σαφής, αν υποθέσουμε πως έχουμε τον κώδικα που ακολουθεί:

div
{
    background-color: #00AAFF;
    background-image: url(...);
    background-position: 10px 20px;
}

τα λογισμικά που αναφέρω παραπάνω, έχουν την δυνατότητα να μετατρέψουν τον παραπάνω κώδικα σε:

div{background:#0AF url(...) 10px 20px;}

Ο οποίος είναι σαφώς μικρότερος από τον πρωτότυπο.

Και πρακτικά αυτός ο τρόπος συμπίεσης είναι που παίζει σημαντικό ρόλο στο Speed Optimization, γιατί κατά αυτό τον τρόπο, τα “καινά” εξαλείφονται, κάτι που σημαίνει πως εξαφανίζονται κριμένα bytes μέσα από το αρχείο.

Χαρακτηριστικά μπορώ να αναφέρω, πως σε ένα δικό μου Project, τα αρχεία CSS που χρησιμοποιώ έχουν συνολικό μέγεθος 150.32KB και με συνδυασμό αυτόν των αρχείων, και συμπίεση του κώδικα με τις τεχνικές που περιγράφω παραπάνω, το τελικό αρχείο CSS έχει μέγεθος 86 KB. Με αυτή την τεχνική έχω καταφέρει συμπίεση της τάξης του 47% περίπου.


Ioannis Sannos
6 February 2013


Κάτι άλλο το οποίο παίζει μεγάλη σημασία είναι και ο αριθμός των αρχείων css (ομοίως και για τα js). Όσο λιγότερα (1 είναι το ιδανικό) τόσο καλύτερα καθώς γίνονται λιγότερα request προς τον server και το site φορτώνει ταχύτερα. Η ενοποίηση (unify) των css αρχείων μέσω php (διάβασμα και αποθήκευση στο buffer και κατόπιν στην cache), σε συνδιασμό με το gzip μπορεί να δώσει πολύ καλά αποτελέσματα. Στο Elxis θα εφαρμόσουμε αυτή την μέθοδο στην επόμενη αναβάθμιση του Elxis CMS. Τέλος σημασία έχει και ο αριθμός εικόνων που φορτώνονται μέσω του css. Προτιμήστε image sprites αν είναι δυνατόν καθώς θα μειώσει δραστικά τον αριθμό εικόνων του css. Α, και αποφύγετε τα @import στα css αρχεία, είναι αργά!


Αφήστε ένα σχόλιο

 






RSS για τα σχόλια σε αυτό το άρθρο.  |  TrackBack URL



 
 
 

Eταιρείες παροχής υπηρεσιών διαδικτύου




 

Το Όραμά Μας

3d2 3d2

Η νέα εποχή ξεκινάει…

Είστε έτοιμοι;

Παρά τις όποιες δυσκολίες συναντήσαμε, τελικά μετά από 1 χρόνο περίπου, καταφέραμε να συγκεντρώσουμε τις δυνάμεις μας και να βάλουμε τις σκέψεις μας στο σωστό μονοπάτι.

Ξεκινάμε μια νέα εποχή για τα Ελληνικά δεδομένα. Κοιτάμε μπροστά και οραματίζομαστε το μέλλον με αισιοδοξία σε μία πολύ δύσκολη εποχή!

Αν είστε digital artist (web designer. web developer, programmer, 3d animator, graphic designer κτλ)  δώστε λίγα λεπτά από τον χρόνο σας να διαβάσετε το παρακάτω άρθρο. Σίγουρα σας ενδιαφέρει

 
web design forum

  • Προσεγγίστε νέους αναγνώστες και φίλους
  • Αποκτήστε το δικαίωμα να προωθήστε την σελίδα σας μέσω διαφημιστικών banner στο web design forum
  • Αποκτήστε συνδέσμους και backlinks δωρεάν
  • Αυτόματη προωθηση του άρθρου σας, σε διάφορες ιστοσελίδες κοινωνικής δικτύωσης.