Вибираємо кращий онлайн-сервіс зі стиснення CSS. Вибираємо кращий онлайн-сервіс зі стиснення CSS Безкоштовні оптимізатори HTML коду
Технічна оптимізація - правильна настройка сайту для максимально якісної взаємодії з пошуковими системами. Її необхідно робити відразу після установки движка і під час роботи з первинним заповненням сайту контентом. Зараз я розповім, на які важливі аспекти оптимізації потрібно звернути увагу і зробити в першу чергу.
Зміст статті:
Правильна організація структура сайту
Будь-сайт повинен мати максимально зручну структуру. Як і люди, пошукові системи дивляться на сайт і оцінили зручність його використання. Будь-який інтернет-ресурс повинен мати вкладеність не більше трьох сторінок. Тобто з головною, максимум в три кліка, у користувача має вийти дістатися до будь-якої сторінки.
Найбільш правильною і простою структурою для інформаційного сайту буде:
Категорії визначають розділи. Якщо сайт про різні хвороби, то категорії можуть бути такі: Кардіологія, Неврологія, Хірургія ...
Для більш складних проектів, що охоплюють більше інформації, структура може бути:
Таким чином розширюється структура, але залишається зрозумілою і логічною. Приклад, на цьому сайті в категорії Кардіологія можуть міститися підрозділи Хвороби серця і Хвороби судин. Чи не забороняється розміщувати матеріал, що відноситься до двох і більше розділів.
Наприклад, матеріал про гепатит може перебувати в категорії Гепатологія і Вирусология одночасно. Головне - дотримуватися ієрархію матеріалів. Побудова правильної структури продумується на етапі планування та збору семантичного ядра.
Правильна перелінковка сторінок сайту
Більш поглиблений матеріал про перелинковке я вже готую і незабаром викладу. Перелінковка - простановка посилань усередині сайту для зручної навігації користувачів і передачі ваги сторінок.
Щоб побачити приклад перелинковки, відкрийте будь-яку статтю у Вікіпедії. Кожна містить багато посилань на інші статті. Є навіть жарт, що з будь-якої статті у Вікіпедії в п'ять кліків можна дістатися до статті про Гітлера. Звичайно, на вашому сайті в статті не повинно бути по 20 посилань на інші матеріали, але 2-4 посилання потрібні.
Важливою властивістю перелинковки є передача ваги на інші сторінки. Коли всі сторінки будуть пов'язані один з одним, то вага розподілитися рівномірно і загальні позиції будуть рости. А коли просувається одна конкретна сторінка, то тоді передається вага з інших матеріалів на неї. Щоб було зрозуміліше, припустимо, що потрібно просунути сторінку медичного сайту з послугою «Огляд педіатра». Для цього ми в блозі напишемо кілька статей про дитячі хвороби і всюди, де будемо згадувати про необхідність огляду педіатром, поставимо посилання на нашу послугу.
Додати хлібні крихти і поліпшити юзабіліті
Хороша структура ніщо, якщо її не бачить користувач. На перше місце при створенні сайту необхідно ставити його корисність для кінцевого людини і зручність використання. Якщо зайшов до вас на сайт, загубиться і не зможе знайти для себе ще цікаві матеріали, значить, у вас проблеми з юзабіліті.
Хлібні крихти - це навігаційні елементи, які показують, де знаходиться користувач щодо всієї структури майданчика. Ці елементи зазвичай розміщуються перед заголовком статей і дозволяють в один клік перейди на головну, в категорію розміщення статті або в її підкатегорію.
Хлібні крихти можна реалізувати з допомогу простих плагінів або зробивши правки в коді. Якщо вони не передбачені використовуваним шаблоном. А ось над юзабіліті доведеться попрацювати. Потрібно правильно продумати меню. Зробити його візуально помітним і зручним для використання. Продумати різні дрібниці, адже навіть звичайна кнопка підйому вгору сторінки набагато полегшує життя користувача, дозволяючи в один клік перейди до шапки, а не перекручувати вже прочитаний матеріал роликом.
Оптимізація коду сайту html, js, css, php
Сьогодні користувачі стали нетерплячими і якщо сайт відкривається хоч на секунду довше, ніж у конкурента, вони підуть до нього. Про це в курсі і пошукові системи, що використовують швидкість завантаження як один з факторів ранжирування. Тому важливо зробити сайт максімальнго швидким. Цьому сприяють важкі картинки, невалідний код верстки, неправильні відповіді сервера.
Оптимізація коду сайту
Зараз я розповім про оптимізацію коду в загальному, щоб ви отримали початкове уявлення. Також підготую матеріал, де докладно розповім і зроблю крок за кроком керівництво по оптимізації коду. Отже, щоб оптимізувати код і зробити сайт найбільш привабливим для пошукових систем, нам потрібно:
- Стиснути картинки на, зменшивши вагу, що зробить завантаження швидше. Нерідко недосвідчені вебмастера завантажують на сервер картинки високої розподільчої здатності. Які потім за допомогою CSS стискаються для відображення. Вірно ж завантажувати картинки в тому дозволі, в якому вони і будуть показуватися на сторінці. Можна вручну стискати картинки, перезберегти їх в Фотошопі, або скористатися одним з безлічі сервісів, які вміють стискати картинки.
- Оптимізувати html, js і css. Потрібно зробити код сторінок максимально простим. Відносно html, то прибрати все коментування коду, зробити нормальний перенесення по рядках. Для скриптів js розміщувати їх після контенту, щоб значима інформація з'являлася на екрані раніше, ніж буде завантажено скрипти. Виняток - скрипт і потрібен для відображення контенту. Буде незайвим помісити все скрипти в один файл. CSS - використовувати таблиці стилів для всього. Будь-виведення інформації повинен в ідеалі відбуватися через CSS, а не завантажуватися щоразу громіздким кодом.
- Налаштувати правильні редіректи, щоб всі сторінки відповідали 200. А там, де потрібен редирект з перенесенням ваги сторінки, наприклад, при зміні її адреси, віддавався код 301. Виключити помилки 5хх, а якщо вони повторюються, то знайти причину в хостера, сторонніх плагінах і таке інше і вирішити її.
висновок
Технічна оптимізація сайту - це процес досить трудомісткий і вимагає спеціальних знань. Але використовуючи загальноприйняті рекомендації та інструкції, налаштувати сайт зможе навіть той, хто вчора вперше заливав движок на хостинг.
- Читайте статті на цю тему:
Вітаю друзі, з даної статті ви дізнаєтеся - як очистити HTML код, як оптимізувати картинки, як правильно оформити і оптимізувати метатеги, як зробити сайт швидше, дізнаєтеся для чого потрібно оптимізувати скрипти сайту.
Одним із важливих заходів щодо внутрішньої оптимізації сайту є оптимізація коду сторінок. За рахунок цього можна поліпшити загальну якість ресурсу, збільшити швидкість завантаження сторінок, підвищити ефективність роботи інтерактивних функцій.
Валідація та стандартизація HTML
Принципово важливо для пошукового просування і забезпечення позитивного користувацького досвіду, щоб сайт міг однаково добре працювати в будь-яких браузерах, на різних операційних системах, в мобільних і стаціонарних комп'ютерах.
Для досягнення загальної уніфікації всі сайти розробляються на основі стандартних версій HTML. Найбільш актуальними сьогодні є версії HTML 4.1 і HTML5. Остання хоча все ще і знаходиться в стадії розробки, в мережі вже опубліковано величезну кількість таких сайтів.
Всі найпопулярніші браузери - Opera, Google Chrome, Mozilla Firefox в своїх останніх версіях використовують підтримку нового гіперязика HTML5. Важливість використання HTML5 для створення сайтів ще й в тому, що мобільні комп'ютери на базі операційної системи Android не підтримують технологію Flash і користувачі не зможуть переглядати відео в форматі SWF.
Сайти на основі HTML5 здатні відтворювати відео без необхідності завантаження і установки Adobe Flash Player. Тенденція до відмови від флеш розширюється, тому для нормальної роботи сайтів корисно поступово відмовлятися від використання флеш-відео і анімованих банерів цього формату.
Перевірити валідність HTML-коду сайту можна безкоштовно на офіційному сайті Консорціуму Всесвітньої Павутини, ось наприклад цей
validator.w3.org
Вбудовані валідатори є в хороших конструкторах сайтів і системах управління контентом.
Очищення HTML-коду
В процесі створення і подальшого редагування веб-сторінок програміст поспіхом залишає на сторінках технічні замітки, коментарі, забуває видаляти зайві теги. Все це не тільки сповільнює роботу сайту, але і знижує функціональні можливості. За рахунок простого видалення HTML-сміття можна прискорити завантаження сторінок сайту буквально на 35%.
До шкідливого сміття відносяться також биті, непрацюючі посилання, які нікуди не ведуть, бо реципієнт був видалений. Такі посилання дуже не подобаються пошуковим системам. Наявність битих посилань може негативно відбиватися на пошуковому проводження ресурсу.
Оскільки биті посилання мають властивість час від часу виникати самі собою, необхідно регулярно проводити їх пошук і видалення. Це відноситься як до зовнішніх, так і внутрішніх посиланнях. Якщо система управління контентом не має опції пошуку битих посилань - можна скористатися безкоштовними онлайн-сервісами.
http://creatingonline.com/site_promotion/broken_link_checker.htm
http://anybrowser.com/linkchecker.html
Оптимізація графічного контенту
Важливо приділяти увагу оптимізації графіки, оскільки для публікації на сторінках сайту все зображення повинні бути відповідним чином оброблені.
- Для публікації фотографій доцільно використовувати формат JPEG, оскільки цей тип файлів забезпечує кращу якість при мінімальній вазі.
- Для збереження картинок, для яких якість не дуже важливо, можна вибрати формат PNG при вазі файлів не більше 100 або 200 КБ.
- Всі графічні файли потрібно, за сучасними стандартами, зберігати в стислому вигляді і в окремій директорії на сервері, але не впроваджувати в веб-сторінки.
Після редагування сторінки, що містить зображення, необхідно перевірити швидкість завантаження. Сторінка повинна з'явитися в браузері не більше ніж протягом п'яти секунд. Інакше показати відмов різко зростає.
Найповніший пошук зображень мають метатеги, які необхідно оптимізувати додаванням ключових слів і цим поліпшити їх пошук в інтернеті. Основна вимога до оптимізація метатегов зображень - унікальність. У всіх картинок повинні різні назви, спливаючі підказки і альтернативні тексти.
Метатеги веб-сторінки
Метатеги для різних сторінок сайту повинні бути в обов'язковому порядку унікальними. При виявленні дубльованих тегів пошукова система їх склеює і частина сторінок в такий спосіб не буде проіндексована. Експерименти показали, що Унікалізація метатегов сайту покращує ранжування і підвищує відвідуваність приблизно на 18%.
Особливу увагу слід приділити оптимізації тегів Title і Description
- Заголовок сторінки повинен складатися не більше ніж з дозволеного пошуковою системою кількості символів і містити головне ключове слово.
- Оптимальна кількість слів для заголовка - шість.
- Опис сторінки оформляється як свого роду текст, для посадкової сторінки і зазвичай складається з двох коротких пропозицій. У першому реченні міститься головне ключове слово, а в другому - додаткове.
- Метатеги Keywords не надто важливі, але повинні бути на всякий випадок.
Я у себе наприклад взагалі видалив з самого движка частина коду який відповідає за метатеги.
Оптимізація програмних елементів - скриптів
Принципи оптимізації скриптів такі ж, ка для графіки - на сторінці не розміщувати, зберігати в стислому вигляді в особливій директорії.
Ваша сторінка повинна бути чистою, робот заходить на ваш сайт повинен бачити тільки чисту сторінку, на якій буде тільки стаття, ну і необхідні метатеги. Тому потрібно все скрипти, лічильники і т.д. помістити в окремий файл.
Оптимізація текстового контенту
SEO-фахівцям вже давно відомо, що поряд із зовнішніми і внутрішніми факторами ранжування сайтів в пошукових системах на позиції в SERP'е впливають і т.зв. поведінкові (призначені для користувача) фактори. Незважаючи на це останнім приділяють недостатню увагу. Причин цьому безліч. По-перше, не всі SEO-компанії, особливо що займаються «конвеєрним» клієнтським просуванням, можуть виділити ресурси на аналіз впливу поведінкових факторів, моніторинг показників відмов і кількість переглядів сторінок, аналіз трафіку, що йде на сайт і т.д. По-друге, фахівці середнього рівня до сих пір працюють за принципом «зробив - купив посилання - чекаю позиції». По-третє, деякі оптимізатори не приділяють увагу призначеним для користувача факторам з тієї причини, що не вважають це за потрібне, лінуються або просто не знають про них.
Проте, на оптимізаторських конференціях представники Яндекса дають зрозуміти, що роль поведінкових факторів стає для пошукової системи все більш значущою. Серед безлічі критеріїв, що впливають на ці фактори, є оптимізація коду сторінок сайту, Якої, на жаль, дуже часто не приділяють уваги при організації просування інтернет-ресурсів.
Навіщо це потрібно?
Відповідь проста. Оптимізація коду не тільки прискорить завантаження сторінок, але і зробить сайт більш дружнім до пошукових систем - код стане чистим і красивим, а його елементи будуть розташовуватися в потрібних місцях. Крім того, спочатку скептично сприйняте оптимізаторами в листопаді 2009 заяву Google про те, що швидкість завантаження web-документа є одним з факторів ранжирування, тільки підтверджує той факт, що оптимізацією коду сторінок слід займатися. Тим більше, що на цей фактор оптимізатор може впливати сам.
Складові оптимізації коду
Ні для кого не секрет, що пошукові роботи не бачать дизайн сторінки - вони читають її код, причому роблять це також як і людина - зверху-вниз, зліва-направо. Інформації, що знаходиться вгорі коду тих чи інших елементів, пошукові системи дають більший пріоритет. Таким чином, при SEO-верстки найбільш важливі елементи або сторінки слід розташовувати вище другорядних елементів. Нижче наведено варіанти для оптимізації коду сторінок, які дозволять зробити кампанію по його просуванню в пошукових системах більш ефективною.
1. Title,Description іKeywords - маємо відразу після тега< head\u003e.
На поведінкові фактори істотний вплив може надати некроссбраузерная верстка. Сайт повинен однаково добре відображатися у всіх сучасних браузерах при різних дозволах. Досить часто можна побачити, коли браузер Internet Explorer некоректно відображає вміст сайту, причому відмінності з Firefox і Opera кардинальні. Якщо на такому сайті відсоток користувачів IE складе 20%, то ймовірність того, що показник відмов значно збільшиться, зростає. Нема проведе багато часу на такому сайті, ймовірно, відразу ж закриє вкладку і ніколи не повернеться на сайт повторно. Верстку сайту слід доручати професіоналам, для яких поняття «валідність» і «кроссбраузерность» - не порожні звуки.
8. Оптимізація картинок підweb.
Цей пункт відноситься більше до юзабіліті, але не сказати про нього не можна. Деякі веб-майстри не приділяють оптимізації картинок під web належної уваги. Проте, кожен користувач інтернету хоч раз потрапляв на сайт, де текстовий контент завантажувався швидко, а графічні зображення відкривалися з величезними труднощами.
З'ясовувалося, що справа не в не швидкої швидкості підключення до інтернету, а в тому, що здаються міні-картинки насправді мають величезні дозволу, але замість того, щоб стиснути зображення в графічному редакторі, верстальник в коді сторінки прописав атрибутам картинок «width »і« height »значення, в 15 разів, менші, ніж реальний дозвіл фотографій. Іноді доходить до того, що в веб-документі використовують зображення в формате.bmp, як відомо, мають набагато більші обсяги в порівнянні з ідентичними зображеннями в форматах.jpg ілі.gif. Як приклад можна привести сторінку про популярному зараз біатлоні - http://magdalena-neuner.narod.ru/nowfoto.html. Щоб подивитися в довантажувати всі фотографії, користувач змушений буде скачати близько 20 Мб трафіку, оскільки 90% зображень там виконано в bmp-форматі.
Як бути і що робити в нинішніх умовах?
У більшості випадків, на практиці виходить так, що клієнт замовляв створення сайту в одній веб-студії або у фрілансерів (на жаль, дані категорії не завжди мають правильне і сучасне уявлення про SEO-верстки), а просувати вирішив в одній з SEO-компаній , які, як правило, такі проблеми не вирішують і просувають то, що є своїми «конвеєрними» методами. В успішній SEO-кампанії в Яндексі в нинішніх реаліях дрібниць не буває. Тому фахівці, які надають професійні послуги просування сайтів по висококонкурентних запитах обов'язково повинні мати в своєму арсеналі відділ програмістів і верстальників, а також надавати і послуги зі створення сайтів. Замовникам, в свою чергу, бажано орієнтуватися на підрядників, успішно займаються і створенням, і просуванням сайтів одночасно або, як мінімум, мають хорошу технічну підтримку.
Варто відзначити, що оптимізація коду сторінок не гарантує підвищення позицій по ключових запитах, але не приділяти цьому уваги в умовах MatrixNet і поведінкових факторів не можна, а працювати над цим потрібно вже зараз.
Оптимізувати код 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 підключався один єдиний файл:
...