Сео коди. Вибираємо найкращий онлайн-сервіс зі стиснення CSS. Title, Description і Keywords - маємо відразу після тега

Вітаю Вас, друзі, на блозі сайт. Більшість користувачів сприймають сайти лише зовні, оцінюючи дизайн та структуру, але за привабливими зовнішніми складовими стоїть безліч внутрішніх законів та правил, що визначаються стандартами W3C. До внутрішніх складових відноситься html-код та CSS-стилі (без окремого функціоналу). Часто веб-майстрів більше турбує лише зовнішнє уявлення сайту. Однак уваги вимагає і внутрішній вміст сторінок у вигляді HTML-коду, особливо коли йдеться про залучення пошукового трафіку.

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

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

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

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

• Виділення заголовків h1-h6 - пошукові роботи в цілому, тому не варто забувати про правильне оформлення тексту.
• Зменшення розміру коду – що менше коду, то легше і швидше завантажується сторінка. З недавніх пір швидкість завантаження сторінок стала важливим фактором ранжування у видачі Google, про що було офіційно заявлено.
• Видалення шкідливого коду – на багатьох хостингах існує розділ антивірус, який сканує файли сайту та вказує шлях до їх вирішення. Відсутність шкідливого коду робить сайт кращим для пошукових систем.
• Внутрішня оптимізація сайту – створення унікального тексту, який підтримуватиме необхідну щільність ключових слів.
• – рівномірно розподіляє вагу сторінок та підвищує трафік за низькочастотними запитами, особливо при поповненні нового контенту.
• Додавання мета тегів – title, keywords та description використовуються роботами та відображаються на сторінках пошукової видачі. Правильно складені мета-теги підвищують релевантність сторінок та залучають користувачів.
• Оптимізація зображень – кожній картинці має бути підібраний оптимальний формат (GIF, JPEG, PNG та PNG-24), а також прописані alt та title.

Валідність – це відповідність коду загальноприйнятим світовим стандартам W3C. Чи не валідний код сайту, що містить безліч помилок, може стати перешкодою в просуванні певного ресурсу. Якщо закриті не всі парні теги, можливі проблеми з відображенням елементів дизайну. Але насправді навіть сайти найбільших пошукових систем не є валідними на 100%. У чому причина такої невідповідності?

• Високий ступінь трудомісткості при стандартизації сайту та необхідність виняткового професіоналізму розробника при валідації великого динамічного сайту.
• 100% валідність HTML-коду не гарантує кросбраузерності, а також не страхує від помилок при використанні старих браузерів.

Однак для менших ресурсів валідність html-коду є відмінним бонусом для ранжування за найбільш конкурентними запитами, до того ж покаже серйозність ресурсу.

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

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

Ще одним моментом, що впливає на просування сайту, є кодування. Російськомовний текст коректно відображатиметься лише за умови правильного налаштування кодування, наприклад, Windows-1251 або utf-8. При неправильному кодуванні контенту знаки та символи будуть спотворені, що призведе до втрати відвідувачів та уповільненої індексації.

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

У більшості випадків грамотна внутрішня оптимізація ресурсу може вивести сайт на кращі позиції пошукових систем без істотних зусиль і роботи з біржами. Важлива кожна дрібниця, що впливає його позиції. Намагайтеся створити таку структуру, яка буде зрозуміла і користувачам, і пошуковим системам. Багатосторінкові портали повинні містити систематизовані розділи, в яких усі сторінки знаходяться не далі 3-4 кліків. Бажано використовувати навігаційний ланцюжок та зручні для людського сприйняття веб-адреси. На жаль, не всі скрипти CMS мають такий функціонал.

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

Сподіваюся, матеріал буде корисним для моїх дорогих читачів. Передплатіть оновлення блогу. Буду вдячний за натискання кнопок та репост даного матеріалу. Побачимося у наступних статтях. Всім удачі.

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

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

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

Правильно зроблений (зверстаний) шаблон сайту:

• Може значно прискорити завантаження сторінок (особливо якщо до цього все було запущено);
• Спростить попадання ваших сторінок у ТОП пошукової видачі (не тільки через швидке завантаження);
• Збільшить ваші шанси на повну кросбраузерність, тобто однаково правильне відображення сайту у всіх браузерах;
• Дасть невелику гарантію, що через багато років вам не доведеться переробляти ваші сайти під нові браузери (або під нові версії старих браузерів).

Пропоную йти від простих речей до цікавіших.

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

У тому числі ті, які закривати не обов'язково, навіть якщо ви ненависник стандарту XHTML, краще дотримуватися цього правила. Приклад:

• Пункт списку
• Пункт списку
• Пункт списку

Кожен тег li закритий, хоча це не обов'язково.

За принципом: першим відкрився – останнім закрився. Приклад як не правильно:

текст

Як правильно:

текст

Ніколи! Іншими словами, забудьте про існування атрибуту style і тега style :

текст

Описуйте всі стилі в окремому файлі.

Можете використовувати атрибут style, тільки динамічно малюючи його за допомогою яваскрипту з якоїсь дії. Наприклад, якщо натиснути на картинку, потрібно змінити колір всього тексту на сторінці, то тільки в такому разі можете динамічно створити атрибут style з потрібними значеннями для потрібного тега (в даному прикладі – для body). Чому? Тому що пошукові роботи його все одно не побачать і ніхто (у тому числі користувачі) не завантажать зайвий код, оскільки дія відбувається вже після завантаження сторінки.

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

Все те ж саме відноситься і до JS, весь JS-код повинен бути в окремому файлі , а не всередині вашого макета або ще гірше серед атрибутів тегів.

Пишіть всі теги, атрибути та їх значення малими (маленькими) літерами, це стосується і таблиць стилів CSS.

Майже все описане вище є в офіційній специфікації HTML і CSS і стосується валідності документа.

Таким чином, я повинен відзначити, що дотримуючись W3C стандартів, тобто, дотримуючись валідності документа, ви отримуєте наступні SEO переваги:

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

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

Тут суть у двох речах:

• Обов'язково вказуйте атрибути width та height для тега img : Це прискорить завантаження зображень, оскільки браузер заздалегідь знатиме, який розмір потрібно відобразити.
• Обов'язково вставляйте картинку того самого розміру, який вказали в атрибутах.

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

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

Сьогодні безліч красивих та цікавих ефектів можна досягти тільки завдяки використанню властивостей CSS3 (наприклад, transition, box-shadow, border-radius, opacity, transform, background-size) та вмілої .

Все сказане вище можна підвести одну фразу: скрізь, де ви можете (підозрюєте як) замінити JS на CSS3, використовуйте CSS3 не роздумуючи! Для пошуку подібних фрагментів раджу вивчити нові можливості CSS3.

Цей девіз вже давно використовують багато вебмайстрів. Ви можете створювати красиві кнопки та елементи дизайну з плавним градієнтом, згладженими кутами, тінями (внутрішніми та зовнішніми) та красивим текстом зверху завдяки одному лише CSS. Скрізь, де можна замінити графічні елементи дизайну на код CSS – робіть це! Приклад:

Крім перерахованих вище властивостей CSS3, вам також доступний формат опису кольору RGBA.

Для створення кроссбраузерного градієнта на CSS можна використовувати безкоштовні сервіси, наприклад цей colorzilla.com .

Ті зображення, які ми не змогли намалювати за допомогою 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. Але я не втомлюся повторювати: завжди все краще робити вручну, зокрема, так спрайт може вийти значно компактнішим (за розмірами і, отже, вагою), а значить більш ефективним.

Усі файли, що підключаються вашим сайтом JS, повинні знаходитися якомога нижче за кодом, не потрібно підключати їх усередині «голови» сайту (між тегами head) – це значно сповільнює завантаження сторінок. Найкращим варіантом буде підключити файли JS перед тегом body, що закривається, тобто в самому низу сторінки, нижче вже нікуди.

І ще одна дуже корисна порада: в ідеалі всі ваші файли JS потрібно об'єднати в один єдиний, тобто вирізаємо (Ctrl + X) код з усіх файлів і копіюємо його в один, щоб у результаті у вас внизу, перед тегом, що закривається, body підключався один єдиний файл:

...

Це може помітно прискорити завантаження ваших сторінок, оскільки зменшить кількість запитів до вашого веб-сервера. Розташування JS файлу внизу сторінки відкладе його завантаження та обробку, що прискорить виведення основної частини сторінки. І не забудьте скоротити (зробити компресію) ваш кінцевий файл JS.

Файл CSS, який, до речі, теж повинен бути одним єдиним (з тих же причин), потрібно розміщувати в коді навпаки, якомога вище!

Але не потрібно розміщувати його вище тега title, він найголовніший для SEO і краще залишити його в самому верху. Особисто я підключаю CSS файл відразу після тега title та всіх мета-тегів, а вже після нього можна підключити, наприклад, фавікон (іконка сайту у вкладці браузера) тощо.

Вся навігація сайту (меню, хлібні крихти, списки виробників в інтернет-магазинах тощо) мають бути реалізовані за допомогою ненумерованих списків (теги ul, li), а не за допомогою div та a.

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

• пункт меню 1
• пункт меню 2
• пункт меню 3

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

• Ніколи не використовуйте CSS-властивість float (плаваючий, викликає обтікання його іншими елементами), замість нього використовуйте наступний код: ul.menu li(display:inline-block;)
• У коді не потрібно починати кожен новий пункт меню з нового рядка, як у прикладі вище. Краще написати все в один рядок і регулювати відстань між пунктами за допомогою margin. Приклад:

• пункт меню 1
• пункт меню 2
• пункт меню 3

Перенесення рядка в HTML дорівнює пропуску, тобто якщо ви в коді між пунктами меню ставите Ентер, то у користувачів на сторінці сайту між ними з'являться прогалини. Що тут поганого? У кожного браузера може бути різна ширина пробілу, а деякі можуть його зовсім проігнорувати. У результаті, ваш сайт виглядатиме скрізь по-різному, а іноді (з власного досвіду) це може навіть сильно спотворити дизайн.

Тому в мене є моє власне правило при верстці: між будь-якими (не тільки в меню) inline-block елементами не повинно бути пробілів та переносів рядків! Заодно це незначно, але зменшує загальну вагу ваших сторінок, адже як я вже писав: 1 символ (у тому числі прогалини та перенесення рядків) = +1 байт до ваги ваших сторінок.

Обов'язково вказуйте атрибут alt у тезі img:

По-перше, це потрібно, якщо ви хочете пройти перевірку на валідність (у XHTML точно, на рахунок HTML вже не пам'ятаю, так чи інакше завжди варто дорівнювати строгим стандартам XHTML), по-друге, якщо картинка не завантажиться, то користувачеві замість картинки хоча відобразиться текст, записаний в alt (що вона). По-третє, це збільшить шанс на влучення ваших картинок у пошук за картинками від Google і Яндекса, що може залучити додаткових відвідувачів до вас на сайт.

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

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

h1 – це найбільший і найголовніший заголовок, у нього слід укладати назву вашої поточної сторінки. У той час як h6 найменший і найменш значущий заголовок. Багато SEO-експерти рекомендують використовувати заголовок h1 тільки 1 раз на сторінці і це логічно. Інші заголовки можете використовувати будь-яку кількість разів, головне з розумом.

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

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

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

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

Особисто я укладаю всі підзаголовки всередині статті h2, підзаголовки підзаголовків h3, а дрібні підпункти в h4. Внизу під кожною статтею є форма підписки та блок із кнопками соціальних мереж, їх назви я уклав у h6 . У правій колонці сайту назви розділів містяться в h5.

Як бачите, я використовую заголовки HTML по максимуму, причому логіка на автоматі нагадує розставляти все зверху вниз за кодом. Хоча для повної ідилії потрібно було поміняти місцями заголовки h6 і h5, але це було б занадто педантично:) і не так важливо.

Продовжуючи тему заголовків, хочу сказати про важливість h1 і як правильно його составлять. По-перше, я настійно рекомендую використовувати його лише 1 раз на сторінці! Простежте за цим у вашій CMS. По-друге, h1 має великий ефект на SEO (на другому місці після title ), так чи інакше, але я раджу вам дублювати текст із title в h1.

Яндекс пише:

Щоб допомогти Яндексу правильно виділяти швидкі посилання, текст у тезі для ключових сторінок повинен збігатися з її назвою (з заголовком сторінки, виділеним, наприклад, тегом ) і текстами посилань, що вказують на цю сторінку.

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

• Використовуйте нумеровані та ненумеровані списки (ul, ol);
• Укладайте основний текст над теги div, а теги параграфів: p;
• Супроводжуйте текст картинками та відео;
• Малюйте HTML таблиці;
• Використовуйте (у міру!) теги логічного виділення тексту: strong, em, u.

У description запишіть доступною мовою, про що ваша сторінка, не потрібно намагатися укласти в неї якнайбільше ключових слів. Складайте description для людей, думайте тільки про це, інакше ви можете лише нашкодити собі переоптимізацію. До мета-тегу keywords відноситься все те саме. Ось офіційна сторінка Яндекса, на якій написано як правильно складати мета-опис сайту: читати у новому вікні .

Візьміть на замітку: не використовуйте зайвих мета-тегів (це безглуздо), максимум три: keywords, description та мета-тег для позначення кодування сайту:

Якщо ваша CMS генерує їх більше (Autor, Generator тощо), сміливо видаляйте їх! На сайті не повинно бути зайвого сміття як у тексті, так і в коді.

Після того як ви закінчили сайт, подумайте, як можна було б зменшити HTML розмітку, наприклад за допомогою , а також зверніть увагу, чи всі ваші теги щось роблять. Якщо до тега не застосовується ніяких CSS властивостей, тоді навіщо ви ставили його? Щоб перевірити це, використовуйте . Часто новачки створюють багато зайвих div тегів. Перевірте це чим менше коду – тим краще!

Після того, як всі роботи закінчені, скоротить ваш HTML, CSS та JS код. Як скоротити? Запишіть все в один рядок, це буде ідеальний варіант. І це не жарт, видаліть всі прогалини між тегами і всі перенесення рядків у HTML макеті! Коли ви натиснете в браузері Ctrl + U - ви повинні побачити один єдиний безперервний рядок.

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

Скоротити CSS і JS найпростіше через спеціальні сервіси, для JS можете скористатися, наприклад, Closure Compiler від компанії Google (будьте пильні, після оптимізації ваш код може втратити працездатність); для CSS підійде csscompressor.com Однак я зазвичай використовую один єдиний сервіс (для JS і CSS), про нього наприкінці статті.

Важливо 2 параметри:

• Скільки потрібно користувачеві скролити (прокручувати) сторінку до релевантного (на думку пошукових систем) вмісту;
• Як високо в коді (близько до початку) знаходиться релевантний вміст.

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

Яндекс пише:

• Основна суть документа має бути зрозумілою вже на першому екрані браузера.
• Не рекомендується використовувати елементи оформлення, що роблять неочевидним доступ до тексту для користувачів - вікна прокручування, приховані блоки, що випадають, і т.п.

Google також має спеціальний алгоритм під назвою , який визначає, як далеко потрібно прокручувати ваш сайт, щоб дійти до корисної (релевантної запиту) частини сторінки. Наступна картинка ілюструє дію цього алгоритму, алгоритм перевіряє на середньостатистичній роздільній здатності екрану (1024*768):

Також обидві пошукові системи звертають свою пильну увагу на кількість реклами та банерів на першому екрані браузера.

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

З цього приводу кілька корисних порад:

• Робіть шапку сайту якнайменше по висоті (приклад як не треба: цей блог);
• Намагайтеся не захаращувати сайт рекламою;
• Якщо у двох колонковому макеті не можете визначитися: праворуч або ліворуч від основної колонки поставити додаткову – завжди ставте праворуч. Пошукові роботи, як і люди, дивляться на ваш сайт ліворуч, а значить краще, щоб основний вміст був ліворуч!

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

Із цього приводу є ще одна хитрість. Наприклад, у нас є 2 колонки сайту – основна та додаткова. При цьому, незважаючи на SEO, нам дуже хочеться, щоб додаткова колонка була саме ліворуч, нічого смертельного в цьому немає. Однак у такому випадку весь код і вся інформація з додаткової колонки (лівої) буде вищою за кодом, ніж основна частина, і ми можемо це виправити!

Для цього ми будемо використовувати CSS властивість float. При створенні HTML макета ми основну колонку (праву) розмістимо все-таки ліворуч від додаткової (вище за кодом):

Основна частина сайту. Додаткова колонка зліва.

А тепер за допомогою CSS поміняємо їх місцями:

#text(float:right;) #left(float:left;) .clear(clear:both;) /* заборона обтікання */

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

Google Page Speed ​​– це чудовий онлайн сервіс від Google, а також плагін для Chrome та Mozilla, який стане для вас незамінним помічником при аналізі вашого HTML+CSS шаблону сайту. Він підкаже вам всі недоліки і що важливо — дасть конкретні шляхи вирішення.

Також він є тим сервісом, який я люблю використовувати для скорочення HTML, JS і CSS коду, після його використання 100% працездатність гарантується.

Просто почніть працювати з Google Page Speed ​​і ви помітно підвищите свій рівень правильної клієнтської оптимізації шаблону сайту.

Дякую за увагу. Вдалого дня та до зустрічі!

Пані та панове, давайте включимо параною:

1. cssresizer.com (84,13%);

whois спойлер

nikitas@pentagon:~$ whois cssresizer.com

Whois Server Version 2.0

Domain names in the .com and .net domains can now be registered
with many different competing registrars. Go to http://www.internic.net
for detailed information.

Domain Name: CSSRESIZER.COM
Registrar: REGISTRAR OF DOMAIN NAMES REG.RU LLC
Sponsoring Registrar IANA ID: 1606
Whois Server: whois.reg.com
Referral URL: http://www.reg.ru
Name Server: NS1.MCHOST.RU
Name Server: NS2.MCHOST.RU
Name Server: NS3.MCHOST.RU
Name Server: NS4.MCHOST.RU
Status: clientTransferProhibited https://icann.org/epp#clientTransferProhibited
Updated Date: 21-apr-2016
Creation Date: 08-apr-2016
Expiration Date: 08-apr-2017

Для більше інформації на Whois status codes, please visit https://icann.org/epp

NOTICE: The expiration date displayed in this record is the date the
registrar"s спонсоромїх домен name registration in the registry is
currently set to expire. Це не є обов'язковим reflect the expiration
date of the domain name registrant"s agreement with the sponsoring
registrar. Users may consult the sponsoring registrar"s Whois database to
View the registrar's reported date of expiration for this registration.

TERMS OF USE: Ви не можете застосовувати або користуватися нашим Whois
Database через використання електричних процесів, які є високою і
automated except as reasonably necessary to register domain names or
modify existing registrations; the Data in VeriSign Global Registry
Services" ("VeriSign") Whois database is provided by VeriSign for
information purposes only, and to assist persons in obtaining information
про або реагувати на домашній ім'я registration record. VeriSign does not
guarantee its accuracy. By submitting a Whois query, ви agree to abide
за допомогою наступних термінів використання: Ви можете скористатися тим, що ви можете використовувати це Data only
для законних purposes і те, що під не circumstances буде використовувати це Data
to: (1) allow, enable, or otherwise support the transmission of mass
unsolicited, комерційний advertising або solicitations via e-mail, телефон,
або facsimile; or (2) enable high volume, automated, electronic processes
що застосовується до VeriSign (або його комп'ютерних систем). The compilation,
repackaging, dissemination or other use of this Data is expressly
заборонено безприору, що написано, що означає VeriSign. You agree not to
Використовуйте електронні процеси, які є автоматизованим і високою для використання або
query the Whois database except as reasonably necessary to register
domain names або modify existing registrations. VeriSign reserves the right
для того, щоб отримати доступ до Whois database in its sole discretion to ensure
operational stability. VeriSign може бути обмежений або надійний ваш доступ до
Whois database for failure to abide до цих термінів використання. VeriSign
Reservas right to modify these terms at any time.

Registry database contains ONLY .COM, .NET, .EDU domains and
Registrars.