CSS, JavaScript и, блокиране страницата за изтегляне на WordPress

В този пост ще приемем, че сте запознати с инструменти на Google за оптимизиране на скоростта на зареждане на страниците на сайта - PageSpeed ​​Insights. Слушай, сега напишете в сайта си, кликнете «Анализирай».

Добре, а сега - какво този пост?

Аз забелязах, че този елемент е един от най-сложните (трудоемко) и в почти всички сайтове, дори и на много бързо, тя е налице.

Как да го оправя по теория:

Както е случаят и на практика, и в този конкретен случай - за обекти на WordPress?

1. Ние използваме други скриптове зависимостта от JQuery

В правилно скалъпена WordPress тема всички CSS и JS файлове са свързани чрез wp_head () и wp_footer () - това е, и в края съответно.

Също така, файловете имат зависимости, тоест, например fancybox.js щепсел трябва да се свърже след jquery.js. което означава, че ако библиотеката JQuery е в wp_footer (). FancyBox кладенеца не могат да влязат в wp_head ().

Преместете JQuery до долния сайт

Това се прави много просто - с помощта wp_deregister_script () функции. wp_register_script (). wp_enqueue_script () и кука wp_enqueue_scripts (първоначален кука понякога се използват във връзка с is_admin ()). Всичко, което трябва да направите е да въведете кода, за да прочетете в functions.php файла на вашия сайт.

В същото време, нашата работа завършва с JS сигурност увеличение на скоростта ще даде повече и комбиниране на скриптове (т.е. стреля всички тях да се регистрирате и след това просто да свързва своите комбиниран вариант) - но Google сега тя вече не е необходима.

2. CSS асоциация в WordPress

Не забравяйте снимката в началото на статията (10 блокиране CSS ресурси)? Къде е такъв брой CSS файлове, тъй като тема разработчикът трябва да разбере, какво да правя?

Отговорът - от плъгини.

Например «Форма за контакт 7" плъгин свързва свой собствен стил лист, и въпреки, че сам по себе си той е малък, все пак е по-добре да се избегнат ненужни HTTP-заявки.

Нека стъпка по стъпка как да се анализира.

1. Можете да копирате съдържанието на приставки стилове на масата и я поставете в края на основната стилове файл - style.css.
2. Проверка, дали данните са въведени стилове относителни връзки към изображения, например URL адрес ( "изображения / load.gif"). Ако е така, или да ги замени с абсолютна или прехвърляне на изображения от приставката с темата на папката.
3. Отиваш в настройките на плъгина и да видим дали е възможно навсякъде да се отстранят от кърлеж и не свързвайте CSS плъгин. В «формата за контакт 7" това не е възможно, а след това преминете към следващата стъпка.
4. Отсечем файлове чрез functions.php. За стилове «Форма за контакт 7" код ще бъде, както следва:

Понякога с помощта на условни тагове Plugin файлове (като CSS и JS) забраните само тези страници, които не са в употреба.

Добре, с «Форма за контакт 7" измисли как да се разпознават и ID CSS файлове от други приставки?

Да лесно определяне на програмния код на страницата и ние виждаме, че подобна картина:

Миша Rudrastyh

Повече за ускоряването на сайта

• Удобен CSS оптимизатор на работа всеки ден, моя собствен безплатен инструмент за оптимизиране на кода с минимум конфигурация и интуитивен интерфейс.
• Триъгълници, стрели, площади и лимон с помощта на граничен радиус CSS граничните свойства и използване на CSS граница имота и имуществото на граничен радиус CSS3, аз ще ви покажа как можете да създадете стрелки, триъгълници и кръгове, без използването на изображения.
• Какво е CSS-спрайтове и как работят те? Две основни предназначение CSS-спрайтове. Каква е основната грешка nubo-DTP?