Hierbei geht es rein um die Performance der Webseite. Je nach Anzahl der Addons oder Skripts des PHPKIT's, die installiert wurden, können da schon einige KB zusammen kommen. Daher hier mal eine kleine Anleitung wie man diese Dateien Komprimieren kann, damit im Endeffekt die Seite auch schneller geladen wird.
Ich nehme mir jetzt einfach mal irgendeine CSS Datei, damit Sie ein Beispiel haben, wie das nachher aussehen wird. Sie nehmen sich eine CSS Datei und öffnen diese via Editor. Markieren Sie alles und kopieren es in die Zwischenablage.
Beispiel CSS:
 | PHP-Code Anfang: (12 Zeilen) | Code markieren | 1
2
3
4
5
6
7
8
9
10
11
12 | | /* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden}
div.rating-cancel,div.rating-cancel a{background:url(fx/css/movie/delete.png) no-repeat 0 -16px}
div.star-rating,div.star-rating a{background:url(fx/css/movie/star.png) no-repeat 0 0px}
div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0px;border:0}
div.star-rating-on a{background-position:0 -16px!important}
div.star-rating-hover a{background-position:0 -32px}
/* Read Only CSS */
div.star-rating-readonly a{cursor:default !important}
/* Partial Star CSS */
div.star-rating{background:transparent!important;overflow:hidden!important}
/* END jQuery.Rating Plugin CSS */ | | | PHP-Code ENDE: (12 Zeilen) | Code markieren | |
So, wie komprimieren wir das jetzt ?
Ich habe das über ein paar Webseiten gemacht, die ich im Netz gefunden habe. Es war mir aber wichtig, das ich später bei Bedarf diese Komprimierung auch wieder Rückgängig machen könnte. Deshalb bin ich erstmal auf diese
Webseite gegangen und habe meine soeben kopierte CSS Datei in das Linke Fenster kopiert.
Siehe Bild. Die Einstellungen sollten Sie nach Möglichkeit übernehmen.
Klicken Sie nun auf "CSS verarbeiten". Dabei heraus kommt dann das hier:
| | PHP-Code Anfang: (1 Zeile) | Code markieren | | | /* CSSTidy 1.3: Mon, 20 Feb 2012 07:01:29 -0600 */div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden;}div.rating-cancel,div.rating-cancel a{background:url(fx/css/movie/delete.png) no-repeat 0 -16px;}div.star-rating,div.star-rating a{background:url(fx/css/movie/star.png) no-repeat 0 0;}div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0;border:0;}div.star-rating-on a{background-position:0 -16px!important;}div.star-rating-hover a{background-position:0 -32px;}div.star-rating-readonly a{cursor:default!important;}div.star-rating{background:transparent!important;overflow:hidden!important;} | | | PHP-Code ENDE: (1 Zeile) | Code markieren | |
Eingabe: 0.862KB, Ausgabe:0.741KB, Komprimierungsrate: 14% (-121 Bytes)
Er hat durch die Komprimierung satte 14% der Größe eingespart. Bei diesem Beispiel scheint das noch wenig zu sein, aber bei großen CSS Dateien, die 5 KB groß sind werden mitunter bis zu 50% und mehr eingespart. Die Ausgabe kopieren Sie dann einfach aus dem Fenster in die von eben geöffnete Datei und speichern diese ab. Den Schritt können Sie mit allen CSS Dateien machen, die Sie finden können.
Komprimieren Sie aber auf keinen Fall die Datei: pkinc/publictpl/style.css!!! Mit allen anderen Dateien dürfen Sie das jedoch machen
Ok, komprimiert ist jetzt alles, aber was machen wir, wenn wir das jetzt wieder lesbar machen wollen, eben weil wir etwas ändern müssten ?
Gehen Sie dazu auf folgende
Seite und kopieren Ihre minimierte CSS Datei in das Fenster und klicken einfach auf "Unminify"
Er hat dann aus:
| | PHP-Code Anfang: (1 Zeile) | Code markieren | | | /* CSSTidy 1.3: Mon, 20 Feb 2012 07:01:29 -0600 */div.rating-cancel,div.star-rating{float:left;width:17px;height:15px;text-indent:-999em;cursor:pointer;display:block;background:transparent;overflow:hidden;}div.rating-cancel,div.rating-cancel a{background:url(fx/css/movie/delete.png) no-repeat 0 -16px;}div.star-rating,div.star-rating a{background:url(fx/css/movie/star.png) no-repeat 0 0;}div.rating-cancel a,div.star-rating a{display:block;width:16px;height:100%;background-position:0 0;border:0;}div.star-rating-on a{background-position:0 -16px!important;}div.star-rating-hover a{background-position:0 -32px;}div.star-rating-readonly a{cursor:default!important;}div.star-rating{background:transparent!important;overflow:hidden!important;} | | | PHP-Code ENDE: (1 Zeile) | Code markieren | |
Das hier gemacht:
| | PHP-Code Anfang: (36 Zeilen) | Code markieren | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| | /* CSSTidy 1.3: Mon, 20 Feb 2012 07:01:29 -0600 */div.rating-cancel, div.star-rating {
float: left;
width: 17px;
height: 15px;
text-indent: -999em;
cursor: pointer;
display: block;
background: transparent;
overflow: hidden;
}
div.rating-cancel, div.rating-cancel a {
background: url(fx/css/movie/delete.png) no-repeat 0 -16px;
}
div.star-rating, div.star-rating a {
background: url(fx/css/movie/star.png) no-repeat 0 0;
}
div.rating-cancel a, div.star-rating a {
display: block;
width: 16px;
height: 100%;
background-position: 0 0;
border: 0;
}
div.star-rating-on a {
background-position: 0 -16px!important;
}
div.star-rating-hover a {
background-position: 0 -32px;
}
div.star-rating-readonly a {
cursor: default!important;
}
div.star-rating {
background: transparent!important;
overflow: hidden!important;
}
| | | PHP-Code ENDE: (36 Zeilen) | Code markieren | |
Sie könnten jetzt die Datei bearbeiten und wenn Sie fertig sind wieder komprimieren. So einfach kann es sein. Jeder, der sich gedanken um die Performance der Webseite macht sollte dies bei sich ändern.
ShoutBox
Popup
Jetzt Online (0)
