Оптимизация (компресия) CSS в скоростта на страница - как да изключите файлове външните стил и се сливат ги в едно, за да се ускори обувка
- CSS оптимизация и компресия Speed Page
- Как да се съчетаят външен CSS в един файл
- Деактивирането на външен CSS да се ускори уебсайт Пример
Здравейте, скъпи читатели на блога KtoNaNovenkogo.ru. Днес искам да се прекъсне традицията (да пише на всички колона равномерно) и да Ви предложим втората част на статията за това как да се увеличи скоростта на изтегляне, което може да се прочете тук.
Фактът, че тя е много по-лесно да пиша, както се казва, без забавяне и не по-късно припомни ", а аз бях в състояние да го направя?", Което е доста трудно, особено след известно време.
Нека да продължим нашия опит за увеличаване на скоростта с помощта на инструмент, като например скорост Пейдж, който е инсталиран като допълнение към Mazilu или хром. Всъщност, може би трябва да не са казва в предишната статия, че този плъгин само по себе си нищо, за да се ускори вашия проект не може да се направи, но само дава препоръки за това какво трябва да обърне внимание на първо място. Оказва се, че самият той може да бъде нещо лошо.
CSS оптимизация и компресия Speed Page
В последната статия ние разгледахме подробно как да инсталирате Speed Page плъгин и как да конфигурирате оптимално кеширане на статични обекти (изображения, скриптове, стилни страници) в браузърите на потребителите.
След като направите настройките на контакт на уеб сървъра, плъгина е спрял да ругае силно намаляване на скоростта се дължи на «браузър кеширането ливъридж»:
В действителност, Page Speed показва, че почти всички файлове стил, които се зареждат в браузъра на посетителя с уеб страницата на моя блог, могат да се оптимизират значително (компресирани), за да се намали теглото си.
Ако кликнете върху знака плюс до «Минимизиране CSS», той се отваря списък с обекти, които би било желателно да се излагат оптимизация (компресия):
Но най-забележителното е, че цялата работа по оптимизация (компресия) ще направи приставката по себе си. Разгледайте внимателно в края на линията, с името на всеки файл неоптимизирана стил в своята кутия, ще бъдете помолени да изглежда оптимизиран (компресиран) версия, и ако е необходимо, и да изтеглите най-отърве от боклука открих Cascading Style Sheets, което ще позволи, дори и малко, но да се увеличи скоростта на изтегляне сайт.
Съдия за себе си, така че той погледна, преди да да прокара в Speed Страница:
И изглежда след оптимизация:
Така че, за това ще трябва да изтеглите само линк «Запиши като» на компресиран вариант. Изтегляне?
Сега се свържете с FTP, отидете в папката, в която живеете оригинален стилове файл (вж. Пътят в скоростта на прозореца Page) и замени стария некомпресирани в нов (едно, че сте оптимизиран), не забравяйте да му се даде същото име като и оригинален, в противен случай лист каскадния стил няма да работи. Мустаци, да се насладите на тези милисекунди, които ускорят зареждането на вашия сайт.
Но в допълнение към основната CSS файл, който обикновено върви ръка за ръка с темата, която използвате за регистрация в прозореца на Page Speed можете да видите същия стил, аз открих, и тези, които положи използвате плъгини и разширения за WordPress (или всеки друг двигател, който използвате). По принцип, можете просто да ги стиснете, както е описано по-горе просто.
Как да се съчетаят външен CSS в един файл
Но най-добрият вариант би бил да се съчетаят всички външни CSS в една и само след това се компресира чрез Page Speed. Това ще бъде идеална възможност, която позволява да се получат няколко милисекунди в изтеглянето скорост. Всъщност, самата плъгин предлага само като опция в «Комбинирайте външни CSS»:
Можете, разбира се, да влязат код щепсела и изключете стилове от там, но ако се актуализира разширяването, може да се наложи отново да се рови в червата на плъгина за системно неизпълнение. За WordPress има начин да се реши този проблем е централизирана от известните ви functions.php файл. които трябва да присъстват в папката с темата, която използвате за регистрация:
По този начин, ние да заличи регистрацията на стила на някои плъгини за WordPress. В резултат на това отделните CSS файлове, тези плъгини, няма да бъдат заредени в браузърите на посетителите.
И дори и в случай на актуализиране на някой от тях, нищо няма да се промени и няма да се налага отново да се копае в кода си. Ами, защото те не носят достатъчно често, така изкусно далеч, ние спаси голяма част от нашето време и нерви.
Изглежда, че всичко е просто - изключи и всички, можете да забравите за нея. Така че, не нека. Предварително защото все пак трябва да намерите кода за всеки WP плъгин (който забранява podgruzku стилове) регистъра, което е отговорно за тяхната връзка.
Ако погледнем по-отблизо в кода, ще забележите една линия по-горе, в който са изброени същите тези регистри:
Т.е. например за WP-PageNavi прекрасен WordPress плъгин страниране регистър ще се нарича «WP-pagenavi», както и за плъгина Коментар Форма Quicktags - «CFQ». Ако използвате едни и същи разширения като мен, не може да се изкачи в тяхната PHP код, и назаем регистри от горния код.
Но с блокирането на всички плъгини с стайлинг вашите собствени файлове, трябва да се помни, за да копирате цялото съдържание на най-изключен CSS, да се обединят в общ файл от папка дизайн тема а (Обадих style.css). Ясно е, нали?
В противен случай, например, SyntaxHighlighter Evolved, с което толкова красиво декорирани кода от картинката по-горе, просто няма да работи правилно. Като цяло, красотата ще изчезне, защото а именно в стила на плъгина е дадена такава красива гледка и подчерта различен код на страниците на моя блог.
Може би сте си представите какво става. Това CSS имот може да бъде, например, има следния вид:
Запис URL (flags.png) означава, че на снимката се нарича flags.png ще трябва да се търси в същата папка като самостоятелно Стиловете по делото. Факт е обаче, че когато копирате съдържанието на всички стилове на плъгини, тогава те със сигурност ще бъдат използвани тук са относителни пътища към изображения.
Това ще доведе до факта, че WordPress не мога да намеря снимката в определеното относителния път. В крайна сметка, те все още остават в папката плъгини. Ето защо, чрез комбиниране на CSS трябва да задължително да замени относителния път до фоновото изображение на абсолютното, с нещо като това:
След като направите това, всички от фонови изображения, използвани плъгини, в която сте изключили собствените си стилове, ще се върне на мястото си. Така че, мисля, че може да се оправя с това.
Между другото, след като имате всичко кода за стил ще бъде в една и съща генерала аз открих, не забравяйте, че отново се промъкне Скорост на страниците. намери в своя прозорец линия, наречена Минимизиране CSS и щракнете върху знака плюс до надписа, и след това да копирате файл оптимизиран «Запиши като". На следващо място, на мястото на оригиналния файл в папката с WordPress тема дизайн на която използвате.
Деактивирането на външен CSS да се ускори уебсайт Пример
Сега позволим конкретен пример аз ще се опитам да ви покажа къде да търсите за името на регистрирате WordPress плъгин ви позволява да забраните podgruzku стайлинг му. Всъщност, за да търсят правото, ние трябва да се регистрирате файл с разширение PHP от папката с приставката. Като цяло, всички те живеят в една и съща папка:
Следователно, необходимо е да търсите желаната директория. Нека разгледаме един пример SyntaxHighlighter Evolved, като той не е съвсем типична ситуация е да се използват няколко CSS файлове, в зависимост от опциите, които можете да избират в настройките на плъгина дизайн.
Както можете да видите, че съм избрал вида, който е бил във втората версия на плъгина, и цветовата схема се използва SyntaxHighlighter подразбиране ". Сега аз трябва да отида да си папка чрез свързване в блог чрез FTP:
копирате съдържанието на две от файлове на CSS, които планираме да деактивирате: shCore.css и shThemeDefault.css. защото за тях това ни показва с пръст Page Speed (добре, в настройките, които съм избрал темата по подразбиране ", за което е логично, CSS е необходимо с подходящо име).
След това, като отворите за редактиране:
Вижте какво ще ни позволи да деактивирате регистри podgruzku стилове shCore.css и shThemeDefault.css. Копиране на имената им (в моя случай това ще бъде: SyntaxHighlighter-тема-подразбиране и SyntaxHighlighter-ядро) и се добавя към functions.php (от папката за вашата тема дизайн), две допълнителни линии в описания по-горе просто фрагмент от код:
И така се повтаря за всяка WordPress плъгин, който искате да деактивирате podgruzku стилове. Надявам се, че всичко, което стана ясно. Ако не, тогава се опитайте да прочетете отново, защото темата не е прекалено и лесен за разбиране, макар че аз се опитвам да ненужно усложнява и да не се тежест на текста (които се нуждаят от информация, тъй като по-просто - толкова по-добре).
В резултат на това всички манипулации във вашия functions.php е списък от низове с регистрите на плъгини, чиито стилове искате да деактивирате. И в един общ CSS файл в папката с темата на проекта, ще включва всички стилистични код на сайта си. За пореден път - не забравяйте да компресирате или, с други думи, за да се оптимизира style.css Скорост на страниците чрез процеса, описан по-горе.
Сподели в социалното. мрежи