Как сделать оптимизацию html

Обновлено: 04.07.2024

Поисковая оптимизация сайта или SEO (англ. search engine optimization) - процесс корректировки HTML-кода, текстового наполнения (контента), структуры сайта, контроль внешних факторов для соответствия требованиям алгоритма поисковых систем, с целью поднятия позиции сайта в результатах поиска в этих системах по определенным запросам пользователей. Чем выше позиция сайта в результатах поиска, тем больше вероятность, что посетитель перейдет на него с поисковых систем, поскольку люди обычно идут по первым ссылкам, которые находятся в ТОП-10 поисковых выдач, например, в сервисах Google, Yandex, Bing, Yahoo и др.

SEO optimization. Продвижение и раскрутка. ТОП-10 в результатах поиска

Поисковые системы ранжируют сайты в поисковой выдаче по определенному коэффициенту релевантности (то есть, соответствия) ключевому запросу. Существует более 200 факторов ранжирования, используемых SEO-оптимизаторами для продвижения сайтов. Используя и максимально учитывая все эти 200 факторов, можно получить высококачественный сайт, который будет отвечать требованиям поисковых систем.

Методы SEO оптимизации

Методы оптимизации можно условно разделить на три класса:

Белая оптимизация - работа над ресурсом без применения официально запрещенных каждой поисковой системой методов раскрутки ресурса - без влияния на поисковые алгоритмы сайтов. Обо всех разрешенных методах поисковой оптимизации можно узнать непосредственно на поисковых сервисах;
Серая оптимизация - сюда можно отнести добавление большого количества ключевых слов в текст страницы, часто с потерей читабельности для человека, неоднократное повторение ключевых запросов определенное количество раз в разных падежах, единственном и множественном числе, а также различных формах глаголов и т.п.;
Чёрная оптимизация - это все методы, которые противоречат правилам поисковых систем. Среди них можно выделить следующие: использование дорвеев (страниц и ресурсов, созданных специально для роботов поисковых систем, зачастую с большим количеством ключевых слов на странице), приём под названием клоакинг (пользователю отдается одна страница, легко читается, а поисковому роботу - другая, оптимизированная под какие-либо запросы), использование скрытого текста на страницах сайта, использование "однопиксельных ссылок" и т.п.

Кратко про SEO оптимизацию сайтов

Вообще, если с самого начала делать сайт по общепринятым рекомендациям и в соответствии с ныне действующей спецификацией HTML5 , который проходит валидацию без ошибок и предупреждений при проверке валидатором, то сайт уже будет прекрасно находиться различными поисковыми сервисами, в частности, такими как Google или Yandex. И хотя правильно сверстанный и валидный сайт ещё не означает присутствие в ТОП-10 поисковых выдач по соответствующим запросам и согласно определенной на сайте тематике, всё равно это уже гарантирует его возможный успех в индексации и появлению в поисковой выдаче, пусть даже и не в первой десятке.

А для того, чтобы сайт появился в ТОП-10 результатов поиска, конечно, необходимо уделить должное внимание его SEO оптимизации с принятием всех необходимых мер для его продвижения и раскрутки. Особенно это касается коммерческих сайтов, владельцы которых имеют целью зарабатывание с помощью сайта денег и получение прибыли за счёт интернет-пользователей.

Некоторые СЕО-оптимизаторы используют методы поисковой оптимизации сайтов, которые не всегда являются "честными", когда благодаря искусственно добавленным ключевым словам или фразам на страницах такой сайт попадает в ТОП-10 поисковой выдачи, но сам сайт не содержит полезной для пользователей информации. Сейчас такие "чёрные" методы поисковой оптимизации прекрасно распознаются поисковыми сервисами, которые даже блокируют такие сайты, выбрасывая их из своих результатов поиска вообще.

Но любой веб-мастер, веб-разработчик или веб-дизайнер, который работает непосредственно с HTML кодом, может провести SEO оптимизацию сайта для поисковых сервисов самостоятельно, используя очень простые, но достаточно эффективные методы для попадания в ТОП-10 поисковой выдачи. Для этого необходимо лишь соблюдать определенные правила и рекомендации, которые сообщают сами поисковые сервисы, такие как Google, Yandex, Yahoo, Bing и другие. Ниже приводятся лишь некоторые, но наиболее важные рекомендации и требования по SEO оптимизации сайтов и, в результате, возможного попадания их в первую десятку поисковой выдачи.

Файлы к статье: WebOptHtml_v_1.0.zip

Все мы когда-то подключившись к Интернету удивлялись красоте и посещаемости (а иногда и некрасоте) увиденных интернет проектов. Поэтому сразу возникало желание создать что нибудь такое грандиозное, чтобы все сёрферы Интернета аж охнули от увиденного.

Мы сидели ночами вглядываясь в монитор и верстали, верстали html страницы, но никто из нас тогда даже и не задумывался о качестве вёрстки, весе страниц. Только теперь вникнув в проблему создания сайтов мы стали понимать, что надо сделать вёстку по возможности простой и чтоб наши интернет проекты быстро грузились, так как не многие имеют высокоскоростной доступ в Интернет.

Посидев пару дней я постарался сделать программу, которая будет по возможности качественно оптимизировать html файлы. Для описания качества работы программы хотелось бы сказать, что скаченный файл с Интернета весом 71 кВ был оптимизирован с помощью программы WebOptHtml_v_1.0 до 46,4 кВ я думаю это о чём — то говорит.

— Удаление комментариев из html файлов;
— Удаление пробелов внутри html тэгов ( или , или , или , или );
— Возведение html тэгов в верхний регистр;
— Удаление пустых строк в файлах;
— Удаление знаков табуляции;
— Удаление лишних пробелов.

Плюсом программы WebOptHtml_v_1.0 является то, что все функции обработки файлов можно легко настраивать по своиму вкусу и по требованию качества оптимизации.

Программа WebOptHtml_v_1.0 является лишь попыткой для уменьшения веса html страниц и увеличения скорости их загрузки.

Как работать с программой:

Прежде всего создайте каталоги file — файлы подлежащие оптимизации, opt — оптимизированные файлы.

Для начала работы Вам необходимо указать файлы для обработки в переменной ‘$array’. Пример задания файлов:1html,2.html,3.html. Список файлов задаётся через запятую без пробелов. Я реализовал графический интерфейс и список файлов у меня поступает из формы.
Желательно чтобы количество обрабатываем файлов было примерно не более 10.

Объявляете класс OPT:

Вызываете главную функцию обработки:

В параметре ‘$type’ указывается вид обработки — оператор switch. Парметр ‘$type’ я реализовал с помощью формы select.

Если Вы хотите чтобы сохранялась читабельность html вёрстки Вам необходимо удалить первую строчку в функции nl2br_file(). Оптимизация файлов будет намного качественнее если Вы каждый блок файла будете отделять пустой строчкой:

Продолжая тему внутренней оптимизации, займёмся оптимизацией кода сайта.

Оптимизацию кода можно разделить на 3 составляющие.

1. Коммутация — уменьшение нагрузки на сервер и увеличение скорости сайта.

2. Сжатие — ускорение обработки кода и увеличение скорости сайта.

3. Очистка кода от ошибок — повышение лояльности поисковых систем.

Рассмотрим по порядку.

Коммутация

Системы управления динамическими сайтами пишутся на php.

Это значит, что при формировании страницы и каждого её элемента отправляется запрос на сервер, ответ с которого и выводится на экран.

Теперь представьте сколько на странице элементов и сколько в связи с этим отправляется запросов, прежде чем та страница во всей красе отрисуется на экране монитора.

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

Сделать это можно преобразовав некоторые элементы в статические, т.е. разместить их сразу на странице, чтобы загружались вместе с ней.

Внешний вид страницы формируется в файлах шаблона, значит идём в Консоль — Внешний вид — Редактор.

Открываем файл header.php и первым делом смотрим область тега head

Как видите, с первой же строки идут запросы к базе данных, а ведь можно эту информацию из БД разместить прямо в head.

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

А теперь сравните код на странице, с кодом в файле. По сути ведь это одно и то же, но в коде страницы php уже отработал, и вывел из БД статические URL и тексты заголовка и описания.

Практически всё что до плагина All in One SEO Pack, кроме title, он для каждой страницы свой, можно перенести в файл, а запросы к БД убрать.

Значит оставляем в файле , а дальше в области head файла header.php, меняем:

То есть все рабочие теги, которые имеют отношение ко всему сайту, будь то RSS или Xml, или файлы стилей и Js, можно проставить с фактическими адресами, как в Коде страницы, а не с запросом к БД, как в файле header.php по умолчанию.

После области head с рабочими тегами, если спуститься немного вниз, то можно найти заголовок и описание сайта — site-title и site-description.

Они так же неизменны для всех страниц, поэтому их можно просто прописать текстом в соответствующих им тегах.

Итак, несколько тормозящих запросов убрали. Теперь займёмся сжатием.

Сжатие кода

Сразу оговорюсь, браться за него можно тогда, когда внешний вид сайта уже в основном определился и особых корректировок уже не предвидится.

Можно конечно это предупреждение игнорировать, но тогда при внесении изменений в код, ощутимо прибавится работы.

Однако такой вариант мы тоже предусмотрим.

Итак, все вы наверно читали пожелание PageSpeed Insights оптимизировать файл стилей.

Style.css порой раздувается до огромных размеров, всё зависит от фантазии веб мастера, и его желания сделать свой сайт неповторимым.

Каждая строка этого файла требует некоторого времени, которое необходимо для прочтения её браузером, если включён его кеш, или если кеш не включен — время на выполнения запроса.

Чтоб это время ощутимо сократить, будем сжимать код. Сначала css.

Для этого обязательно скопируем наш файл стилей и сохраним его на компьютере, а затем идём в сервис Cleancss, показавший себя лучшим среди нескольких подобных.

В нём выбираем CSS Minifi, вставляем в поле сервиса весь код файла, нажимаем Minifi и получаем результат — сжатый файл.

Дальше дело техники: убираем из файла открытый код, вставляем сжатый, сохраняем, очищаем папку кеша движка если стоит плагин и через некоторое время идём опять в PageSpeed Insights посмотреть, что дало сжатие.

Ну вот и позеленело, хотя ещё не совсем. И зеленее видали. Но всё же не плохо.

Умный браузер эти ошибки пропускает, а вот сервис работает на сжатие жестко.

Значит нужно писать без ошибок, или сжимать файл вручную, просто удаляя все пробелы и комментарии.

Тем не менее, если что-то вдруг перекосит, всегда можно сжатый код снести, вставить обратно скопированный заранее оригинал, и начать всё по новой.

Почему следует попытаться сделать ещё раз?

Перекосы — результат ошибок, а ошибки — результат невнимательности веб мастера.

Так что если в первый раз постигла неудача, надо внимательнее исследовать файл на предмет повторяющихся селекторов, или аккуратнее удалять пробелы, и всё получится.

То же самое можно проделать с JS и html.

При необходимости редактирования сжатого файла, так же сносится сжатый вариант, вставляется оригинал, редактируется, копируется, сохраняется и вновь сжимается.

Для тех кому все эти, надо признаться непростые, манипуляции окажутся не по силам, и у кого нет стойкого предубеждения против плагинов, рекомендую плагин Autoptimize.

При тестировании, в линейке подобных, он понравился мне больше всех, так как работает корректно на всех шаблонах, ничего не ломая ни в общем, ни на страницах.

В PageSpeed Insights есть и другие рекомендации, касающиеся кода css и js в верхней части страницы, по ним будет следующая статья, так как вопрос решается не оптимизацией кода, а отложенной или асинхронной загрузкой.

Очистка кода от ошибок

Оптимизация html кода сводится, главным образом к очистке его от ошибок.

Современные умные браузеры в большинстве случаев пропускают мелкие ошибки, и отображают элемент как надо, но для поисковых роботов эти ошибки являются хоть и небольшой, но головной болью.

Для раскрученного ресурса с большим объёмом контента, мелкие ошибки большой угрозы не представляют, а вот на молодом сайте, которому ещё только предстоит завоёвывать авторитет, их надо исправлять.

Для исправления ошибок в html коде, существует сервис W3C validator.

Если ввести в поле Address: адрес страницы, то ниже будут показаны все ошибки html, имеющиеся на этой странице.

Сервис англоязычный, поэтому необходим браузер с переводчиком.

В описании ошибки показана строка кода и порядковый номер строки в коде страницы.

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

И даже если вы запросто найдёте кривую строку в коде страницы, то найти её в файлах сайта будет не просто.

Несколько советов на вопрос Где искать.

Первым делом просматриваются файлы header.php и footer.php, затем виджеты Текст, если вы таковые добавляли и писали там что-то на html.

И самые распространённые поставщики ошибок — рекламные баннеры и, в некоторых случаях, плагины.

Значит открываем все по очереди, и ищем указанную валидатором строку.

Зачастую строка в коде страници является сгенерированой динамически и тогда искать её в файлах приходится по элементам этой строки, атрибутам, адресу ссылки и т.п. Та ещё работёнка.

Я думаю ни для кого не секрет, что скорость загрузки страницы влияет на множество факторов. Если кто-то не в курсе, то вкратце скажу следующее, что скорость загрузки влияет не только на то, дождется ли посетитель, когда загрузится Ваш сайт, но и на SEO оптимизацию. Ведь на сегодняшний день уже многие поисковые системы при ранжировании сайтов, начали учитывать скорость загрузки страницы. Поэтому чем быстрее будет грузиться Ваш сайт, тем больше посетителей Вы можете получить с поисковых систем, а, следовательно, и больше денег на этом заработать.

Поэтому в этой статья я решил собрать топ-10 советов о том, как же можно увеличить скорость загрузки веб-странички и сайта в целом. Статья не претендует на гениальность и рассчитана на новичков.

Но как уменьшить количество запросов к серверу не затрагивая внешний вид страницы?

На самом деле есть несколько способ.

2. Помещайте CSS файлы в начале страницы

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

3. Помещайте javascript в конец страницы

4. Минимизируйте css и javascript

Минимизация файла — это удаление из кода всех несущественных символов с целью уменьшения объема файла и ускорения его загрузки. В минимизированном файле удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Здесь все просто. Чем меньше объем файла, тем меньше времени понадобится браузеру на его загрузку. А минимизировать Ваш код помогут вот эти 24 онлайн-сервиса для сжатия и оптимизации CSS кода
5. Используйте поддомены для параллельного скачивания

6. Используйте кэш браузера

7. Используйте CDN для загрузки популярных JavaScript библиотек

Если на Вашем сайте используется популярный javascript фреймворк, например jQuery, то для его подключения лучше использовать CDN.

CDN (Content Delivery Network) — это множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту. Сервер, который непосредственно будет отдавать контент пользователю, выбирается на основании некоторых показателей. Например, выбирается сервер с наименьшим числом промежуточных хопов до него либо с наименьшим временем отклика. Кроме того браузер кэширует javascript-файлы, и если Вы посещали сайты на котором используется такой метод, то эта библиотека уже есть в кэше Вашего браузера, и он не будет загружать её снова.

Одним из таких CDN — является Google Libraries. Это CDN для популярных open-source JavaScript библиотек. Загрузка популярных javascript фреймверков с Google Libraries позволяет увеличить скорость загрузки страницы и снизит траффик на ваш сервер.

8. Оптимизируйте ваши изображения

Необходимо определять подходящий формат для ваших изображений. Выбор неверного формата изображения, может существенно увеличить размер файла.

GIF — идеально подходят для изображений с несколькими цветами, например логотип.
JPEG — отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
PNG — ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.

Оптимизировать изображение можно двумя способами: используя программы или онлайн сервисы в Интеренете для сжатия изображений. В первом случае от Вас потребуются определенные знания для работы с той или иной программой, а вот воспользоваться онлайн сервисами может каждый. От Вас лишь требуется загрузить нужные изображения, а сервис сам оптимизирует их и выдаст ссылку на скачивание уже сжатиых файлов.

Вот несколько онлайн сервисов для оптимизации изображений:

9. Не масштабируйте изображения

Не изменяйте размер изображения при помощи атрибутов width и height тега , либо при помощи CSS. Это тоже негативно влияет на скорость загрузки страницы. Если у Вас есть изображение размером 500x500px, а вставить на сайт Вы хотите изображение с размером 100x100px, то лучше изменить размер оригинальной картинки при помощи графического редактора Photoshop, или любого другого. Чем меньший вес картинки, тем меньше времени потребуется для её загрузки.

10. Используйте Gzip- сжатие

Accept-Encoding: gzip, deflate

Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.

Переданные таким образом данные меньше первоначальных примерно в 5 раз, и это существенно ускоряет их доставку. Однако здесь есть один недостаток: увеличивается нагрузка на веб-сервер. Но вопрос с сервером всегда можно решить. Так что не будем обращать на это внимание.

Для того, чтобы включить GZIP-сжатие на своем сайте, необходимо в файле .htaccess прописать следующие строки кода:

Если данный способ сработал, то отлично, если нет, то можно попробовать вот такой вот код:

Но опять таки, данный код работает не на всех серверах, поэтому лучше обратиться в службу поддержки Вашего хостинг-провайдера и уточнить этот вопрос.

Ну вот собственно и все, что я хотел рассказать. В данной статье я постарался перечислить все основные способы клиентской оптимизации для увеличения скорости загрузки веб-страницы. Кроме клиентской оптимизации существует еще и серверная оптимизация. Но это уже тема для отдельной статьи.

Сделать свой сайт быстрым – актуальная задача для любого владельца ресурса или вебмастера. Ведь скорость загрузки станиц входит в число важнейших факторов успешности веб-ресурса, наряду с качественным контентом и красивым графическим оформлением.

Медленная загрузка увеличивает вероятность потери пользователей в разы. Особенно, когда посетители заходят с мобильных устройств. Свести к минимуму вероятность потери трафика помогут простые рекомендации по ускорению загрузки сайта, которые сможет внедрить на практике даже неопытный пользователь.

Статистика проводит прямую связь между скоростью выдачи информации и поведением пользователей.

1. Оптимизируйте HTML-код и CSS-, JS-файлы

Как минимизировать код для ускорения загрузки сайта

Удалить лишние символы, элементы разметки и теги исходного кода. Автоматизировать процесс поможет добавление небольшой вставки в начало и конец HTML-кода сайта.

Сделать это можно несколькими способами:

Комбинировать нескольких изображений в один графический файл (CSS-спрайт);
Использовать встроенные изображения (Inline-картинки) в таблице стилей страницы;
Несколько CSS-файлов или скриптов на одной странице объединить в один файл;
Минимизировать число скриптов и плагинов.

3. Расположите JavaScript и CSS в нужном порядке

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

4. Уменьшите число внешних скриптов

Внешние скрипты – это куски кода (сценарии), которые задействуются по внешней ссылке. Ссылки создают дополнительные запросы к множеству разных серверов, что в итоге замедляет работу сайта. Чтобы избежать этого, рекомендуется пользоваться преимущественно локальными скриптами, встроенными в структуру исходного кода страницы.

5. Задействуйте функцию flush

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

Размещать функцию flush лучше в начале исходного кода страницы, сразу за head. Из заголовка HTML-контент будет открываться быстрее, к тому же так можно включить параллельную загрузку элементов CSS и JavaScript.

6. Кэшируйте страницы

Кеширование сохраняет часть информации со страниц сайта (флеш, графику, JavaScript и CSS) в браузер пользователя. При следующем заходе эти файлы мгновенно загружаются из браузера, давая сайту дополнительную скорость.

Подключить кэширование можно путём добавления в HTML-код заголовка expires. Сайты на WordPress легко кэшируются с помощью установки плагинов с бесплатным или частично бесплатным функционалом, вроде W3 Total Cache, Cache Enabler или Zen Cach.

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

7. Пользуйтесь CDN

Сеть доставки контента (Content Delivery Network) – цепочка серверов, разбросанных в дата-центрах по всему миру с целью увеличения скорости передачи контента ресурса посетителям. Чем ближе посетитель находится географически от CDN-серверов, тем быстрее передаются пакеты данных с сайта.

Сеть доставки и дистрибуции контента делает информацию доступнее для людей по всему миру

Использование CDN особенно актуально для контентных и высоконагруженных порталов, чья основная аудитория сильно удалена от физических серверов. Этот сервис минимизирует время ожидания загрузки с заграничных сайтов, способствуя повышению их рейтинга в локальной поисковой выдаче. Ведь контент загружается с ближайшего к пользователю серверного хранилища в его стране.

Популярные сети доставки контента (CDN)

8. Оптимизируйте графику и видео

Необходимо выбрать правильный формат графики и видео, так как формат файла напрямую влияет на скорость подачи информации посетителям.

Этапы оптимизации изображений

Шаг 1 – Уменьшение размера изображения.

Избежать потерь скорости при загрузке изображений помогут встроенные в ОС графические редакторы, вроде Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с похожим функционалом. Для работы с ними потребуются минимальные навыки работы с графикой.

Шаг 2 – Сжатие файла перед загрузкой.

9. Примените Gzip-сжатие файлов

Gzip-сжатие файлов, производится для того, чтобы уменьшить количество запросов на сервер с браузера. Проще говоря, эта технология уменьшает исходный вес файлов до 70% для ускорения загрузки.

Способы внедрения Gzip-сжатия

10. Сменить хостинг

Самый радикальный метод ускорения загрузки – смена хостинг-провайдера. Экономия на размещении ресурса часто приводит к значительному ухудшению качества услуг, что подрывает все попытки ускорить сайт на корню.

Вывод

Нельзя игнорировать такой показатель как скорость загрузки сайта. Именно он с первых секунд создаёт комфортную среду для посетителей. Чем быстрее пользователь получит искомый контент, тем больше вероятность, что будет сформирован позитивный образ ресурса и построена лояльность к нему.

Ищите надёжную площадку для размещения сайта? Веб-хостинг от Eternalhost – надёжный фундамент, который обеспечит быструю и бесперебойную работу интернет-ресурса!

В этой статье мы перечислили основные способы ускорения сайта. Но есть ещё много интересных и творческих идей по оптимизации данного процесса. А как вы добиваетесь ускорения загрузки? Пожалуйста, поделитесь опытом в комментариях!

Читайте также: