WordPress: Обединете CSS файловете за по-малко HTTP заявки

24 май 2014 | Оптимизация
Обединете CSS файловете за по-малко HTTP заявки

С добавянето на плъгини към вашия WordPress сайт или блог, вие добавяте различни функционалности. Всяко нещо обаче си има цена. Много от плъгините извикват в хедъра свой собствен CSS файл. Освен това има и доста теми с повече от един файл със стилове. Ако тествате скоростта на зареждане на сайта с някой от инструментите за тази цел, една от препоръките за подобряване на работата е намаляването на HTTP заявките (HTTP requests). За целта е необходимо CSS файловете от темата и плъгините да се обединят в един. Това естествено е съвсем логично – като намалите броя на файловете, които браузърът трябва да изтегли за да визуализира вашия сайт, скоростта му на зареждане (load speed) ще се увеличи. Имайте предвид, че размерът на новополучения обединен файл може да стане доста голям, което да не е по-добрият вариант от сервирането на отделни файлове.

1. Що се отнася до стиловете в самата тема, решението е много просто – копирайте съдържанието от всички допълнителни файлове и го поставете в основния style.css и премахнете от хедъра пътя към останалите. ВАЖНО: Внимавайте да сложите съдържанието на reset.css най-отгоре в style.css файла.

2. С плъгините имате малко повече работа. Най-напред по същия начин копирайте съдържанието на техните CSS и го поставете в основния на темата ви, за предпочитане най-отдолу. Ако искате можете да си поставите коментари, за да ви е удобно после да се ориентирате кой код за какво служи.
След това трябва да намерите къде в съответния плъгин се извиква неговия CSS файл и да го закоментирате или изтриете. Бъдете много внимателни да не изтриете по погрешка нещо, което да „счупи“ плъгина. Затова най-напред си направете резервни копия на файловете, които ще редактирате, за да може при нужда да ги върнете веднага.

Тук ще ви дам конкретен пример с два от най-често срещаните плъгини – Contact Form 7 (Форма за контакти) и NextGEN Gallery (Галерия).

За Contact Form 7:
Отворете файла controller.php, който се намира във /wp-content/plugins/contact-form-7/includes/.
В него намерете и изтрийте или закоментирайте следния код:

wp_enqueue_style( 'contact-form-7', wpcf7_plugin_url( 'stylesheet.css' ),
		array(), WPCF7_VERSION, 'all' );

За NextGEN Gallery:
Отворете файла nggallery.php, намиращ се във /wp-content/plugins/nextgen-gallery/, и изтрийте редовете:

// check first the theme folder for a nggallery.css
		if ( nggGallery::get_theme_css_file() )
			wp_enqueue_style('NextGEN', nggGallery::get_theme_css_file() , false, '1.0.0', 'screen'); 
		else if ($this->options['activateCSS'])
			wp_enqueue_style('NextGEN', NGGALLERY_URLPATH . 'css/' . $this->options['CSSfile'], false, '1.0.0', 'screen');

ЗАБЕЛЕЖКИ:
– Имайте предвид, че всеки ъпдейт на плъгините ще ресетне цялата свършена от вас работа, тоест трябва отново да повторите тези стъпки.
– За по-голяма ефективност компресирайте CSS файла, за да намалите размера му. За целта можете да използвате безплатни онлайн инструменти, какъвто е CSS Compressor.
– За препоръчване е да се направи обединяване и компресиране и на JS файловете.