Оптимізувати код HTML та каскадні таблиці стилів (CSS) потрібно для того, щоб прискорити процес завантаження сайту та контенту, розміщеного на ньому. Економія часу та трафіку, загалом, через довгий термін після оптимізації, вийде суттєвою, навіть якщо зовні зміна швидкості буде не дуже помітною.

Оптимізація HTML-коду

Для того, щоб HTML-код сприяв швидкому завантаженню сайту, він повинен відповідати кільком умовам:

Бути простим та інформативним. Перевіривши його на валідність, потрібно виправити помилки, щоб ботам було легко аналізувати його. Код має чітко представляти структуру сторінки.
Основні складові сторінок, такі як заголовки, покажчики, блоки інформації повинні бути легко та швидко обумовлені.
Звільнення коду від зайвих відомостей, винесення їх у окремі файли (наприклад, можна винести CSS і JS), підвищить швидкість завантаження, що також полегшує роботу ботов.

Досягши виконання цих умов, сайт можна зробити більш швидким, зручним і підвищити ефективність індексації його роботами пошукових систем.

Зменшення обсягу коду та оптимізація CSS

Зробити код сайту простіше можна, зменшивши його обсяг. Для цього необхідно виконати кілька операцій.

Насамперед слід уникати флеш-технологій, JavaScript, фреймів, тексту, представленого картинкою. Усі елементи, які можливо, слід оформити в окремих, зовнішніх файлах (наприклад, CSS та JS, як зазначалося вище). Допоможуть для оптимізації коду спеціальні плагіни. Наприклад, можна встановити плагін Autoptimize, який автоматично оптимізує код HTML, CSS, JS (якщо поставити відповідні галочки). Необхідно налаштувати грамотну та зручну навігацію по сайту, яка буде зрозуміла користувачам і коректно розпізнається пошуковими системами. Це збільшить швидкість, якість завантаження та індексації сайту.

Щодо оптимізації CSS, то її можна зробити самостійно або довірити це спеціальному ресурсу чи програмі. Ручна оптимізація – трудомісткий та тривалий процес, до того ж можна пропустити якісь помилки. Програма чи сервіс для оптимізації якісніше усунуть недоліки, але можуть порушити деякі функції, які працювали на сайті, і після перевірки може некоректно відображатись контент, тому їхню роботу потрібно коригувати.

Деякі способи покращити структуру CSS у ручному режимі:

Видалити зайві прогалини та розриви рядків, які перевантажують файл CSS та ускладнюють роботу роботів;
Прописувати узагальнюючі властивості замість схожих команд, що кілька разів повторюються;
Використовувати лаконічні, зрозумілі описи у коментарях;
Незвичайні шрифти прописувати за допомогою стилів, а чи не зображень;
Для картинок створювати alt і title (різні кожного зображення), щоб їх зміст розпізнавалася ботами пошукових систем;
Застосовувати до заголовків інструменти H1 і далі, щоб вони коректно розпізнавались при індексації;
Прописувати в keywords тільки ключові слова, що використовуються на сторінці, мінімізувати їх кількість;
Використовувати різноманітні та короткі мета-теги.

CSS та HTML оптимізатори

Зручно та швидко здійснити оптимізацію безпосередньо в браузері можна за допомогою спеціальних сервісів, наприклад:

CleanCSS.com;
CSS Optimizer;
CSS Compressor;
CY-PR.com;
плагін Autoptimize.

Фахівці в SЕО та IT радять користуватися CleanCSS.com, оскільки він дозволяє вибрати ступінь стиснення від низького до найвищого або підібрати індивідуальні налаштування. Після високого та найвищого рівнів оптимізації код сайту набуває практично нечитаного вигляду, і вносити до нього зміни буде практично неможливо. Тому спочатку слід скористатися стандартною оптимізацією. Можна вибрати режими стиснення контенту або оптимізацію окремих параметрів: стиснення шрифтів, зображень, видалення пробілів.

На ресурсі CY-PR.com є схожий інструмент для оптимізації, який полегшує структуру CSS на 25-30%, але тут немає можливості сформувати файл з кодом після виконання операції.

Інші послуги досить радикально можуть змінити код так, що деякі функції на сайті перестануть працювати. Тому з їх допомогою краще проводити лише локальні зміни у конкретних параметрах сайту.

Після оптимізації слід перевірити працездатність сайту, коректне відображення дизайну, швидкість завантаження. Нормальною вважається ситуація, коли сторінки та опції користувача завантажуються не більше 3-5 секунд.

Для того щоб перевірити ступінь оптимізації та зрозуміти, наскільки ефективно тепер прописаний HTML-код, можна скористатися такими сервісами, як:

optimization.com;
Портал seo-чекліст;
плагін Firebug.

Ці інструменти допоможуть перевірити, чи все зроблено для зменшення обсягу HTML-коду та покращення його структури. На ресурсі SEO-чекліст можна перевіряти за списком, що вже було зроблено для оптимізації, а що ще ні, і встановлювати позначку на скоєних справах.

Валідація

Перевірити код сайту на наявність помилок можна за допомогою сервісів перевірки валідації – валідаторів. Ефективна перевірка коду здійснюється за допомогою validator.w3c.org

Якщо система при першій перевірці видасть понад півтисячі помилок, не варто засмучуватися. Після виправлення певного недоліку, можна запускати перевірку знову і помилок стане набагато менше, оскільки один недолік тягне за собою інші і при його виправленні зникнуть.

Сайт із виправленим та оптимізованим кодом має більше шансів на високі позиції у видачі, ніж ресурс із перевантаженим HTML-кодом, у якому присутні помилки.

Доброго дня! Давно у мене не було нотаток про технічну оптимізацію, тому сьогодні розповідь піде про стиск CSS.

Відразу постає питання — а навіщо це потрібно? Відповідь проста: оптимізуючи таблиці стилів знижується завантажуваний обсяг коду, вага файлу style.css. У результаті сторінка поменшає важити, а це економія трафіку і збільшення швидкості завантаження сайту.

До того ж, Google визнає швидкість завантаження інтернет-сторінки як один з пошукової видачі.

Погодьтеся, навіть незважаючи на високу пропускну спроможність сучасних каналів провайдера та повсюдно поширений безлімітний інтернетце вагомий фактор. Тому я настійно рекомендую звертати увагу не тільки на , але і на його розмір.

Як оптимізувати CSS та зменшити розмір файлу

Підійти до оптимізації можна у різний спосіб. Найбезпечніший - ручне чищення файлу стилів. Хоча можна посперечатися, адже людина, яка не знає, може такого наробити, що чорт ногу зломить, та й максимального стиску все одно не домогтися.

Які заходи можна провести за оптимізації CSS:

Видалити селектори, що не використовуються.
Видалити закоментовані рядки, що не використовуються.
Зменшити обсяг коментарів у файлі стилів. Завжди зручно, коли елементи згруповані за загальною ознакою та мають невидимі для очей звичайних користувачів коментарі. Але найчастіше, щоб досягти високого ступеня стисливості CSS, доводиться їх позбуватися. Щоб при подальшій роботі простіше орієнтуватися в коді, Ви можете їх використовувати, але залишайте короткі описи.
Видалити порожні рядки та пробіли. Але занадто не варто захоплюватися, код повинен залишатися читаним, щоб легко вносити правки.
Поєднати елементи з однаковими властивостями.
Оптимізувати шрифти. Найкраще використовувати один шрифт. У кожному окремому блоці сторінки використовувати різний шрифт - поганий тон і, як бачите, перевантажує файл стилів.
Оптимізувати кольори. Це зробити досить просто, але складно пояснити словами, тому наведу наочні приклади:

#ffffff замінити на #fff #112233 замінити на #123

Оптимізувати відступи. Знову ж таки на прикладах:

padding :10px 20px 10px 20px; замінити на padding: 10px 20px; padding :10px 0px 0px 0px; замінити на padding :10px 0 0; padding :10px 10px 10px 10px; замінити на padding: 10px;

Звичайно можна знайти й інші шляхи оптимізації, але на цьому я, мабуть, зупинюся і продовжу свою розповідь про онлайн інструменти оптимізації CSS.

Оптимізація CSS за допомогою онлайн-сервісів

До всіх онлайн сервісамнеобхідно ставитися з особливою обережністю та уважністю, щоб не наламати дров. І в обов'язковому порядку робити резервну копію, втім дана рекомендація відноситься до всіх файлів, які редагуються.

Існує достатня кількість онлайн-інструментів (CleanCSS, Online CSS Optimizer і т.д.), здатних виконати оптимізацію CSS. Вони мало чим відрізняються один від одного, часто використовують одні й ті ж алгоритми та бібліотеки стиснення, наприклад YUICompressor або CSSTidy.

Докладніше зупинюся на тому, яким найчастіше користуюся. Це CSS оптимізатор на порталі для веб-майстрів CY-PR.com.

Щоб розпочати роботу з текстовим полем, необхідно вставити фрагмент CSS або повний вміст файлу стилів. Праворуч у списку, що розкривається, скористатися швидкими налаштуваннями :

максимальне (код не читаємо, найменший розмір);
висока (переносна читаність, невеликий розмір);
стандартне (баланс між читальністю та розміром);
низький (читаний код);
вибрати самому (ввести параметри нижче).

Для безпечної оптимізації рекомендується використовувати стандартний стиск. Заради інтересу скористайтеся іншими швидкими налаштуваннями, але пам'ятайте резервної копії. Після того, як параметри стиснення CSS задані, можна приступати до безпосередньої роботи скрипта, натисканням кнопки Оптимізувати CSS.

Результати виводяться нижче із зазначенням вихідного та оптимізованого розміру коду, а також коефіцієнт стиснення у відсотковому співвідношенні:

І останній додаток: намагайтеся об'єднувати CSS файли. Деякі плагіни використовують свої стилі, що зберігаються в окремих файлах, було б непогано об'єднати їх в один. Наступного разу в рамках цієї рубрики я розповім як можна автоматично отримувати на виході стислий CSS. До швидкої зустрічі!

Продовжую , тепер переді мною ще один пункт, який мені підказав Google: Видаліть із верхньої частини сторінки код JavaScript та CSS, що блокує відображення. Зараз спробую розібратися, що там зайвого та як видалити зайвий JavaScript та CSS?

Тести, я нагадаю, я проводжу цим сервісом: , де щодо JavaScript і CSS мені було надано конкретну пораду:

Як бачите, у мене це сама велика проблема, 8 скриптів підвантажується відразу і тому перший екран завантажується не так швидко, як хотілося б. Також є 10 css файлів, які теж не оптимізовані. Ну що ж, вирішуватимемо проблему!

З цього питання претензії приблизно такі:

Видаліть JavaScript, що перешкоджає відображенню:

https://prostolinux.ru/…-includes/js/jquery/jquery.js?ver=1.10.2
https://prostolinux.ru/…s/jquery/jquery-migrate.min.js?ver=1.2.1
https://prostolinux.ru/…query-ui-1.8.10.custom.min.js?ver=1.8.10
https://prostolinux.ru/…ial-textboxes/js/wstb.js.php?ver=3.10.60
https://prostolinux.ru/wp-includes/js/tw-sack.min.js?ver=1.6.1

Нещодавно знайшов цікаве рішення: у function.php потрібно вставити код, який даватиме команду потрібним нам скриптам завантажуватися не відразу:

function jquery_in_footer() ( wp_register_script('tie-tipsy', get_template_directory_uri() . '/js/jquery.tipsy.js', array('jquery')); wp_register_script('tie-easing', 'get js/jquery.easing.1.3.js', array('jquery')) ;

У прикладі додано два скрипти, але ми додаємо скільки завгодно, і саме ті, що гальмують завантаження сторінки. Спробував застосувати це рішення — у мене воно не спрацювало, може, щось не так робив?

Сам google радить у скрипт вставити атрибут async, який робив би його завантаження асинхронним. Але це рішення підходить тільки для зовнішніх скриптів, наприклад цей атрибут async можна вставити в script реклами Яндекс Директ, якщо у вас його реклама виводиться в першому екрані. Яндекс має і асинхронний код, але він у мене викликав проблеми — якщо один блок з асинхронним завантаженням, а другий ні, то показуватиметься лише один з них. Але зараз не про це…

Оптимізувати плагіни таким чином важко, потрібно лізти в код кожного плагіна і прописувати до нього цей атрибут, або його альтернативу. Я не програміст і так чинити не буду. До того ж якщо ви постійно оновлюєте плагіни, то всі ваші праці пропадуть після оновлення.

На подив я знайшов інше, дуже просте вирішення цього питання — встановив плагін Asynchronous Javascript. Після його встановлення отримав результат:

Як бачите, залишився лише один скрипт, і це скрипт самого плагіна. Після встановлення особисто у мене проблем з відображенням теми сайту не було, але якщо у вас виник якийсь одвірок, і потрібно, щоб якийсь скрипт завантажувався відразу, то в налаштуваннях плагіна можна додати його у виключення:

Ось так просто вирішується перший пункт, але як видно цього ще мало, потрібно оптимізувати css, як це зробити?

Як оптимізувати роботу CSS?

Нагадаю список претензій:

Оптимізуйте роботу CSS на наступних ресурсах:

https://prostolinux.ru/…wp-special-textboxes.css.php?ver=3.10.60
https://prostolinux.ru/…plugins/wp-ds-blog-map/wp-ds-blogmap.css
https://prostolinux.ru/…t/themes/rockwell_new/rockwell/style.css

В ідеалі потрібно зробити так: взяти всі дані з цих файлів css і перемістити в основний stile.css, а в самих плагінах відключити запит до них. Але як розумієте - це справа довга і нудна, що таїть під собою багато підводних каменів. Може бути в майбутньому я так і зроблю, але поки що у мене немає стільки часу та досвіду.

Вирішити ж питання можна встановленням плагіна, який сам поєднає всі стилі в один файл. Плагіна, який би виконував тільки цю функцію, не знайшов, тому розповім про плагін, який робить все відразу, і видаляє скрипти, і оптимізує css.

Як оптимізувати все одразу?

Я вирішив собі встановити плагін Autoptimizeщо оптимізує і скрипти, і css одночасно. Після встановлення плагіна потрібно лише зайти в його налаштування та поставити галочки в потрібному місці:

Після цього Google Page Speed видає таке:

Жодного скрипта не вантажиться, тільки два файли css, які включають всі стилі, а всі скрипти переміщуються в область підвалу. Якщо тепер подивитися на код сторінки, то там оптимізована КАША, в якій без пляшки не розібратися.

Спочатку я подумав, що цей плагін не вирішить моїх проблем повністю, але, як виявилося, це було через те, що я його не до кінця налаштував! Після виставлення галочок у потрібному місці я отримав чудовий результат! ВСІ ПРОБЛЕМИ ЗНИКЛИ!

Щоб так вийшло, потрібно натиснути кнопку вгорі Show advanced settingsі тоді з'являться додаткові налаштування. Потрібно, щоб стояли галочки у пунктах:

Оптимізувати код HTML?

Оптимізувати JavaScript?

Look for scripts only in ? (Deprecated)

Оптимізувати код CSS?

Inline all CSS?

Save aggregated script/css as static files

Після цього правда у мене перестав працювати плагін, який фіксує віджет, але це зовсім не проблема, швидкість завантаження сайту набагато важливіша. А ще важливіше догодити дядькові Гуглу.

Хочу також згадати про один нюанс: у мене на цьому сайті адаптивний шаблон, і якщо використовувати його, то плагін при відображенні мобільної версіїне може усунути всі проблеми до кінця. Коли ж я вмикаю плагін мобільної версії, то жодних помилок не залишається. Я ще раз переконався, що краще за адаптивний дизайн.

Ще один подібний плагін - це WP Minify Fix, робить він те саме, але він мені менше сподобався, а може я просто в ньому не до кінця не розібрався.

Я розумію, що ідеально все це робити без плагінів, вручну, але це дуже довго і моторошно і воно того насправді не варте, адже навіть домігшись оцінки 100, Ви не виведете сайт у топ - швидкість завантаження сайту лише ОДИН із сотні факторів ранжирування, шлях і досить важливий. Але зробити все, що можна — потрібно!

Видалення коду JavaScript та CSS Google PageSpeed

Чи не знайшли відповідь? Скористайтеся пошуком по сайту

Оптимізація веб-сторінок є неймовірно важливою складовою при . До неї відноситься не тільки оптимізація програмного коду сайту, але й оптимізація каскадних таблиць стилів (CSS), яку не враховують багато вебмайстрів.

Як і оптимізація програмного коду, оптимізація CSS потрібна для прискорення завантаження сторінок та економії трафіку. Оскільки файл CSS важить до 100 кб, багато хто не зрозуміє всієї важливості його оптимізації, але якщо підрахувати, скільки часу та трафіку можна заощадити на оптимізованому файлі на рік, ви зрозумієте, наскільки її недооцінювали.

Оптимізувати CSS можна як вручну, так і за допомогою сервісів. Обидва варіанти мають недоліки. Оптимізуючи таблиці вручну, ви можете багато пропустити з уваги, тому оптимізація не буде такою ж ефективною, як машинна. Більше того, ручна оптимізація забере у вас багато часу, оскільки CSS може містити тисячі рядків коду. Однак, машинна оптимізація може видалити важливі рядки, без яких дизайн буде відображатися некоректно. У цій статті ми наведемо корисні поради для тих, хто хоче оптимізувати CSS вручну, а також для тих, хто має намір зробити це за допомогою онлайн-сервісів.

По-перше, обов'язково використовуйте узагальнені властивості. Ви можете заощадити кілька рядків, якщо замість margin-bottom, margin-left, margin-right і margin-top використовуватимете один margin зі значеннями чотирьох попередніх, наприклад: body ( margin: 10px 2px 10px 5px; ).

Використовуйте прогалини з розумом. Пробіли та зайві розриви рядків зазвичай використовуються для підвищення зручності роботи з CSS. Тим не менш, кожен пробіл трохи збільшує вагу файлу. Тому, якщо дизайн сайту вже завершено, нічого не заважає вам повністю позбутися зайвих прогалин.

Ніхто не сумнівається у важливості коментарів. Усунувши їх повністю, вам буде важче знайти потрібну частину коду без плагіна Firebug. Але не слід забувати, що левову частку вмісту файлу style.css займають саме вони. Для того, щоб виправити це непорозуміння, рекомендується використовувати більш короткі описи. Наприклад, замість ///* довгого ліричного відступу */// можна використовувати запам'ятовується /* Logo */.

Є, звичайно ж, і інші способи оптимізації, але набагато простіше звернутися до спеціальних ресурсів, за допомогою яких можна зробити оптимізацію CSS прямо з браузера.

Найзразковішим з них виявився CleanCSS.com. Даний сайт пропонує кілька варіантів стиснення: низький, стандартний, високий, найвищий та власний. Стандартний варіант стиснення є найбільш збалансованим між вагою та читабельністю. Високий і найвищий рекомендується використовувати тільки в тому випадку, якщо ви не будете вносити надалі жодних змін до CSS, бо код стане нечитаним. Також пропонується ряд додаткових опцій, таких як стиснення кольорів та шрифтів, сортування селекторів тощо. Готовий результат можна отримати як у вигляді тексту, так і експортувати у файл.

Серед російських сервісів результати показав оптимізатор CSS на сайті CY-PR.com. Його функціонал практично не відрізняється від CleanCSS. При стандартних налаштуваннях коефіцієнт стиснення може досягати 25%, при максимальних – понад 30%. На жаль, відсутня експорт у файл.

Інші сервіси описувати не має сенсу, оскільки працюють вони за тією ж схемою, що й вищезгадані CleanCSS.com та CY-PR.com, але є і цілком працездатні.

Чи потрібно взагалі стискати CSS-код?

Насамперед, давайте визначимося, навіщо нам стискати css код? Якщо наші css файли мають невеликий розмір, то й понтовуватися нічим, але якщо ви розробляєте солідний проект, то це зовсім інша розмова. Отже, ви тут щоб дізнатися, як організувати стиснення CSS. Ближче до справи... CSS стиск можна реалізувати кількома способами. Нижче список всіх відомих мені способів стиснення CSS.

Методи стиснення CSS

Примітки: статичний стиск, стискає до - 80%-90%

Примітки: динамічний стиск, стискає до -75%-95% (залежить від вас)

Примітки: статичний стиск, стискає до - 50%

Просто виберіть спосіб стиснення css, що сподобався, і клацніть по ньому, або прочитайте всі способи і зробіть власні висновки, що я настійно вам рекомендую.

Стиснення CSS за допомогою онлайн компресорів

Аналізуючи роботу css компресорів, можна зробити такі висновки про рівень стиснення css. Експеримент проводився на підставі двох файлів css з наступними параметрами:

перший - 7372 байт

другий - 62609 байт

Перший css написаний коротко і читати, тому стискатися він буде гірше.

Онлайн компресор CleanCSS

Адреса: www.cleancss.com

Досить таки солідний сервіс, давайте подивимося результати його стиснення css.

Результат:

перший - стиснутий до 7075 байт (96%)

другий - стиснутий до 52 797 байт (84,3%)

Онлайн компресор FormatCSS

Адреса: www.lonniebest.com/FormatCSS

Цей сервіс призначений більше для форматування CSS файлів, ніж для їх стиснення. Текст css вводиться за допомогою копіювати/вставити.

Результат:

перший - стиснутий до 8105 байт (109,9%)

другий - стиснутий до 61 715 байт (98,5%)

ОнлайнкомпресорRobson CSS Compressor

Адреса: iceyboard.no-ip.org/projects/css_compressor

Сервіс гнучкий у плані завантаження вихідного коду CSS. У нього можна завантажити CSS з локального каталогу, з Інтернету або копіювати/вставити. Давайте подивимося на результати стиснення файлів css.

Результат:

перший - стиснутий до 6326 байт (86,3%)

другий - стиснутий до 48 985 байт (78,2%)

Онлайнcsshtml компресор Tabifier

Адреса: tools.arantius.com/tabifier

Дозволяє стискати не лише css, а й html код. Але результат не дуже вражає, робіть висновки самі.

Результат:

перший - стиснутий до 7876 байт (106,8%)

другий - стиснутий до 60 706 байт (96,9%)

Стиснення CSS засобами PHP

Стиснення css за допомогою PHP доступно кількома способами, але я наведу тільки один, найцікавіший для мого розуміння. Перевага css стиснення на php це динамічність і гнучкість у плані налаштувань стиснення, тому що ви їх самі задаєте, за допомогою свого php сценарію. Мій сценарій виглядає так:

Дуже простий і зручний код, який ви вставляєте в css файл, який необхідно підключити звичним способом. Особливість даного php сценарію це використання регулярних виразів, які видаляють всі коментарі та пробільні символи, таким чином стискає css.

Стиснення CSS алгоритмом Base 62

Спосіб досить цікавий і ефективний, але він статичний, тобто щоразу змінюючи ваш css файл, необхідно пройти процедуру стиснення css файлу. Нижче поетапно описано цю процедуру.

1. Стисненняcss за допомогою компресора

Необхідно скористатися одним із css компресорів, щоб прибрати всі символи пробілів і вирівняти css код в один рядок.

2. Створенняjs файлу

Необхідно створити js файл і помістити в нього наступний код:

Document.write("");

Замість /*ваш стиль */ вставляєте отриманий рядок у першому пункті процедури стиснення.

3. Стиснення алгоритмом Base 62

Як бачите, тепер ви маєте js файл, який ви стискаєте за допомогою сервісу Packer -http://dean.edwards.name/packer/

Вставте код вашого js файлу у верхнє поле та виберіть галочку Base62 encode, після чого отримаєте результат у нижньому полі.

Даний спосіб дозволяє стиснути файл css розміром від 15кб до 8кб, тобто майже на 50%. Плюс такої хитромудрої процедури в тому, що отриманий код ви вставляєте в js файл в якому знаходяться інші ваші js сценарії і це все підвантажується разом.

Я виклав усі свої знання щодо стисненняcss. Якщо маєте якісь міркування щодо більш ефективних способівстисненняcss, будь ласка, відпишіться у коментарях. Дякую за вашу увагу!

Інше