Оптимизация HTML кода для поисковиков..
Зачем это нужно и как это делать, я попытаюсь объяснить наиболее доступно. Если Вы чувствуете, что не понимаете хотя бы 20% этой статьи, то могу посоветовать скачать учебник по HTML. За последние 3-4 года поисковые системы очень сильно изменились. Причина этого - резкий рост количества web-сайтов. Прежние методы ранжирования результатов поиска не дают возможности расставить ресурсы в правильном порядке, необходим более точный инструмент для определения релевантности страницы. Что такое релевантность? Говоря простым языком - это соответствие найденной web-страницы введенному запросу. Каждая поисковая система имеет несколько роботов, которые постоянно ходят по Сети, переходя со страницы на страницу по ссылкам, за это их и называют пауками. По сути дела это просто программа, которая сохраняет в базы данных поисковой системы части HTML кода страниц.
Далее полученная информация обрабатывается(индексируется), согласно алгоритмам расчета релевантности и становится доступной для поиска. Естественно у каждой системы свои уникальные алгоритмы, которые к сожалению держатся в секрете. Основываясь на личном опыте, я попытаюсь рассказать на что нужно обращать внимание при оптимизации HTML кода. Но сначала хочу заметить, что существует еще один критерий, влияющий на выдачу результатов поиска - индекс цитирования.
Теперь к делу. Первое, что ищет робот, прейдя на сайт - это файл robots.txt, расположенный в корневом каталоге общедоступных документов. Если он его там не найдет - ничего страшного не случится.

Содержание robots.txt:
1. Строка "User-Agent:" после двоеточия перечисляется список роботов, к которым вы хотите обратиться.
2. Строка "Disallow:" - собственно обращение, вернее запрет на индексацию указанных после двоеточия директорий или
документов. Нужно указывать абсолютный путь, например: если надо запретить индексацию директории http://site.ru/secret/ ,
то строка будет выглядеть так -
Disallow: /secret/
Пока сайт не оптимизирован или полностью не готов, следует запретить его индексацию всем роботам. Соответственно robots.txt будет выглядеть так -

User-Agent: *
Disallow: /

Далее робот индексирует главную страницу и все остальные, на которые нашел ссылки (но не более 500 страниц за один раз).
Теперь рассмотрим сам HTML код. Прежде всего - это заголовок (то что между тегами ). Ему надо уделить много внимания, так как поисковые системы придают заголовкам большое значение при подсчете релевантности (особенно Яndex). Не
стоит здесь писать url вашего сайта - для этого есть адресная строка. Необходимо коротко и ясно отразить тему страницы, только не надо повторять одно и тоже много раз во всех падежах.
Допустим вы продаёте холодильники. Во многих магазинах я видел следующий заголовок
Неужели, люди ищущие это средство будут искать интернет магазин, а не само средство. Более разумным был бы такой заголовок:

Тег "description" - очень важный тег. Именно его увидят пользователи в результатах поиска и решат, посещать ли ваш сайт. В данном случае я бы написал: "Холодильники из европы по низким ценам. Бесплатная доставка."

Тег "keywords" - сильно влияет на релевантность страницы. В него нужно включать 7 - 10 слов (не больше) по которым пользователи ищут в поисковых системах информацию, аналогичную вашей. Не надо повторять одни и те же слова по нескольку раз - это не повлияет на релевантность. Слова пишите без запятых - через пробел, чтобы поисковая система могла сама
составить из них словосочетания. В тоже время старайтесь слова, составляющие наиболее популярные поисковые запросы, ставить рядом. И самое главное! в "keywords" не должно быть слов, которые не встречаются нигде на странице - это очень распространенная ошибка, которая приводит к снижению релевантности страницы.

В теге "revisit-after" не указывайте меньше 9 дней, это может не понравиться роботу.

Далее, сразу (или почти сразу) после тега должен располагаться логотип и/или заголовок. В поле "alt" логотипа укажите два-три слова, которые присутствуют и в заголовке и в "keywords" (по которым мы и оптимизируем страницу). В нашем примере это будет "средство от облысения". Заголовок должен быть аналогичный и обязательно между тегами

. Если
такой громоздкий заголовок не вписывается в концепцию дизайна, то его размер и цвет можно изменить в таблице стилей (CSS), главное чтобы заголовок оставался заголовком и выделялся на странице.

Если CSS расположить в отдельном файле то h1 можно придать любой внешний вид, вплоть до невидимости на странице. Паук не заметит подмены свойств (по крайней мере пока он этого делать не научился), но ходят упорные слухи что Google скоро прикроет и эту халяву:)) В любом случае не стесняйтесь использовать CSS, если надо придать заголовку более компактный вид
- это не будет считаться спамом. Но и не переборщите с количеством заголовков: 2-3 максимум, иначе вас исключат из базы данных поисковой системы. Если слово не из списка ключевых, не заключайте его в теги или , используйте их только при выделении ключевых слов. А как тогда выделять заголовки или пункты меню, не содержащие keywords ? Ответ простой
- используйте CSS. Старайтесь придерживаться частоты ключевых слов в 2%-7% и располагайте их как можно выше. Большую страницу, разбивайте на более мелкие (поисковым системам это нравится). Хотя общее количество страниц сайта, соответствующих запросу не сильно влияет на его положение в результатах поиска, все же лучше много небольших страниц, чем мало больших:). Не используйте фреймы - роботы их не "видят". Если без фреймов не обойтись, то описание сайта поместите в тег хоть это сильно не поможет... Элементы ImageMaps тоже мешают индексации. <br>Используйте стандартные HTML ссылки Site. И последнее - чужую рекламу, скрипты и коды<br>счетчиков заключайте в теги <noindex></noindex>, чтобы робот их не индексировал.</p> <p>Наверняка, каждый уважающий себя оптимизатор, уделяет немало времени работе над html-кодом. Эти шаги имеют определенное практическое значения, в плане удобства для пользователей и анализа сайта поисковой машиной.</p> <p>HTML ошибки могут усложнить индексацию и ранжирование страниц для определения релевантности их содержимого какому-то запросу. Обилие таких ошибок на разных страницах сайта говорит поисковикам о низком качестве всего веб-ресурса. Перечислим наиболее опасные html ошибки.</p> <p>Даже самые минимальные работы по оптимизации html-кода предусматривает знания:</p> <ol><li>Язык программирования html</li> <li>Систему управления сайтом CMS</li> <li>Знание CSS</li> </ol><p>Поисковая машина, непрерывно анализирует сотни сайтов, и даже самые гибкие параметры, могут оказать колоссальное значение при ранжировании, что не допустимо, в условиях конкуренции. Для оптимизатора, является важным уметь предвидеть и сориентироваться: какие факторы окажут ключевое значение при ранжировании.</p> <p>Оптимизация, в свою очередь не одномоментный процесс, а требует терпения и грамотности, особенно при работе с html-кодом.</p> <h2>Этапы оптимизации кода-html:</h2> <ol><li>Формирование файла CSS</li> <li>Удаление лишних тегов</li> <li>Применение глобальных блоков</li> </ol><h3>Работа с CSS:</h3> <p>В этом этапе, стоит перенести все стили таблиц, изображений, тела страницы, ссылок, меню и прочего, в стилевые таблицы. Это делается с той целью, чтоб код страницы стал чище, имел меньший вес.</p> <p>1. Имеем следующий код: <table style="background: url(/style/backs.jpg); border: black 2px double"></p> <p>2. Для создания класса, в таблице css прописываем: .newstyle {background: url(/style/backs.jpg); border: black 1px double.}</p> <p>3. Теперь, в таблицу можно вписать новый класс: <table class="newstyle"></p> <p>Очевидно, что код стал значительно меньше и теперь загрузку этого стиля можно применить на всех страницах. Этот метод подойдет для всех тегов, где прописаны стили.</p> <h3>Удаление лишних тегов:</h3> <p>Часто на странице можно встретить посторонние коды, ссылки на другие сайты, фреймы и прочее. Не стоит игнорировать этого.</p> <p>1. В первую очередь, стоит удалять посторонние ссылки, а если это ссылки на источник, то желательно помещать их в тег <noindex>, а также, прописывать параметр . Это делается для того, чтоб поисковые системы не считывали код из данного участка страницы.</p> <p>2. Не игнорируйте различные теги типа <IFRAME>, если Вы их не устанавливали.</p> <p>3. Также, существенное значения имеют ошибки в коде. Среди наиболее распространенных: незакрытые теги, открытые стили. Пример: <table style="width:100px> , а правильно: <table style="width:100px"></p> <h3>Глобальные блоки:</h3> <p>В данном случае, имеется ввиду, что код должен иметь структуру:</p> <p><head>...</head></p> <p>$GLOBAL_CONTENT$</p> <p>Глобальные блоки можно редактировать отдельно от основного кода. При этом нет необходимости редактировать каждую страницу при такой структуре сайта. В зависимости от CMS, можно применить самые различные методы глобализации.</p> <p>Таким образом, затратив немного времени - можно сэкономить его в будущем. Ведь оптимизация кода html - это не только залог успешного поискового продвижения, но и Ваш комфорт.</p> <h2>HTML ошибки - причина плохих позиций и даже бана</h2> <p>Различные ошибки HTML кода сайтов могут привести к значительному проседанию позиций в поиске. В некоторых случаях такие ресурсы могут оказаться под АГС или даже в бане. Безусловно, ошибки ошибкам рознь, ряд из них вообще не влияют на индексацию и позиции сайта. Рассмотрим наиболее опасные ошибки HTML кода страниц, которых нужно стараться избегать, чтобы не схлопотать санкции со стороны поисковиков.</p> <p>Незакрытые HTML теги – крайне опасная ошибка. Чем выше данный не закрытый тег расположен в коде странички, тем более он опасен. Не закрытый тег META или LINK в секции HEAD существенно понижал позиции по всем запросам. Эта страница не была видна даже в топ-100.</p> <p>Неправильно продекларированный doctype может привести к тому, что не закрытыми окажутся все теги в HEAD, что станет причиной бана веб-проекта в Yandex.</p> <p>Незакрытый тег NOINDEX – это менее опасная ошибка. Однако любители закрывать данным тегом содержимое страниц должны внимательно к нему относиться. Если оставите хоть один тег не закрытым, будет запрещена индексация всего содержимого до следующего тега noindex. Если же его не будет, поисковики не увидят всей страницы.</p> <p><i>Проверить наличие ошибок в HTML коде интернет-сайта можно с помощью одного надежного инструмента – валидатора кода </i> validator.w3.org.В этом случае необходимо ввести в специальную форму URL ресурса или вставить текстовый вариант кода страницы.</p> <h2>Критерии анализа юзабилити сайта</h2> <p>При оценке юзабилити сайта необходимо учитывать такие факторы:</p> <h3>1. Скорость загрузки страниц.</h3> <p>Быстро ли грузятся ваши странички. Предусмотрен ли метод пропуска используемой флеш заставки. Имеет ли сайт, сделанный на флеш, альтернативный HTML вариант.</p> <h3>2. Внешний вид.</h3> <p>Соблюден ли на всех страницах единый стиль оформления, особенно тут важны используемые шрифты, цвета и оформление ссылок. Гармоничны ли используемые для оформления цвета сайта. Не раздражают ли они посетителей. Не перегружены ли странички не нужной информацией. Не мешают ли яркие графические изображения нормально воспринимать контент. Насколько читабелен текст. Удобно ли просматривать сайт на экранах с разным разрешением, а также айфонах, айпадах и смартфонах. Корректно ли ваш сайт отображается в разных браузерах. Понятна ли с первого взгляда пользователям тематика сайта и его цель.</p> <h3>3. Структура и навигация.</h3> <p>Соответствует ли структура сайта логике. Находится ли навигация на всех страницах в одинаковом месте. Понимают ли посетители, что яркое пятно в верхнем левом углу страницы с кнопочками как картинки, это и есть навигация. Легко ли пользователям перемещаться по сайту. Можно ли в три клика найти нужную информацию. Правильно ли работают ссылки в навигации. Понимает ли пользователь, куда попадет при нажатии по ссылке.</p> <p>Есть ли на веб-ресурсе тупиковые страницы. При использовании вместо текстовых ссылок изображений важно сделать всплывающие подсказки, объясняющие, куда они приведут. Можно ли вернуться на предыдущий уровень ресурса без использования функций браузера.</p> <h3>4. Внутреннее содержание (контент).</h3> <p>Соответствуют ли публикуемые материалы основной тематике сайта. Насколько полно и качественно изложен материал, отсутствуют ли грамматические ошибки. Достоверна ли информация на вашем проекте, подкреплена ли она авторитетными источниками, которым можно верить. Не слишком ли объемны ваши посты, не утомит ли их чтение пользователей. Имеют ли ваши статьи понятную структуру для более легкого их понимания.</p> <p>Всем бы хотелось посещать сайты с приятным дизайном, не дожидаясь долгой загрузки их скриптов и изображений, чтобы можно было сразу понять, где и что на нем находится. Но это, увы, только мечты. В большинстве сайтов быстро разобраться довольно сложно.</p> <p>Приветствую Вас, дорогие друзья, на блоге сайт. Большинство пользователей воспринимают сайты только внешне, оценивая дизайн и структуру, но за привлекательными внешними составляющими стоит множество внутренних законов и правил, которые определяются стандартами W3C. К внутренним составляющим относится html-код и CSS-стили (без отдельного функционала). Часто веб-мастеров больше заботит лишь внешнее представление сайта. Однако внимания требует и внутреннее содержимое страниц в виде html-кода, особенно когда речь идет о привлечении поискового трафика.</p> <p>Для успешного продвижения в сети необходима хорошая внутренняя оптимизации сайта. Безусловно, оптимизация для поисковых систем перед началом продвижения – это важный момент. <span>Продвижение сайта с помощью ссылок </span> без оптимизации не будет эффективным и даже может навредить, понизив его посещаемость. При этом необходимо выявить все текущие проблемы и недоработки, которые на любом этапе могут свести на нет все достижения. Таким слабым звеном может оказаться html-код сайта.</p> <p>Анализ кода сайта можно провести при помощи различных валидаторов. Для самостоятельной оценки необходимо отключить файлы со стилями и скриптами. Такими их видят поисковые роботы. Если сайт медленно загружается, отображается некорректно, а поисковые системы не могут понять логику страниц, с ним точно будут проблемы. Код ресурса следует доработать.</p> <p>Оптимизацией кода сайта считается чисто технический процесс, который основан на сокращении объема кода сайта. Она необходима, прежде всего, ресурсам, для которых основным источник трафика являются поисковые системы. Главное правило – это простота. Все стили и скрипты необходимо вынести во внешние файлы. Код должен быть максимально легким и предельно понятным.</p> <p>Поисковые роботы должны быстро оценивать структуру страниц. Поэтому фреймы и флеш лучше не использовать. Эти элементы утяжеляют код, делая его более сложным. Все элементы дизайна тоже вынесите в файлы css-стилей, оформив в спрайты. Именно от простоты кода зависит уровень релевантности сайта и скорость индексации страниц. Для крупных ресурсов, имеющих высокую посещаемость, оптимизация кода является обязательной процедурой. При этом оптимизировать необходимо даже страницы, размер которых не больше 1 Мб.</p> <h2>Основные этапы оптимизации кода сайта</h2> <ul><li>Выделение заголовков h1-h6 – поисковые роботы в целом, поэтому не стоит забывать про правильное оформление текста.</li> <li>Уменьшение размера кода – чем меньше кода, тем легче и быстрее загружается страница. С недавних пор, скорость загрузки страниц, стала важным фактором ранжирования в выдаче Google, о чем было официально заявлено.</li> <li>Удаление вредоносного кода – на многих хостингах существует раздел антивирус, который сканирует файлы сайта и указывает путь к их решению. Отсутствие вредоносного кода делает сайт более предпочтительным для поисковиков.</li> <li><span>Внутренняя оптимизация сайта </span> – создание уникального текста, поддерживающего необходимую плотность ключевых слов.</li> <li> – равномерно распределяет вес страниц и повышает трафик по низкочастотным запросам, особенно при пополнении нового контента.</li> <li>Добавление мета тегов – title, keywords и description используются работами и отображаются на страницах поисковой выдачи. Правильно составленные мета-теги повышают релевантность страниц и привлекают пользователей.</li> <li>Оптимизация изображений – каждой картинке должен быть подобран оптимальный формат (GIF, JPEG, PNG и PNG-24), а также прописаны alt и title.</li> </ul><h2>Валидность кода сайта</h2> <p>Валидность – это соответствие кода общепринятым мировым стандартам W3C. Не валидный код сайта, содержащий множество ошибок, может стать препятствием в продвижении определенного ресурса. Если закрыты не все парные теги, возможны проблемы с отображением элементов дизайна. Но в действительности, даже сайты крупнейших поисковых систем не являются валидными на 100%. В чем причина такого несоответствия?</p> <ul><li>Высокая степень трудоемкости при стандартизации сайта и необходимость исключительного профессионализма разработчика при валидации большого динамического сайта.</li> <li>100% валидность html-кода не гарантирует кроссбраузерности, а также не страхует от ошибок при использовании старых браузеров.</li> </ul><p>Однако для ресурсов поменьше валидность html-кода является отличным бонусом для ранжирования по самым конкурентным запросам, к тому же покажет серьезность ресурса.</p> <h2>Оптимизация каскадных таблиц стилей</h2> <p><img src='https://i2.wp.com/firelinks.ru/images/blog/seo/optimizatsia-saita/meta-tegi.jpg' height="209" width="305" loading=lazy>Как и оптимизация html-кода, оптимизация стилей (css) является не менее важным мероприятием, которое упускается из виду многим веб-мастерами. Оптимизация css кода также ускоряет загрузку страниц сайта и экономит трафик. Поскольку css-файл весит до 100 Кб, многие веб-мастера не видят необходимости в его оптимизации, но если подумать, сколько трафика экономится при оптимизации файла в год, вы поймете, насколько ее недооценивали.</p> <p>Оптимизировать CSS можно вручную или с помощью специальных сервисов. У каждого варианта есть недостаток. При ручной оптимизации кода сайта можно многое упустить из виду, потратив при этом много времени. Однако машинная оптимизация может удалить строки, без которых дизайн может отображаться некорректно.</p> <h3>Настройка кодировки</h3> <p>Еще одним моментом, влияющим на <span>продвижение сайта </span>, является кодировка. Русскоязычный текст будет корректно отображаться только при условии правильной настройки кодировки, например, Windows-1251 или utf-8. При неправильной кодировке контента, знаки и символы будут искажены, что приведет к потере посетителей и замедленной индексации.</p> <p>Проблемы с кодировками характерны для старых ресурсов, где страницы создавались в инструментах типа Блокнот, а код сохранялся во множестве различных форматов. Некоторые современные браузеры не в состоянии распознавать такие кодировки.</p> <h2>Внутренняя оптимизация сайта</h2> <p>В большинстве случаев грамотная внутренняя оптимизация ресурса может вывести сайт на лучшие позиции поисковиков без существенных усилий и работы со ссылочными биржами. Важна каждая мелочь, влияющая на его позиции. Постарайтесь создать такую структуру, которая будет понятна и пользователям, и поисковым системам. Многостраничные порталы должны содержать систематизированные разделы, в которых все страницы находятся не дальше 3-4 кликов. Желательно использовать навигационную цепочку и удобные для человеческого восприятия веб-адреса. К сожалению, не все скрипты CMS обладают таким функционалом.</p> <h4>Заключение</h4> <p>Технический аспект успешного продвижения сайта решается за счет оптимизированного html-кода. Поисковые машины оценивают страницы сайта иначе, чем пользователи, поэтому чистый валидный код, способен подтолкнуть ваш ресурс вверх в поисковой выдаче, где всего несколько позиций иногда оказываются решающими.</p> <p>Надеюсь, материал будет полезен моим дорогим читателям. Подписывайтесь на обновления блога. Буду благодарен за нажатии кнопочек и репост данного материала. Увидимся в следующих статьях. Всем удачи.</p> <i> </i> <p>Оптимизировать код HTML и каскадные таблицы стилей (CSS) нужно для того, чтобы ускорить процесс загрузки сайта и контента, размещенного на нем. Экономия времени и трафика, в целом, спустя долгий срок после оптимизации, получится существенной, даже если внешне изменение скорости будет не очень заметно.</p> <h2><span>Оптимизация HTML-кода </span></h2> <p>Для того чтобы HTML-код способствовал быстрой загрузке сайта, он должен соответствовать нескольким условиям:</p> <ul><li>Быть простым и информативным. Проверив его на валидность, нужно исправить ошибки, чтобы ботам было легче анализировать его. Код должен четко представлять структуру страницы.</li> <li>Основные составляющие страниц, такие как заголовки, указатели, блоки информации должны быть легко и быстро определяемы.</li> <li>Освобождение кода от лишних сведений, вынесение их в отдельные файлы (например, можно вынести CSS и JS), повысит скорость загрузки, что также упрощает работу ботов.</li> </ul><p>Добившись выполнения этих условий, сайт можно сделать более быстрым, удобным и повысить эффективность индексации его ботами поисковых систем.</p> <p><span class="pK4wAjzpJ_E"></span> <span class="pK4wAjzpJ_E"></span></p> <h2><span>Уменьшение объема кода и оптимизация CSS </span></h2> <p>Сделать код сайта проще можно, уменьшив его объем. Для этого нужно выполнить несколько операций.</p> <p>Прежде всего, следует избегать флеш-технологий, JavaScript, фреймов, текста, представленного картинкой. Все элементы, какие возможно, следует оформить в отдельных, внешних файлах (например, CSS и JS, как уже отмечалось выше). Помогут для оптимизации кода специальные плагины. К примеру, можно установить плагин Autoptimize, который автоматически оптимизирует код HTML, CSS, JS (если поставить соответствующие галочки). Необходимо настроить грамотную и удобную навигацию по сайту, которая будет понятна пользователям и корректно распознаваема поисковиками. Это увеличит скорость, качество загрузки и индексации сайта.</p> <p>Что касается оптимизации CSS, то ее можно сделать самостоятельно или доверить это специальному ресурсу или программе. Ручная оптимизация – трудоемкий и длительный процесс, к тому же можно пропустить какие-то ошибки. Программа или сервис для оптимизации качественнее устранят недостатки, но могут нарушить некоторые функции, которые работали на сайте, и после проверки может некорректно отображаться контент, поэтому их работу нужно корректировать.</p> <p><img src='https://i1.wp.com/znet.ru/wp-content/uploads/2018/01/31fb66eaf90f42ca76368845de2a1bdc54c3d812.png' width="100%" loading=lazy></p> <p>Некоторые способы улучшить структуру CSS в ручном режиме:</p> <ul><li>Удалить лишние пробелы и разрывы строк, которые перегружают файл CSS и затрудняют работу роботов;</li> <li>Прописывать обобщающие свойства вместо несколько раз повторяющихся похожих команд;</li> <li>Использовать лаконичные, понятные описания в комментариях;</li> <li>Необычные шрифты прописывать при помощи стилей, а не изображений;</li> <li>Для картинок создавать alt и title (разные для каждого изображения), чтобы их содержание распознавалось ботами поисковых систем;</li> <li>Применять к заголовкам инструменты H1 – и далее, чтобы они корректно распознавались при индексации;</li> <li>Прописывать в keywords только те ключевые слова, которые используются на странице, минимизировать их количество;</li> <li>Использовать разнообразные и краткие мета-теги.</li> </ul><p><span class="TKDoAZvl1D8"></span> <span class="TKDoAZvl1D8"></span></p> <h2><span>CSS и HTML оптимизаторы </span></h2> <p>Удобно и быстро осуществить оптимизацию непосредственно в браузере можно при помощи специальных сервисов, например:</p> <ul><li>CleanCSS.com;</li> <li>CSS Optimizer;</li> <li>CSS Compressor;</li> <li>CY-PR.com;</li> <li>плагин Autoptimize.</li> </ul><p>Специалисты в SЕО и IT советуют пользоваться CleanCSS.com, так как он позволяет выбрать степень сжатия от низкой до высочайшей или подобрать индивидуальные настройки. После высокого и высочайшего уровней оптимизации код сайта принимает практически нечитаемый вид, и вносить в него изменения будет практически невозможно. Поэтому для начала следует воспользоваться стандартной оптимизацией. Можно выбрать режимы сжатия конкретного контента или оптимизацию отдельных параметров: сжатие шрифтов, изображений, удаление пробелов.</p> <p><img src='https://i0.wp.com/znet.ru/wp-content/uploads/2018/01/html-text.jpg' width="100%" loading=lazy></p> <p>На ресурсе CY-PR.com также есть похожий инструмент для оптимизации, который облегчает структуру CSS на 25-30%, но здесь нет возможности сформировать файл с кодом после выполнения операции.</p> <p>Остальные сервисы достаточно радикально могут поменять код так, что некоторые функции на сайте перестанут работать. Поэтому с их помощью лучше производить только локальные изменения в конкретных параметрах сайта.</p> <p>После оптимизации следует проверить работоспособность сайта, корректное отображение дизайна, скорость загрузки. Нормальной считается ситуация, когда страницы и пользовательские опции сайта загружаются не более 3-5 секунд.</p> <p>Для того чтобы проверить степень оптимизации и понять, насколько эффективно теперь прописан HTML-код, можно воспользоваться такими сервисами, как:</p> <ul><li>optimization.com;</li> <li>Портал seo-чеклист;</li> <li>плагин Firebug.</li> </ul><p>Эти инструменты помогут проверить, все ли сделано для уменьшения объема HTML-кода и улучшения его структуры. На ресурсе SEO-чеклист можно проверять по списку, что уже было сделано для оптимизации, а что – еще нет, и устанавливать пометку на совершенных делах.</p> <p><img src='https://i2.wp.com/znet.ru/wp-content/uploads/2018/01/html.jpg' width="100%" loading=lazy></p> <h2>Валидация </h2> <p>Проверить код сайта на наличие ошибок можно при помощи сервисов проверки валидации – валидаторов. Эффективная проверка кода осуществляется с помощью validator.w3c.org</p> <p>Если система при первой проверке выдаст более полутысячи ошибок, не стоит расстраиваться. После исправления определенного недочета, можно запускать проверку снова и ошибок станет намного меньше, так как один недостаток влечет за собой другие и при его исправлении они исчезнут.</p> <p>Сайт с исправленным и оптимизированным кодом имеет больше шансов на высокие позиции в выдаче, чем ресурс с перегруженным HTML-кодом, в котором присутствуют ошибки.</p> <p>Доброе утро, дорогие друзья! Получилось так, что неделя посвящена, в большей степени, оптимизации и ускорению загрузки лендинг пейдж. Сегодня продолжим “маньячить” в этой области. На очереди оптимизация css кода. Я расскажу вам про онлайн сервис для оптимизации таблиц стилей.</p> <p>Эти сервисы довольно просты и работают по принципу:</p> <p>“Вставил неоптимизированный код. Подождал несколько секунд. Скопировал оптимизированный код”</p> <p>Как видите – это довольно просто и не затратно, но не все находят время, чтобы заняться этим. А зря!</p> <h2>Онлайн оптимизация css</h2> <p>Первым делом следует уяснить, что не нужно бросаться в крайности. Дело в том, что, например, пробелы и переносы строк увеличивают общий вес страницы. Узнав об этом, вы можете начать удалять их все. В итоге, у вас будет совершенно не читаемый, но оптимизированный css код.</p> <p>Это хорошо только в том случае, когда вы работаете один, и таблица стилей больше никогда не будет редактироваться, ну, или почти никогда. Так как, если вы работаете в команде, человеку, читающему ваш код, будет очень тяжело в нем разобраться.</p> <p>Но даже, если вы сами взгляните на свою таблицу стилей через полгода, то вряд ли сможете легко понять, что в ней за что отвечает.</p> <p>Поэтому оптимизируем, но не сходим с ума — это первое.</p> <p>Второе — это то, что при использовании сервисов, которые предлагают оптимизацию css кода, важно понимать, что там происходит и что оптимизируется. Сейчас я покажу вам несколько примеров.</p> <p>Например, цвета. Обычно, мы задаем их в стандарте RGB. Белый фон для элемента задается следующим образом</p><p>Background: #ffffff; </p><p>Но не все знают, что если первые 3 значения повторяются, то можно оставить только их. Например, так:</p><p>Background: #fff; background: #000; color: #123; </p><p>Следующее, что приходит на ум – это отступы (padding и margin)</p><p>Padding: 10px 20px 10px 20px; /*вместо*/ padding: 10px 20px; margin: 15px 20px 15px 20px; /*вместо*/ margin: 15px 20px; </p><p>Также, оптимизировать css код можно за счет сокращенного задания шрифтов:</p><p>Font: bold 18px Verdana, Arial, sans-serif; </p><p>Font-size: 18px; font-family: Verdana, Arial, sans-serif; font-weight: bold; </p><p>Как видите – одна строчка против трех. И таким образом, иногда, удается уменьшить вес таблицы стилей на 20 – 30%.</p> <p>Третье, о чем стоит помнить, — это то, что всегда перед любой оптимизацией, будь то картинки или css, нужно делать резервную копию (на случай непредвиденной ошибки или еще чего). Просто возьмите себе за правило всегда делать копию перед редактированием.</p> <p>Теперь – все. Переходим к сервису.</p> <h3>Обзор сервиса для онлайн оптимизации css кода.</h3> <p>Большинство людей пользуются такими популярными сайтами для оптимизации css кода:</p> <p><b>alexvaleev.ru/cssoptimizer </b></p> <p><b>css-school.ru/optimise </b></p> <p>Функционал фактически одинаковый, простой и понятный. Но, проанализировав их, я нашел как плюсы, так и недостатки. Давайте посмотрим на один из них — css-school.ru/optimiser</p> <p>Слева окно для вставки css кода, а справа настройки параметров оптимизации. Разберем подробнее окно.</p> <p><img src='https://i1.wp.com/smartlanding.biz/wp-content/uploads/2014/08/optimizacija-css-onlajn.png' align="center" height="540" width="372" loading=lazy></p> <p>Степень сжатия.</p> <p>Для того, чтобы текст оставался удобочитаемым, необходимо поставить стандартную степень сжатия, в таком случае каждое новое свойство будет писаться с новой строки. Если выставить «высокую» или «максимальную», то размер файла будет меньше, но все будет записано в одну строчку. Это не очень удобно для дальнейших правок, но если их не будет, то смело можете ставить «максимальную».</p> <p>Следующим идет окно для задание своих шаблонов оптимизации, его пропустим.</p> <p>Далее идет вкладка, позволяющая выбрать, объединять селекторы с одинаковыми свойствами. Здесь все зависит от проекта и задач. Если вы писали css код строго в определенной последовательности и у вас все строго друг за дружкой, то не следует выбирать объединение селекторов. Так вам легче будет ориентироваться в коде.</p> <p>Оптимизация стилей. Оставляем – “безопасная”</p> <p>Сжатие цветов и свойств шрифтов – это то, о чем я вам говорил. Хотя и со сжатием свойств шрифтов — проблема. Он не оптимизирует код, как я вам рассказывал выше.</p> <p>Остальные настройки не вызывают вопросов. В общем я заметил, что все русскоязычные сервисы для <b>онлайн оптимизации css кода </b>, страдают “болезнью”. Они не оптимизируют css3 код. Что заставило меня полностью отказаться от подобных оптимизаторов.</p> <p>Для примера, я ввел следующий код:</p> <p><img src='https://i0.wp.com/smartlanding.biz/wp-content/uploads/2014/08/optimizacija-css.png' align="center" width="100%" loading=lazy></p> <p>Специально написал с пропусками строк, все подробно и т.д. И ожидал увидеть нечто подобное:</p><p>H1 { color: #fff; padding: 20px 25px; font: 700 18px Verdana, Arial, sans-serif } </p><p>Но к сожалению получилось всего лишь так:</p> <p><img src='https://i1.wp.com/smartlanding.biz/wp-content/uploads/2014/08/optimizacija-css-koda.png' align="center" width="100%" loading=lazy></p> <p>Семь строчек, вместо пяти. Это меня не устраивало. Я же хотел найти и рассказать вам о более качественном материале. Так как понимаю, что некоторые не знакомы с сокращенными видами записей стилей.</p> <p>А некоторый функционал сервисов мне показался лишним, ну или псевдофункционалом. Для того, чтобы создать видимость “навороченности” ресурса. Ну зачем мне галочка напротив «сокращать цвета». Конечно, если я пришел оптимизировать свой код, то мне нужно более короткое описание всего, что возможно! (Мое мнение)</p> <p>Итак, я продолжил поиск и нашел тот самый ресурс, который удовлетворил мои потребности в оптимизации css кода. Это — devilo.us</p> <p>Действительно потрясающий сервис, который я смело могу рекомендовать вам. Функционал такой же, как и у прошлых сайтов. Но этот справился с задачей на 100%. Смотрите:</p> <p><img src='https://i0.wp.com/smartlanding.biz/wp-content/uploads/2014/08/optimizacija-css-koda-dlja-sajta.png' align="center" width="100%" loading=lazy></p> <p>Как вы могли заметить, процент сжатия 43.3%, а на прошлом сайте было 25%. В байтах – это вышло 58 > 37. Вот такой я зануда. Но когда css файл имеет 3000 строк, то такая оптимизация может сократить вес документа вдвое.</p> <p>Конечно, со временем вы научитесь писать сразу оптимизированный css код, и подобные сервисы вам будут нужны все реже и реже, но проверить себя не мешает. Хотя бы на наличие лишних пробелов и пропусков строк.</p> <p>А на сегодня – все. До скорых встреч.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> </div> </div> <aside role="complementary"> <div class="block cat-list"> <div class="block-title"> <h3>Категории</h3> </div> <div class="block-content"> <ul> <li> <a href="/category/internet/">Интернет</a> </li> <li> <a href="/category/windows-10/">Windows 10</a> </li> <li> <a href="/category/multimedia/">Мультимедиа</a> </li> <li> <a href="/category/utilities/">Утилиты</a> </li> <li> <a href="/category/network-and-internet/">Сеть и интернет</a> </li> <li> <a href="/category/system-programs/">Системные программы</a> </li> <li> <a href="/category/configuring-programs/">Настройка программ</a> </li> <li> <a href="/category/os-problems/">Проблемы с ОС</a> </li> </ul> </div> </div> <div> </div> </aside> </div> </div> </section> </div> <footer class="b-footer"> <div class="container"> <div class="b-footer-content"> <p>rustrackers.ru - Бесплатные программы для вашего ПК</p> </div> </div> </footer> <div id="back-top" class="back-top bounce-out"> <a href="#" title="Наверх"></a> </div> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/libs/jquery/jquery.js"></script> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/vendor/jquery.colorbox-min.js"></script> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/scripts.min.js"></script> <script src="/bitrix/templates/newit_siteblog_response/site_files/js/custom/custom.js"></script> </body> </html>