Оптимизация кода сайта

Поисковая оптимизация кода web-сайта – это раздел SEO, направленный на улучшение удобства использования сайта посетителями и представления данных для анализа поисковыми системами независимо от качества контента сайта и упоминаний о сайте на других ресурсах.Оптимизация кода сайта

Оптимизацию кода можно разделить на два основных раздела: SEO-оптимизация кода и оптимизацию скорости загрузки сайта.

Внимание!!!
Перед выполнением любых изменений на сайте, сделайте его полную резервную копию!!!

SEO-оптимизация кода страницы сайта:

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

Оптимизация структуры страницы сайта

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

  • Заманивающая ключевая фраза страницы располагается в блоке <title>Заманивающая ключевая фраза</title>
  • Заманивающее описание информации о странице располагается в блоке <meta name=»description» content=»Заманивающее описание информации о странице «>
  • Самая важная ключевая фраза располагается в теге <h1> как можно ближе к началу страницы.
  • Самая важная информация страницы располагается сразу под заголовком <h1>
  • Заголовки <h2-6> и тексты после этих заголовков используются для привлечения трафика по менее важным (частотным) уточняющим вариантам главной ключевой фразы страницы
  • На странице сайта обязательно должен быть <title>, <meta name=»description» content=»»> и хотя бы один из заголовков (<h1>,<h2>,<h3>,<h4>,<h5> или <h6>)
  • Блоки ссылок, содержащие информацию, которая не соответствует теме страницы или просто не должна попасть в сниппет поисковой выдачи по данной странице, необходимо располагать выше (если смотреть на код страницы, а не на то как это выглядит для посетителя страницы) всех заголовков <h1-6> либо ниже всех заголовков, после заголовка, не соответствующего тематике страницы.
  • Заголовков h1 может быть несколько, хотя, многие оптимизаторы посчитают это заявление бредом, но поисковые системы заявляют, что это не запрещено. Пример использования: сайт Сбербанка.
  • Заголовки h2-6 могут быть выше заголовка h1, либо находиться на странице вообще без заголовков h Пример использования: сайт Авито.
  • Для формирования заголовка сниппета информация берётся из следующих источников в порядке приоритета, начиная с максимального: <title>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Если сайт зарегистрирован в Яндекс Каталоге, то заголовок и описание сниппета подтянутся на главную страницу сайта с большим приоритетом, чем информация на сайте. Отменить формирование данного сниппета можно тегом <meta name=»robots» content=»noyaca»/> в блоке <head>.
  • Для формирования описания сниппета, приоритет отдаётся части текста, содержащей текст, наиболее соответствующий ключевой фразе, после соответствующего запросу заголовка <h1-6> и до следующего заголовка h не соответствующего заголовку, либо из блока <meta name=»description» content=»»>
  • Различные поисковые системы руководствуются различными алгоритмами формирования сниппета: Яндекс отдаёт предпочтение контенту в блоке <body>, Google в большинстве случаев формирует сниппет из блоков title и description в блоке <head>.
  • Поисковая система Яндекс, при наличии других вариантов, никогда не сформирует сниппет, заголовок которого дублирует начало описания сниппета.
  • Распространённые знаки, которые разрывают фрагменты текста при формировании сниппета (как заголовка сниппета, так и его описания), записанные в кавычках и через запятую: «.», «|»
  • Распространённые знаки, которые не разрывают фрагменты текста, но уменьшают значимость последующего текста при формировании сниппета (как заголовка сниппета, так и его описания), записанные в кавычках и через запятую: «,», «–», «(», «)», «:»

Оптимизация изображений на сайте:

  • После размещения изображения на сайте, добавьте атрибуты alt и title: <img src=»../foto.jpg» alt=»текст, который появится, если не загрузится картинка» title=»текст, который появится при наведении»>

Защита сайта от воровства контента

Блок, предотвращающий выделение текста на сайте:

<style>
html{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
</style>

Скачать

Блок, предотвращающий вызов контекстного меню на странице сайта:

<script>
//<![CDATA[
document.ondragstart = function() { return false;}
function nocontext(e) {
return false;
}
document.oncontextmenu = nocontext;
/* ]]> */
</script>

Скачать

Увеличение скорости загрузки сайта:

Скорость загрузки сайта – это очень важный фактор ранжирования, и чем сайт загружается быстрее, тем он будет выше в выдаче поисковиков. Для проверки скорости загрузки сайта используйте сервис компании Google на странице //developers.google.com/speed/pagespeed/insights/

Оптимизация CSS:

Для сокращения времени загрузки страницы оптимизируйте таблицу стилей CSS:

  • Скопируйте коды различных страниц вашего сайта внутри блока <body…>…</body>
  • Разместите все коды в одном текстовом редакторе или в Excel
  • Удалите в получившемся документе всё кроме указания классов (.) и айдишников (#) стилей
  • Удалите в таблице стилей все стили, которых не нашлось на страницах сайта
  • Если получилась таблица стилей, которая отображает страницу хуже, чем было до удаления стилей, то добавьте старую версию таблицы стилей к новой версии прямо в браузере, выбрав таблицу стилей на вкладке Sources браузера Гугл хром, вызываемой из контекстного меню сайта пунктом «Просмотреть код» и удаляйте добавленную таблицу по строкам пока чтобы найти строку, отвечающую за необходимый вид страницы.
  • После получения максимально короткого файла удалите переводы строк и пробелы рядом со следующими знаками (в кавычка и через запятую): «{», «}», «,»
  • Удалите из блока <head> ссылку на таблицу стилей
  • Создайте в блоке <head> блок <style>…</style>
  • В блоке <style> разместите текст полученной таблицы стилей

Оптимизация JavaScript:

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

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

Для того чтобы JavaScript загружался асинхронно, необходимо добавить тег defer=»defer» или async=»async» в блок вызова скрипта <script async=»async» src=»example.js»></script>

  • async=»async» – асинхронная загрузка без соблюдения приоритета загрузки файлов JavaScript
  • defer=»defer» – асинхронная загрузка с соблюдением приоритета загрузки файлов JavaScript

Если вы делаете сайт на WordPress, используйте плагин Async JavaScript

Сжатие изображений на сайте:

Для сжатия групп изображений используются сервисы, например, kraken.io

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

  • Нажмите кнопку «файл»
  • Наведите курсор на кнопку «сохранить как» и всплывёт вкладке с выбором формата сохранения
  • Выберите формат изображения
  • Введите имя файла, место сохранения изображения и нажмите кнопку сохранить

Кэширование страниц сайта:

Включите кэширование сайта, добавив блок в начало файла htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg «access 1 year»
ExpiresByType image/jpeg «access 1 year»
ExpiresByType image/gif «access 1 year»
ExpiresByType image/png «access 1 year»
ExpiresByType text/css «access 1 month»
ExpiresByType text/html «access 1 month»
ExpiresByType application/pdf «access 1 month»
ExpiresByType text/x-javascript «access 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType image/x-icon «access 1 year»
ExpiresDefault «access 1 month»
</IfModule>

Скачать

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

Оптимизация WordPress:

Оптимизация базы данных WordPress

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

Настройка плагина W3 Total Cache

Поставьте галочки на следующих пунктах настройки плагина:

Раздел General Settings

  • Page Cache:
  • Validate timestamps:
  • Object Cache:
  • Browser Cache:
  • Verify rewrite rules

После проставления галочек сохраните настройки.

Раздел Page Cache

  • Cache posts page
  • Cache feeds: site, categories, tags, comments
  • Cache SSL (https) requests
  • Don’t cache pages for logged in users
  • Automatically prime the page cache
  • Preload the post cache upon publish events
  • Front page
  • Posts page
  • Post page
  • Blog feed
  • rss2 (default)
  • Handle XML mime type

После проставления галочек сохраните настройки.

Раздел Object Cache

  • Enable caching for wp-admin requests
  • Store transients in database

Раздел Browser Cache

  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (ETag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Prevent caching of objects after settings change
  • Don’t set cookies for static files
  • Do not process 404 errors for static objects with WordPress
  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (eTag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Prevent caching of objects after settings change
  • Disable cookies for static files
  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (ETag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Set Last-Modified header
  • Set expires header
  • Set cache control header
  • Set entity tag (ETag)
  • Set W3 Total Cache header
  • Enable HTTP(gzip) compression
  • Prevent caching of objects after settings change
  • Disable cookies for static files
  • Referrer Policy

После проставления галочек сохраните настройки.

Скачать