Tag: compress

GZIP & HTML Compress – WordPress Plugin

11.09.2009 / tosiek / 7 komentarzy

GZIP & HTML Compress – WordPress Plugin

Plugin do WordPressa, który po prostu usuwa zbędne znaki dzięki czemu rozmiar dokumentu przesyłanego do przeglądarki jest średnio o ~ 10% mniejszy dzięki temu zaoszczędzamy transfer oraz przyspieszamy wczytywanie strony.

Działa z osadzonym kodem JavaScript (<script></script>) oraz CSS (<style></style>), działa także ze znacznikami PRE, TEXTAREA (<pre></pre>,<textarea></textarea> – nie są one w ogóle kompresowane)

Dodatkowo osadzony JavaScript kompresuje za pomocą specjalnych tablic, niezależnie od kodu html tak samo z osadzonym CSS, wykorzystuje w tym celu dwie funkcje, pierwsza z nich to compress CSS code – compressor, a druga to compress JavaScript code – compressor.

Dodatkowo uruchamia kompresję GZIP, która powoduje zmniejszenie rozmiaru wysyłanego dokumentu do przeglądarki o około ~ 80% (polega to na tym, że jeśli przeglądarka obsługuje kompresje GZIP przesyłany jest do niej skompresowany dokument który jest o około ~ 80% mniejszy następnie przeglądarka go rozpakowuje i odczytuje, jeśli przeglądarka nie obsługuje GZIP dokument przesyłany jest bez kompresji)

Kategorycznie zalecam korzystanie z tej wtyczki równocześnie z wtyczką WP Super Cache!!!

Co dokładnie jest usuwane?
Otóż w kompresji HTML usuwane są takie zbędne śmieci jak:

Przejście do nowej linii (new line)
Powrót karetki (carriage return)
Usuwana jest Vertical Tab
Wszystkie tabulatory(oraz więcej wystąpień niźli jedno) zamieniane są na pojedynczą spację
Puste bajty, znaki zerowe
Każde wystąpienie spacji powyżej jednej jest zamieniane na zwykłą pojedynczą
Komentarze HTML, za wyjątkiem komentarzy warunkowych dla przeglądarki Internet Explorer

Zmniejsz zużycie transferu oraz przyspiesz ładowanie i renderowanie stron w wordpressie!

Dla porównania przykładowa strona która korzysta z tej wtyczki, oraz ta sama strona bez wtyczki (obydwie przy wykorzystaniu kompresji GZIP)

Wtyczka włączona?	Oryginalny rozmiar (w bajtach)	Rozmiar po kompresji GZIP(w bajtach)	Procent kompresji GZIP(w procentach)
Tak	16,454	5,900	64.1
Nie	18,013	6,544	63.7

Dodatkowo prócz oszczędności i szybkości utrudniamy złodziejom kodu pracę… Znów przypominam, że zalecam korzystanie z tej wtyczki przy równoczesnym wykorzystaniu WP Super Cache.

Nazwa wtyczki: GZIP & HTML Compress
Najnowsza wersja: 0.1
Znane błędy:

W wersji 0.1 wyłączona została kompresja osadzonego kodu JavaScript
Brak innych błędów

Changelog

Version: 0.1 – first release, no compress embeded script’s

Download

Download: GZIP & HTML Compress 0.1

Installation

Skopiuj folder /gzip-html-compress/ do folderu /wp-content/plugins/. Następnie przejdź do panelu administratora do sekcji: Wtyczki i odnajdź na liście wtyczkę o nazwie: GZIP & HTML Compress, tuż pod jej nazwą wciśnij przycisk Aktywuj.

Jeśli używasz WP Super Cache po włączeniu wtyczki wyczyść cache i dopiero efekty będą widoczne.

compress JavaScript code – compressor

21.08.2009 / tosiek / 3 komentarze

compress JavaScript code – compressor

Kompresja kodu JavaScript jest gotową funkcją PHP która za pomocą wyrażeń regularnych usuwa zbędne znaki ze skryptu JavaScript co powoduje zmniejszenie jego rozmiaru. Skutkiem tego jest przyspieszona obsługa skryptu (jego wykonanie) jak i szybsze wczytanie pliku se skryptem lub strony z osadzonym skryptem w znacznikach <script></script> co powoduje także zmniejszenie zużycia transferu, który jest wymagany do wysłania nie skompresowanego kodu w pliku do klienta (przeglądarki).

Działanie można przetestować na: Kompresja JavaScript

Aktualnie usuwane lub zamieniane są zbędne rzeczy takie jak

Tabulator Pionowy – vertical tab – 0×0B (\x0B)
Znak powrotu karetki – 0×0D (\r, \x0D)
Tabulatory zmienia na pojedynczą spację – TAB – 0×09 (\t, \x09)
Każdą podwójną spację (i więcej np. 3, 4 i tak dalej) zamienia na pojedynczą 0×20 – (\x20)
Wszystkie komentarze
Pojedyncze spacje tylko w określonych miejscach (określonych w zmiennej $char_js)
Ewentualnie przejścia do nowych linii – 0×0A (\n, \x0A)

Domyślnie nie są usuwane spacje powiązane ze zmienną $char_js oraz przejścia do nowych linii!!! Można uzyskać ten efekt przekazując odpowiednie wartości do funkcji.

function compress_javascript($js_code,$special_chars=false,$remove_new_lines=false) {
/*********************
//
//Compress JavaScript by tosiek - https://tosiek.pl/
//
*********************/
//
// Arrays
//
//array with pattern
	$pattern=array(
		//remove carriage return
		"/\x0D/",
		//remove vertical tab
		"/\x0B/",
		//Replace tabulators to one space
		"/\x09{1,}/si",
		//Replace more then one spaces to once
		"/\x20{2,}/",
		//Remove JS comments and HTML
		'/((?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:\/\/.*))/','/<!--.*?-->/si',
	);
	if($special_chars==true) {
	//Special JavaScript characters after and before the spaces are removed
		$char_js='(|)|=|;|:|?|\'|"|+|-|\*|\/|%|!|<|>|&|\|[|]|{|}';
		//remove spaces with $char_js, after and before
		$pattern[]="/([{$char_js}]+)\x20/";
		$pattern[]="/\x20([{$char_js}]+)/";
	}
	if($remove_new_lines==true) {
		$pattern[]="/\x0A/";
	}
	//array with replacement
	$replacement=array(
		//remove carriage return
		'',
		//remove vertical tab
		'',
		//Replace tabulators to one space
		"\x20",
		//Replace more then one spaces to once
		"\x20",
		//Remove JS comments and HTML
		'','',
	);
	if($special_chars==true) {
	//remove spaces with $char_js, after and before
		$replacement[]='$1';
		$replacement[]='$1';
	}
	if($remove_new_lines==true) {
		$replacement[]='';
	}
	$start=strlen($js_code);
	//Compress JS with regular expressions
	$replace=preg_replace($pattern,$replacement,$js_code,-1);
	// strlen() after compress
	$final=strlen($replace);
	//counts the difference in characters
	$exhed=$start-$final;
	//counts the difference in percentages
	$compression=round(($exhed)/$start*100,2);
	return $replace."\n//Before compress $start bytes; After compress: $final bytes; $exhed ({$compression}%)";
}

Przykładowe użycie funkcji bez dodatkowych wartości (bez usuwania spacji oraz nowych linii)

<?php
$code='if ( top.location  !=  self.location   )
	{ 
top.location.href =  self.location;
}';
$code = compress_javascript($code);
echo $code;
?>

Wyświetli nam:

if ( top.location != self.location )
 { 
top.location.href = self.location;
}
//Before compress 82 bytes; After compress: 77 bytes; 5 (6.09999999999999964472863%)

Lecz nadal widać zbędne spację więc podajmy funkcji jako drugi argument wartość prawda (true) co spowoduje usunięcie zbędnych spacji przy znakach specjalnych

$code = compress_javascript($code,1);

Da nam efekt:

if(top.location!=self.location)
{
top.location.href=self.location;
}
//Before compress 82 bytes; After compress: 68 bytes; 14 (17.0700000000000002842171%)

Do zupełnej kompresji kodu możemy dodać trzeci argument, który usuwa znaki nowych linii (tylko dla znawców JavaScript)

Usuwanie znaków specjalnych i nowych linii

$code = compress_javascript($code,1,1);

da efekt:

if(top.location!=self.location){top.location.href=self.location;}
//Before compress 82 bytes; After compress: 65 bytes; 17 (20.7300000000000004263256%)

Usuwanie nowych linii, bez usuwania spacji obok znaków specjalnych

$code = compress_javascript($code,0,1);

da efekt:

if ( top.location != self.location ) { top.location.href = self.location;}
//Before compress 82 bytes; After compress: 74 bytes; 8 (9.75999999999999978683718%)

compress CSS code – compressor

09.08.2009 / tosiek / 0 Comments

compress CSS code – compressor

Kompresja kodu CSS, gotowa funkcja PHP która za pomocą wyrażeń regularnych usuwa zbędne znaki z kaskadowego arkusza stylów – CSS tym samym zmniejszając jego rozmiar, co prowadzi do szybszego wczytania strony (stylów) jak i zmniejszenia zużycia transferu (należy pamiętać że plik ze stylem jest wczytywany z każdym żądaniem przeglądarki, dlatego nawet mała różnica rozmiaru ma znaczenie)

Działanie można przetestować na: Kompresja CSS

Aktualnie funkcja usuwa wszystko co nie potrzebne, zachowuje składnię CSS. Dzięki zachowaniu składni arkusz po kompresji będzie działał prawidłowo.

Aktualnie usuwane zbędne rzeczy takie jak:

Tabulatory – TAB – 0×09 (\t, \x09)
Tabulator Pionowy – vertical tab – 0×0B (\x0B)
Znak nowej linii – 0×0A (\n, \x0A)
Znak powrotu karetki – 0×0D (\r, \x0D)
Puste znaki – 0×00 (\0, \x00)
Każdą podwójną spację (i więcej np. 3, 4 i tak dalej) 0×20 0×20 – (\x20\x20)
Każdą pojedynczą spację, lecz tylko w wybranych i dozwolonych miejscach (zmienna $char_css)
Wszystkie komentarze
Skraca kolory o ile to możliwe w zapisie HEX z np. z #aaffaa na #afa
Usuwa średnik z ostatniej reguły, ponieważ jest zbędny

Zostało dodane usuwanie zbędnych spacji po znaku @ (małpa) oraz zmiana tabulatorów od jednego w górę na pojedynczą spację, oraz zamiana spacji od dwóch w górę na jedną

function compress_css($css_code) {
/*********************
//
//Compress CSS by tosiek - https://tosiek.pl/
//
*********************/
//Special CSS characters after and before the spaces are removed
//do not use ')' !!! - this causes a bug in Internet Explorer
	$char_css='{|}|(|;|:|,|\'|"|@';
	//pattern to shortening hex colour
	$hex_char='[a-f0-9]';
	//
	// Arrays
	//
	//array with pattern
	$pattern=array(
		//new lines(\n and \r)
		"/\x0A/","/\x0D/",
		//vertical tab and tab
		"/\x0B/","/\x09{1,}/",
		//NULL bytes (\0)
		"/\\x00/",
		//double spaces and more, more
		"/\x20{2,}/",
		//remove spaces with $char_css, after and before
		"/([{$char_css}]+)\x20/","/\x20([{$char_css}]+)/",
		//remove all comments
		"!/\*[^*]*\*+([^/][^*]*\*+)*/!",
		//short hex colour
		"/#({$hex_char})\\1({$hex_char})\\2({$hex_char})\\3/i",
		//remove last ';'
		"/;}/",
	);
	//array with replacement
	$replacement=array(
		//new lines(\n and \r)
		'','',
		//vertical tab and tab
		'',"\x20",
		//NULL bytes (\0)
		'',
		//double spaces and more, more
		"\x20",
		//remove spaces with $char_css, after and before
		'$1','$1',
		//remove all comments
		'',
		//short hex colour
		'#\1\2\3',
		//remove last ';'
		"}",
	);
	// strlen() before compress
	$start=strlen($css_code);
	//Compress CSS with regular expressions
	$replace=preg_replace($pattern,$replacement,$css_code,-1);
	// strlen() after compress
	$final=strlen($replace);
	//counts the difference in characters
	$exhed=$start-$final;
	//counts the difference in percentages
	$compression=round(($exhed)/$start*100,2);
	//Return compress CSS code with info (comment) in new line
	return $replace."\n".'/* Poczatkowy rozmiar: '.$start.' bajtow; Po kompresji: '.$final.' bajtow; Zmniejszono o: '.$exhed.' bajtow ('.$compression.'% procent) */';
}

przykładowe wykorzystanie z użyciem pliku style.css:

<?php
$style = file_get_contents(dirname(__FILE__).'style.css');
$style = compress_css($style);
echo $style;
?>

Podany powyżej kod po wywołaniu go, wyświetli nam skompresowany kod z pliku style.css wraz z informacją o rozmiarze przed i po kompresji oraz oszczędności w procentach.

/* Poczatkowy rozmiar: 37 bajtow; Po kompresji: 14 bajtow; Zmniejszono o: 23 bajtow (62.16% procent) */

Przykładowy kod przed kompresją (należy zwrócić uwagę na niewidoczne znaki takie jak spacje, tabulatory i przejścia do nowych linii – entery)

	*  {
margin:   0		 6;
  }

Oraz po kompresji:

*{margin:0 6}
/* Poczatkowy rozmiar: 37 bajtow; Po kompresji: 13 bajtow; Zmniejszono o: 24 bajtow (64.86% procent) */

Top Posts & Pages

Najnowsze komentarze

Tag: compress

GZIP & HTML Compress – WordPress Plugin

GZIP & HTML Compress – WordPress Plugin

Changelog

Download

Installation

compress JavaScript code – compressor

compress JavaScript code – compressor

compress CSS code – compressor

compress CSS code – compressor