Вибираємо кращий онлайн-сервіс зі стиснення CSS. Вибираємо кращий онлайн-сервіс зі стиснення CSS Швидкість завантаження сторінок
Доброго ранку, дорогі друзі! Вийшло так, що тиждень присвячений, в більшій мірі, оптимізації і прискорення завантаження Лендінгем Пейдж. Сьогодні продовжимо "маніаче" в цій галузі. На черзі оптимізація css коду. Я розповім вам про онлайн сервіс для оптимізації таблиць стилів.
Ці сервіси досить прості і працюють за принципом:
"Вставив неоптимізований код. Почекав кілька секунд. Скопіював оптимізований код "
Як бачите - це досить просто і не затратно, але не всі знаходять час, щоб зайнятися цим. А дарма!
Онлайн оптимізація css
Насамперед слід усвідомити, що не потрібно кидатися в крайності. Справа в тому, що, наприклад, прогалини і переноси рядків збільшують загальна вага сторінки. Дізнавшись про це, ви можете почати видаляти їх все. У підсумку, у вас буде абсолютно не читається, але оптимізований css код.
Це добре тільки в тому випадку, коли ви працюєте один, і таблиця стилів більше ніколи не буде редагуватися, ну, або майже ніколи. Так як, якщо ви працюєте в команді, людині, що читає ваш код, буде дуже важко в ньому розібратися.
Але навіть, якщо ви самі погляньте на свою таблицю стилів через півроку, то навряд чи зможете легко зрозуміти, що в ній за що відповідає.
Тому оптимізуємо, але не сходимо з розуму - це перше.
Друге - це те, що при використанні сервісів, які пропонують оптимізацію css коду, важливо розуміти, що там відбувається і що оптимізується. Зараз я покажу вам кілька прикладів.
Наприклад, кольору. Зазвичай, ми задаємо їх в стандарті RGB. Білий фон для елементу задається наступним чином
Background: #ffffff;
Але не всі знають, що якщо перші 3 значення повторюються, то можна залишити тільки їх. Наприклад, так:
Background: #fff; background: # 000; color: # 123;
Наступне, що приходить на розум - це відступи (padding і margin)
Padding: 10px 20px 10px 20px; / * Замість * / padding: 10px 20px; margin: 15px 20px 15px 20px; / * Замість * / margin: 15px 20px;
Також, оптимізувати css код можна за рахунок скороченого завдання шрифтів:
Font: bold 18px Verdana, Arial, sans-serif;
Font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold;
Як бачите - одна строчка проти трьох. І таким чином, іноді, вдається зменшити вагу таблиці стилів на 20 - 30%.
Третє, про що варто пам'ятати, - це те, що завжди перед будь-оптимізацією, будь то картинки або css, потрібно робити резервну копію (на випадок непередбаченої помилки або ще чого). Просто візьміть собі за правило завжди робити копію перед редагуванням.
Тепер все. Переходимо до сервісу.
Огляд сервісу для онлайн оптимізації css коду.
Більшість людей користуються такими популярними сайтами для оптимізації css коду:
alexvaleev.ru/cssoptimizer
css-school.ru/optimise
Функціонал фактично однаковий, простий і зрозумілий. Але, проаналізувавши їх, я знайшов як плюси, так і недоліки. Давайте подивимося на один з них - css-school.ru/optimiser
Зліва вікно для вставки css коду, а праворуч налаштування параметрів оптимізації. Розберемо докладніше вікно.
Ступінь стиснення.
Для того, щоб текст залишався легким для читання, необхідно поставити стандартну ступінь стиснення, в такому випадку кожне нове властивість буде писатися з нового рядка. Якщо виставити «високу» або «максимальну», то розмір файлу буде менше, але все буде записано в одну строчку. Це не дуже зручно для подальших правок, але якщо їх не буде, то сміливо можете ставити «максимальну».
Наступним йде вікно для завдання своїх шаблонів оптимізації, його пропустимо.
Далі йде вкладка, що дозволяє вибрати, об'єднувати селектори з однаковими властивостями. Тут все залежить від проекту і завдань. Якщо ви писали css код строго в певній послідовності і у вас все строго один за одним, то не слід вибирати об'єднання селекторів. Так вам легше буде орієнтуватися в коді.
Оптимізація стилів. Ми залишаємо - "безпечна"
Стиснення квітів і властивостей шрифтів - це те, про що я вам говорив. Хоча і з стисненням властивостей шрифтів - проблема. Він не оптимізує код, як я вам розповідав вище.
Інші налаштування не викликають питань. Загалом я помітив, що всі російськомовні сервіси для онлайн оптимізації css коду, Страждають "хворобою". Вони не оптимізують css3 код. Що змусило мене повністю відмовитися від подібних оптимізаторів.
Для прикладу, я ввів наступний код:
Спеціально написав з пропусками рядків, все детально і т.д. І очікував побачити щось подібне:
H1 (color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif)
Але на жаль вийшло всього лише так:
Сім рядків, замість п'яти. Це мене не влаштовувало. Я ж хотів знайти і розповісти вам про більш якісному матеріалі. Так як розумію, що деякі не знайомі зі скороченими видами записів стилів.
А деякий функціонал сервісів мені здався зайвим, ну або псевдофункціоналом. Для того, щоб створити видимість "навороченності" ресурсу. Ну навіщо мені галочка навпроти «скорочувати кольору». Звичайно, якщо я прийшов оптимізувати свій код, то мені потрібно більше короткий опис усього, що можливо! (Моя думка)
Отже, я продовжив пошук і знайшов той самий ресурс, який задовольнив мої потреби в оптимізації css коду. Це - devilo.us
Дійсно приголомшливий сервіс, який я сміливо можу рекомендувати вам. Функціонал такий же, як і у минулих сайтів. Але цей впорався із завданням на 100%. дивіться:
Як ви могли помітити, відсоток стиснення 43.3%, а на минулому сайті було 25%. В байтах - це вийшло 58\u003e 37. Ось такий я зануда. Але коли css файл має 3000 рядків, то така оптимізація може скоротити вагу документа вдвічі.
Звичайно, з часом ви навчитеся писати відразу оптимізований css код, і подібні сервіси вам будуть потрібні всі рідше і рідше, але перевірити себе не заважає. Хоча б на наявність зайвих пробілів і пропусків рядків.
А на сьогодні - все. До зустрічі.
Оптимізувати код 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-кодом, в якому присутні помилки.
замітка: активована адаптивна версія сайту, яка автоматично підлаштовується під невеликий розмір Вашого браузера і приховує деякі деталі сайту для зручності читання. Приємного перегляду!
Добрий день. Сьогодні ми продовжимо тему оптимізації HTML макета сайту, Яку почали в статті о.
Давайте спочатку розберемося, чому це важливо і потім перейдемо до практичних порад.
Правильно зроблений (зверстаний) шаблон сайту:
- Може значно прискорити завантаження сторінок (особливо, якщо до цього все було запущено);
- Спростить потрапляння ваших сторінок в ТОП пошукової видачі (не тільки через швидкого завантаження);
- Збільшить ваші шанси на повну кроссбраузерность, тобто однаково правильне відображення сайту у всіх браузерах;
- Дасть невелику гарантію, що після закінчення безлічі років вам не доведеться переробляти ваші сайти під нові браузери (або під нові версії старих браузерів).
Пропоную йти від простих речей до більш цікавим.
Частина 1. Дотримуйтесь HTML і CSS стандарти
Про всяк випадок скажу, що крім HTML і CSS ми ще можемо оптимізувати JS і PHP частини наших сайтів, які є більш ресурсоємними і значніше уповільнюють швидкість завантаження сторінок. Однак крім швидкості завантаження сторінок, JS і PHP складові ніяк не впливають на просування сайту (аби не ламали його), на відміну від HTML розмітки, тобто шаблону сайту.
1.1 Завжди закривайте теги.
У тому числі ті, які закривати не обов'язково, навіть якщо ви ненависник XHTML стандарту, краще дотримуватися цього правила. приклад:
- пункт списку
- пункт списку
- пункт списку
Кожен тег li закритий, хоча це і не обов'язково.
1.2 Дотримуйтесь правильну вкладеність тегів.
За принципом: першим відкрився - останнім закрився. Приклад як неправильно:
Як правильно:
1.3 Ніколи не потрібно описувати CSS і JS всередині HTML макета і атрибутів тегів.
Ніколи! Іншими словами, забудьте про існування атрибута style і тега style:
текст
Описувати всі стилі в окремому файле.css
Можете використовувати атрибут style, тільки динамічно отрісовивая його за допомогою яваскрипт по якомусь дії. Наприклад, якщо при натисканні на картинку, потрібно змінити колір всього тексту на сторінці, то тільки в такому випадку можете динамічно створити атрибут style з потрібними значеннями для потрібного тега (в даному прикладі - для body). Чому? Тому що пошукові роботи його все одно не побачать і ніхто (в тому числі користувачі) не завантажили зайвий код, так як дія відбувається вже після повного завантаження сторінки.
Проте, в таких випадках я все одно рекомендував би додавати заздалегідь описаний CSS клас потрібного тегу, ніж додавати йому атрибут style. Це як мінімум зручніше для подальшого редагування.
Все те ж саме відноситься і до JS, весь JS-код повинен бути в окремому файлі, А не всередині вашого макета або ще гірше - серед атрибутів тегів.
1.4 Забудьте про Caps Lock і заголовних буквах.
Пишіть все теги, атрибути і їх значення малими (маленькими) буквами, це ж стосується і таблиць стилів CSS.
Майже все описане вище є в офіційній специфікації HTML і CSS і відноситься до валідності документа.
Таким чином, я повинен відзначити, що дотримуючись W3C стандартів, тобто, дотримуючись валідність документа - ви отримуєте наступні SEO переваги:
- Чистий код, а, отже, і додаткове довіру пошукових систем до вашого сайту;
- Прискорена завантаження сторінок, так як браузеру не доводиться витрачати час на налагодження невалидность документа.
Однак не варто зациклюватися на валідності, ви повинні намагатися максимально її дотримуватися, проте не на шкоду всьому іншому (часу, функціональності і тд.).
Частина 2. Прискорюємо завантаження сторінок - один з чинників ранжирування
2.1 Вказуйте справжні розміри картинок.
Тут суть в двох речах:
- Обов'язково вказуйте атрибути width і height для тега img:
Це прискорить завантаження зображень, так як браузер заздалегідь буде знати, який розмір потрібно відобразити. - Обов'язково вставляйте картинку того ж самого розміру, який вказали в атрибутах.
Якщо картинка більше ніж вам необхідно, то не потрібно економити час на те, що її можна зменшити за коштами HTML або CSS. Будьте люб'язні витратити час, зайти в Фотошоп або його аналоги і зменшити картинку до тих розмірів, які ви хочете бачити на сайті, це може помітно прискорити завантаження сторінок.
2.2 Використовуйте CSS3 замість JS.
JS може значно уповільнити завантаження ваших сторінок, а також продовжувати створювати навантаження вже після завантаження сторінки (різноманітні ефекти, типу біжучого рядка і інші динамічні речі), що може гальмувати роботу браузера поки вкладка з сайтом буде відкрита.
Сьогодні безліч красивих і цікавих ефектів можна досягти тільки завдяки використанню властивостей CSS3 (наприклад, transition, box-shadow, border-radius, opacity, transform, background-size) і вмілої.
Все сказане вище можна підсумувати однією фразою: всюди, де ви можете (підозрюєте як) замінити JS на CSS3, використовуйте CSS3 не роздумуючи! Для пошуку подібних фрагментів раджу вам вивчити нові можливості CSS3.
2.3 Менше Photoshop - більше CSS 3.
Цей девіз уже давно використовують багато вебмастера. Ви можете створювати красиві кнопки і елементи дизайну з плавним градієнтом, згладженими кутами, тінями (внутрішніми і зовнішніми) і красивим текстом зверху завдяки одному лише CSS. Скрізь, де можна замінити графічні елементи дизайну на CSS код - робіть це! приклад:
Крім перерахованих вище властивостей CSS3 вам також доступний формат опису кольору RGBA.
Для створення кросбраузерності градієнта на CSS ви можете використовувати безкоштовні сервіси, наприклад цей colorzilla.com.
2.4 Об'єднуйте зображення в CSS спрайт.
Ті зображення, які ми не змогли намалювати за допомогою CSS 3, потрібно обов'язково об'єднати в одне єдине (в ідеалі). Це потрібно для того, щоб скоротити кількість запитів до сервера при завантаженні сторінки. Цей пункт може значно знизити навантаження на ваш веб-сервер, а заодно і прискорити завантаження сторінок, відразу 2 зайця!
Щоб краще зрозуміти, про що мова, просто погляньте на мій CSS спрайт:
Непогано, чи не так? Фонова картинка одна на все елементи, ми тільки рухаємо її і підставляємо в фон певного елемента потрібну частину картинки завдяки властивості background-position, наприклад, так:
# Subs, # left, .mail, .rss, .vk (background: url (/images/1.png) no-repeat) #subs (background-position: -28px -120px;) #left (background-position: -35px -20px;) .mail (background-position: -43px -50px;) .rss (background-position: -12px -8px;) .vk (background-position: -34px -56px;)
Найкраще буде скласти спрайт вручну, за допомогою Фотошопа, але це може здатися вам досить складним заняттям, тому ви можете використовувати безкоштовні сервіси, які все зроблять за вас, в тому числі навіть напишуть за вас CSS-код. Мені більшого всіх подобається сервіс SpriteMe. Але я не втомлюся повторювати: завжди все краще робити вручну, зокрема, так спрайт може вийти значно більш компактно (за розмірами і, отже, по вазі), а значить більш ефективним.
2.5 Розміщуйте JS файли правильно.
Все що підключаються вашим сайтом JS файли повинні знаходиться якомога нижче за кодом, не потрібно підключати їх усередині «голови» сайту (між тегами head) - це значно уповільнює завантаження сторінок. Найкращим варіантом буде підключити файли JS перед закривається тегом body, тобто в самому низу сторінки, нижче вже нікуди.
І ще один дуже корисну пораду: в ідеалі всі ваші файли JS потрібно об'єднати в один єдиний, тобто вирізаємо (Ctrl + X) код з усіх файлів і копіюємо його в один, щоб в результаті у вас внизу, перед закривається тегом body підключався один єдиний файл:
...