10 советов по оптимизации скорости работы вашего сайта / Habr
Скорость и производительность сайтов очень важна для пользователей. Если Ваш сайт будет слишком медленным, то Вы будете не только терять посетителей, но также и потенциальных клиентов. Поисковые системы такие как Google, учитывают скорость веб-сайта в рейтинге поиска, поэтому, оптимизируя скорость Вашего сайта, Вы должны принять всё во внимание. Учитывается каждая миллисекунда. Вот только несколько основных и общих предложений для того, чтобы улучшить производительность сайта.1. Отсрочьте загрузку контента, когда есть такая возможность.
Ajax позволяет нам строить веб-страницы, которые могут быть асинхронно обновлены в любое время. Это означает, что вместо того, чтобы перезагрузить всю страницу, когда пользователь выполняет действие, мы можем просто обновить часть этой страницы.
Мы можем использовать галерею изображений в качестве примера. Файлы изображений являются большими и тяжелыми; они могут замедлить скорость загрузки веб-страниц. Вместо того, чтобы загрузить все изображения, когда пользователь первые посетит веб-страницу, мы можем только показать миниатюрные
изображения и затем, когда пользователь нажмет на них, мы можем асинхронно запросить полные изображения от сервера и обновить страницу. Если пользователь хочет видеть несколько изображений, он не должен ждать, пока загрузятся все изображения. Этот паттерн разработки называют ленивой загрузкой (Lazy loading).
Библиотеки Ajax/веб разработки, такие как jQuery, Prototype и MooTools могут осуществить отсроченную загрузку контента гораздо легче.
2. Используйте отдельные JS и CSS файлы
Когда пользователь впервые загружает Вашу веб-страницу, браузер кэширует внешние ресурсы, такие как JavaScript и CSS файлы. Таким образом, лучше размещать такие файлы вне страниц.
Используя встроенного CSS также увеличивает время рендеринга веб-страницы; определяя всё в Вашем главном файле CSS, Вы позволяет браузеру делать меньше работы во время рендеринга страницы, так как он уже знает все правила стилей, которые ему надо применить.
В качестве бонуса, использование отдельных JavaScript и CSS файлов делает поддержку сайта более лёгкой, так как вам надо только изменить глобальные файлы вместо того, чтобы искать всё в коде, разбросанном на нескольких страницах.
3. Используйте системы кэширования
Если Вы считаете, что Ваш сайт соединяется с базой данных, каждый раз для того, чтобы создать один и тот же контент — пора начать использовать систему кэширования. При наличии системы кэширования, Ваш сайт должен будет только создать контент один раз вместо того, чтобы создавать его каждый раз,
когда страницу посещают пользователи. Не волнуйтесь, системы кэширования периодически обновляют свои кэши в зависимости от того, как Вы их настроите — таким образом, даже постоянно изменяющиеся веб-страницы (как сообщение в блоге с комментариями) могут быть закэшированными.
У популярных систем управления контентом, таких как WordPress и Drupal, имеется статическое кэширование, которые преобразовывает динамически сгенерированные страницы в статические файлы HTML, чтобы уменьшить ненужную обработку сервером. Для WordPress попробуйте WP Super Cache. В Drupal есть функция кэширования страницы в самом ядре.
Также существуют системы кэширования баз данных и серверных скриптов, которые Вы можете установить на своем веб-сервере (если у Вас есть возможность сделать это). Например, у PHP есть расширения под названием ускорители PHP (PHP accelerators), которые оптимизируют производительность посредством кэширования и различных других методов; один пример PHP-ускорителя — APC. Кэширование базы данных улучшает работу и масштабируемость Ваших веб-приложений благодаря уменьшению работы, связанной с процессами чтения/записи/доступа базы данных; memcached, например, кэширует наиболее часто используемые запросы к базе данных.
4. Избегите изменения размеров изображений в HTML
Если изображение первоначально размером 1280×900 px, но у Вас должно быть 400×280 px, Вы должны изменить размеры и повторно сохранить изображение, используя редактор изображений, такой как Photoshop вместо того, чтобы использовать атрибуты ширины и высоты в HTML
(то есть <img width = «400» height = «280» src = «myimage.jpg»/>).
Это потому что, естественно, большое изображение всегда будет иметь больший размер файла. Вместо того, чтобы изменить размеры изображения, используя HTML, измените размеры его размеры в графическом редакторе и затем сохраните это как новый файл.
5. Не используйте изображения для показа текста
Это не только делает текст на изображении недоступным для экранных читалок и полностью бесполезным для SEO, но и увеличивает время загрузки вашей страницы, потому что чем больше изображений на странице, тем она тяжелее.
Если Вы должны использовать много своих шрифтов на веб-сайте, узнайте о CSS @font-face, чтобы показать текст с пользовательскими шрифтами более эффективно. Очевидно, что обработка файлов шрифтов более оптимальна, чем обработка изображений.
6. Оптимизируйте размеры изображения благодаря использованию правильного формата файла
Выбирая правильный формат изображения, Вы можете оптимизировать размеры файла не теряя качество изображения. Например, если Вы не нуждаетесь в прозрачности изображения (альфа-слой), который предлагает формат PNG, формат JPG часто предоставляет изображения, используя меньший размер файла.
Чтобы узнать больше, как выбрать между JPG, PNG, и GIF, почитайте следующие гайды:
В дополнение, есть много инструментов, которые Вы можете использовать, чтобы далее уменьшить веса файла Ваших изображений. Проверьте этот список инструментов для того, чтобы оптимизировать Ваши изображения.
7. Оптимизируйте метод написания кода
Осмотрите свой исходный код. Вы действительно нуждаетесь во всех тэгах, которые Вы используете, или Вы можете использовать CSS для вывода на экран? Например, вместо того, чтобы использовать <h2><em> Ваш заголовок </em></h2>, Вы можете легко использовать CSS для того, чтобы заголовок был курсивом, используя свойство font-style. Написание эффективного кода не только уменьшает размеры ваших HTML и CSS документов, но также позволяет их легче поддерживать.
8. Загружайте JavaScript в конце документа
Будет лучше, если ваши скрипты загружаются в конце страницы, а не в начале. Это позволяет браузеру отрендерить всё перед тем, как он начнёт грузить JavaScript. Благодаря этому, Ваши страницы будут более отзывчивыми, потому что способ работы Javascript’a такой, что он блокирует всё, пока не закончит загружаться. Если возможно, ссылайтесь на Javascript прямо после закрывающегося тега </body> вашего HTML документа.
Чтобы узнать больше, почитайте об отсроченной загрузке JavaScript.
9. Используйте сеть доставки контента (Content Delivery Network, CDN)
На скорость вашего сайта сильно влияет положение пользователей относительно положения веб-сервера. Чем дальше они находятся, тем большее расстояние должны пройти передаваемые данные. Имея кэшированный контент на нескольких, стратегически расположенных географических положениях, позволяют позаботиться об этой проблеме. CDN будет часто делать Ваши эксплуатационные расходы немного выше, но Вы определенно получите бонус в скорости вашего сайта. Проверьте MaxCDN или Amazon Simple Storage Service (Amazon S3).
10. Оптимизируйте веб-кэширование
Наряду с использованием систем кэширования, Вы должны создать веб-сайты, которые используют веб-кэширование как только это возможно. Веб-кэширование состоит в том, что файлы кэшируются браузером для последующего использования. Браузер кэширует файлы CSS, Javascript и картинки. Кроме основ, таких как помещение CSS и JavaScript кода, который используется на нескольких страницах, во внешние файлы, есть много способов удостовериться, что Вы кэшируете свои файлы самым эффективным из возможным способов.
Например, Вы можете установить заголовки ответа HTTP, такие как Expires и Last-Modified, чтобы уменьшить потребность в повторной загрузке некоторых файлов, когда пользователь вернется на Ваш сайт. Чтобы узнать больше, читайте о кэшировании в HTTP и
усилении кэширования браузера.
Чтобы настроить заголовки Expires в Apache, прочитайте инструкцию по добавлению заголовков, которые истекают в будущем.
7 советов по оптимизации для начинающих / King Servers corporate blog / Habr
В службу поддержки King Servers часто обращаются владельцы сайтов, которые не понимают, почему их ресурсы загружаются медленно. В итоге мы решили составить простую инструкцию по оптимизации скорости загрузки для начинающих — представляем ее вашему вниманию.
Примечание: в конце статьи приведен список ресурсов для дальнейшего изучения — будем благодарны, если вы сможете дополнить его в комментариях.
Введение: как загружаются сайты
В материале под названием «Что происходит, когда пользователь вбивает адрес сайта Google.com» очень подробно описаны все процессы, связанные с посещением сайта. Если говорить кратко, то между тем, как посетитель сайта вобьет в адресную строку его URL и получит ответ, в общем виде проходит несколько этапов:
- Сначала браузер осуществит DNS-запрос по имени сайта.
- Далее инициируется TCP-подключение к серверу, на котором этот сайт расположен.
- Следом устанавливается соединения http или https.
- Потом запрашивается нужная страницы и загружается ее HTML-код.
- Стартует парсинг HTML.
- После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).
- В итоге рендерится финальная версия страницы со всем контентом.
- Затем исполняется JS-код — скрипты могут потребовать обработки дополнительных сетевых запросов, изменять страницу или её шаблон, так что возможен и новый круг рендеринга.
Часть из этих шагов можно оптимизировать на стороне клиента, другую часть — на стороне сервера. Об этом мы и будем сегодня говорить.
Первый шаг: понять, что тормозит
Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:
Прежде чем начинать чинить, надо узнать, что сломалось. Если ваш сервер генерирует страницу 5 секунд, то использование CDN не поможет, если у вас на каждый просмотр страницы загружается по 10 мегабайт картинок, добавлять memcache в бэкенд-архитектуру тоже бессмысленно.
Существуют различные инструменты анализа производительности сайтов. К примеру, можно использовать бесплатный сервис от Google, который анализирует производительность сайта и выдает рекомендации по ее улучшению:
Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).
При этом, важно анализировать не только сами показатели быстродействия, но рассматривать их применительно к посещаемости конкретной страницы. Если страница не пользуется популярностью у пользователей, то неважно, как быстро она загружается.
Вот какие шаги по серверной оптимизации для ускорения загрузки сайта применяют чаще всего.
Расширение ресурсов сервера
Если медленно работает сам сервер, то нет никакого смысла тратить время и силы на клиентскую оптимизацию. В случае небольших проектов при росте нагрузки сайт часто начинает тормозить именно из-за того, что ему перестает хватать ресурсов хостинга — например, CPU и дисков. В качестве первого шага логично рассмотреть покупку дополнительных ресурсов. Однако этот метод работает до определенного момента, а затем затраты на оплату услуг хостинга могут вырасти так сильно, что проще и выгоднее будет использовать другие способы оптимизации загрузки. Вот, какими они могут быть.
Кэширование
Один из инструментов ускорения сайтов является серверное кэширование. Как сказано выше, процесс от перехода по ссылке на сайт, до отображения страницы в браузере может включать множество этапов:
Изображение: CrazyEgg
Некоторые элементы можно закешировать и не загружать каждый раз при заходе на сайт. Это позволяет серьезно сократить время загрузки:
Изображение: CrazyEgg
При всех плюсах — это не единственный стоящий метод оптимизации. Во-первых, закешировать можно не все, во-вторых, думать нужно и том, как в будущем сбрасывать кэш, в третьих, этот метод помогает ускорить сайт для тех пользователей, которые на нем уже были, и ничем не помогает новым посетителям.
Сжатие изображений
Все всегда говорят о необходимости сжатия изображений, но начинающие владельцы сайтов часто не владеют всеми тонкостями и могут использовать для масштабирования больших картинок CSS. В итоге браузер пользователя все равно загружает изображение в полном размере.
Существует несколько инструментов для компрессии изображений, среди которых TinyPNG, Kraken.io и JPEGmini. Кроме того, имеет смысл попробовать включить конвертацию изображений в формат WebP. Он был разработан Google, и по данным компании такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.
Чтобы активировать конвертацию, можно добавить в файл .htaccess следующий код:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webpК сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.
CDN
Еще один «инфраструктурный» метод снижения задержек — использование сетей доставки контента (content delivery network, CDN). Такие сети состоят из серверов в разных точках мира. При подключении сайта к сети на входящих в нее серверах создают копии файлов веб-ресурса, а затем пользователю отдают данные с ближайшего к нему сервера — в итоге скорость загрузки увеличивается.
Использование Gzip
Gzip — простой метод компрессии файлов сайта для экономии ресурсов канала и ускорения загрузки. С помощью Gzip файлы сжимаются в архив, который браузер может загрузить быстрее, а уже затем распаковать и отобразить контент.
Включить использование Gzip довольно просто — нужно просто добавить несколько строк кода в файл .htaccess. К примеру, при использовании веб-сервера Apache веб-мастерам доступен модуль mod_gzip, чтобы активировать Gzip в таком случае нужно внести в .htaccess такой код (подробнее — в туториале на SitePoint):
mod_gzip_on Yes
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^application/json$
mod_gzip_item_include mime ^text/.*$
mod_gzip_item_include file .html$
mod_gzip_item_include file .php$
mod_gzip_item_include file .js$
mod_gzip_item_include file .css$
mod_gzip_item_include file .txt$
mod_gzip_item_include file .xml$
mod_gzip_item_include file .json$Оптимизация кода сайта
Существует целый ряд лучших практик создания кода сайта, которые позволяют оптимизировать его работу без малейших затрат. Прежде всего, специалисты советуют размещать CSS-код в начале страницы, а скрипты помещать в ее конец. Это полезно, потому что таким образом у браузера появляется возможность начать отрисовывать страницу еще до запуска всех скриптов — они могут выполняться совсем не быстро.
Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.
Использование связки Nginx+Apache
Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.
Тем не менее можно и даже нужно объединить два веб-сервера для большей эффективности, используя Nginx, как статический фронтенд и Apache — как бэкенд. Такое решение положительно скажется на скорости загрузки страниц сайта.
Заключение: полезные ресурсы и статьи по теме оптимизации работы сайтов
Ниже мы собрали ряд полезных статей на русском и английском языке:
Оптимизация веб-страницы: подробное руководство
Путеводитель по тому, как проводится оптимизация загрузки веб-страницы в современных реалиях, подробно рассмотрены все приемы.
Интернет развивается с невероятной скоростью, как и разрабатываемая нами веб-платформа. Зачастую мы не задумываемся о том, как обстоит дело у наших клиентов. Лишь бегло взглянув на сегодняшнее состояние веба, можно заключить, что мы абсолютно забыли, насколько он изменчив.
Так что же есть современный интернет?
Только у 46% из 7.4-миллиардного населения Земли есть доступ в интернет. Средняя скорость соединения — 7Мб/с. Что более важно, 93% пользователей сидят в интернете с мобильных устройств, поэтому сегодня непростительно забывать о мобильных платформах.
Наши сайты не в лучшей форме — сегодня среднестатистический сайт весит столько же, сколько оригинальный Doom (порядка 3 Мб). Справедливости ради стоит заметить, что для статистики лучше использовать медианы (прочтите статью Ильи Григорика «Идеальная средняя статья — это миф»). Медианный сайт весит около 1.4Мб. Изображения занимают примерно 1.7Мб, JavaScript — 400Кб. Этой проблеме подвержены не только веб-платформы. Не лучше обстоит дело и с нативными приложениями.
Как люди, связанные с технологиями, мы чувствуем свое превосходство. С современными ноутбуками, телефонами последних моделей и быстрым интернетом просто забыть, что это есть не у каждого.
Как учесть эти нюансы в дизайне и разработке, не нанеся при этом ущерб представлению?
Один из наиболее эффективных, но редко используемых способов увеличения производительности состоит в том, чтобы понять, как браузер анализирует и хранит статику. Современные браузеры весьма успешно анализируют приоритет ресурсов прямо во время их парсинга. И именно здесь на сцене появляется критический запрос.
Запрос является критическим, если в нем содержится статика, необходимая для рендеринга контента в рамках пользовательского рабочего окна.
Для большинства сайтов это будет HTML, стили, логотип, шрифты и, возможно, изображения. Но на деле оказывается, что в это же время помимо них запрашиваются множество других, второстепенных вещей (JavaScript, трек-коды, реклама и т. д.). К счастью, мы можем контролировать это поведение, указывая приоритет подгрузки статики.
Благодаря <link rel=»preload»> можно напрямую предписать высокий приоритет в очереди загрузки статический файлов, что может значительно оптимизировать UX.
Для многих критические реквесты до сих пор остаются черным ящиком, и на этом в большой степени сказывается недостаток в свободном доступе материалов на данную тему. Однако, недавно Бен Шварц (Ben Shwartz) опубликовал невероятно исчерпывающую и доступную статью по этому предмету. Также рекомендуется к прочтению материал Preload, Prefetch and Priorities in Chrome.
Для отслеживания приоритетов запросов можно использовать Lighthouse performance tool и Critical Request Chains audit, или следить за запросами во кладке Network в панели разработчика Chrome.
Картинки зачастую составляют львиную долю материалов веб-страницы, поэтому их оптимизация может в значительной степени повлиять на улучшение производительности пользовательского интерфейса. Существует множество стратегий и инструментов для устранения лишних байтов, но давайте зададим себе главный вопрос: «Существенна ли эта картинка для передачи идеи или достижения эффекта, которого я добиваюсь?» Если есть возможность обойтись без нее, вы сэкономите не только на пропускной способности, но и на запросах.
В некоторых случаях один и тот же результат достижим несколькими способами. CSS богат художественными инструментами: тени, градиенты, анимации, фигуры. Все это позволяет надлежащим образом стилизованным элементам DOM служить достойной заменой статическим изображениям.
Выбор правильного формата
Если избежать использования статики невозможно, важно правильно определить для нее наиболее подходящий формат. Первая ступень — выбор между векторной и растровой графикой:
- Вектор: не зависит от разрешения, как правило значительно компактнее. Идеально подходит для логотипов, иконок и простых изображений, основанных на геометрии.
- Растр: подходит для высоко детализированных изображений, например, фотографий.
После принятия этого решения, вам откроется широкий выбор: JPEG, GIF, PNG-8, PNG-24, или новейшие форматы, такие как WEBP или JPEG-XR. Как не ошибиться в выборе из такого широкого спектра?
- JPEG: для изображений с богатой цветовой палитрой (например, тех же фотографий)
- PNG-8: для изображений с малым количеством цветовой
- PNG-24: для изображений с прозрачными участками
- GIF: для анимаций
Экспериментальные форматы
В последнее время на арене появились несколько новых форматов: WebP, JPEG 2000 и JPEG-XR. Все они были созданы разработчиками браузеров.
WebP – самый популярный из них. Он поддерживает сжатие с потерями и без потерь, что делает его невероятно гибким. Сжатый без потерь WebP весит на 26% меньше PNG и на 25-34% легче JPG. Он поддерживается 74% браузеров, а Photoshop позволяет конвертировать в этот формат JPG и PNG.
Оптимизация инструментами и алгоритмами
Даже использование самых эффективных графических форматов не оправдывает игнорирования последующей оптимизации. Это — ключевая ступень.
Если вы выбрали SVG, который сам по себе относительно мало весит, он тоже должен быть сжат. Для этого существует ряд неплохих инструментов, таких как SVGO или SVGOMG. Также, поскольку SVG – формат, основанный на XML, его можно сжать с помощью GZIP на стороне сервера.
Для большинства других форматов прекрасным выбором будет ImageOptim. Еще в этом году Google представил Guetzli — открытый алгоритм, происходящий из прошлого опыта с WebP и Zopfi. Он позволяет добиться сжатия JPEG до 35%. Единственный его недостаток — низкая производительность: около минуты CPU на один мегапиксель.
Адаптивность
Десять лет назад можно было обойтись одним разрешением на все случаи жизни. Сегодня же, в эпоху адаптивного веба, оптимизация играет ключевую роль. Благодаря Responsive Images Community Group, веб-разработчики прекрасно подкованы и вооружены.
Возможность использования кастомных шрифтов — невероятно мощный дизайнерский инструмент. Но большая сила сопряжена с большой ответственностью. По статистике шрифты являются главными врагами производительности примерно на 68% сайтов.
Выбор правильного формата
Существует четыре веб-формата: EOT, TTF, WOFF и более новый WOFF2. TTF и WOFF используются чаще всего и поддерживаются более чем 90% браузеров. В зависимости от поддержки браузерами, самым оптимальным считается WOFF2, а для старых браузеров — WOFF. Достоинство WOFF2 заключается в том, что он подразумевает ряд кастомных препроцессорных и сжимающих алгоритмов, что позволяет уменьшить итоговый вес файла на 30% и существенно повысить возможности парсинга.
Ограничьте количество шрифтов
Вне зависимости от того, где хостятся шрифты, их количество, разновидности и стили существенно влияют на ресурсы производительности.
В идеале можно было бы обойтись одним шрифтом с обычным и жирным начертаниями.
Обозначьте стратегию загрузки шрифтов
Сначала браузер строит DOM и CSSOM; шрифты не будут подгружаться до тех пор, пока не встретятся в CSS-селекторе уже существующего узла DOM. Такое поведение ощутимо замедляет рендеринг текста, часто приводя к эффекту FOIT (Flash of Invisible Text).
Наиболее простым и эффективным решением может стать FOUT (Flash of Unstyled Text).
Font—display – новое свойство CSS, предоставляющее возможность решить проблему без использования JS. К сожалению, он поддерживается лишь частично (в Chrome и Opera) и все еще находится в процессе разработки в Firefox и Webkit.
Оптимизировать получение JavaScript – это только полдела. После того, как код будет загружен, он будет подвергнут парсингу, скомпилирован и запущен в браузере. Беглого взгляда на несколько популярных сайтов достаточно, чтобы понять, что gzipped JS после распаковки становится как минимум в три раза больше.
Избавьтесь от лишних зависимостей
В современных менеджерах легко проследить количество и размер всех зависимостей. Хорошими инструментами являются webpack-bundle-analyzer и Bundle Buddy. Визуальные инструменты позволяют обнаружить дублирование кода, самые большие затраты производительности, ненужные зависимости.
В VS Code и Atom есть расширение Inport Cost, делающее вес импортируемого пакета более наглядным.
По возможности нужно всегда стремиться хранить и загружать только необходимое. Поэтому код должен быть максимально разделен и структурирован. Также стоит обратить внимание на динамический импорт и ленивую загрузку.
В данной статье были рассмотрены основные приемы оптимизации современных веб-приложений. Сегодня, в эпоху стремительного развития интернет-технологий, громоздкие веб-сайты прошлого уходят в небытие, и на смену им приходят новые принципы и парадигмы веб-разработки.
Другие материалы по теме:
Оптимизация сайта во время его разработки
«Встречают по одежке, а провожают по уму» – это поговорка очень хорошо описывает нынешнее положение дел с большинством сайтов Рунета.
Владельцы думают, что самое главное – это внешний вид сайта. Дизайн, анимации и, конечно же, изюминка!
Таким сайтом можно любоваться днями напролет, даже похвастаться перед друзьями. Но когда наступает время окупить вложенные в эту красоту средства, начинаются проблемы.
Сайт отдают специалистам по SEO и они ожидаемо «провожают по уму» этот сайт куда подальше.
Что получается, если при создании сайта забыли про SEO
Ошибиться можно даже на этапе выбора СMS. Не все системы управления сайтами поддерживают возможности базовой оптимизации. А если сайт разработан на конструкторе, то проблемы с его продвижением возникают еще чаще.
Есть такие CMS, в которых выполнение определенных работ по SEO просто технически невозможно.
К примеру, Santafox CMS не позволяет стандартными способами прописывать метатеги у блока новостей.
Чтобы провести работы, требуется установить дополнительные плагины, или даже дописать код, что занимает у профессионала в 3 раза больше времени, соответственно, такие работы стоят в 3 раза дороже.
На всем известной CMS Joomla из-за ее особенностей часто видим проблемы дублирования контента, о которых владельцы сайта и не подозревают.
Еще на ней же возникают сложности с безопасностью – это одна из уязвимых систем управления сайтами. А за распространение вредоносного кода сайт теряет позиции в выдаче. Такие проблемы серьезно мешает его продвижению.
И так далее. Каждая CMS имеет свои достоинства и недостатки, поэтому подходить к ее выбору следует не только с точки зрения цены и планируемого функционала сайта, но и возможностей его оптимизации. Значит, даже на этом этапе имеет смысл проконсультироваться с SEO-специалистом.
Подробный мануал по выбору CMS можно почитать тут.
Еще пример:
Сайт, безусловно, красивый, но совершенно непригодный для оптимизации.
Да, в сфере последних тенденций («Палех» у Яндекса, Rank Brain у Google), сейчас не требуется вхождения ключевых слов на страницах, достаточно смысла. Но на практике в органической выдаче подобные промосайты не выдерживают конкуренции: слишком мало контента и слишком размытый смысл у них.
Приведем пример списка недочетов, которые обнаружили наши SEO-специалисты, анализируя только что разработанный сайт клиента:
К сожалению, это типичные ошибки, которые мы находим у сайтов, созданных без оглядки на оптимизацию. Упор в разработке в 90% случаев делается на дизайн (красивые картинки, анимации и т.д.). В итоге сумма, которую владелец заплатил за критические доработки по оптимизации, в данном случае составила свыше 40 000.
Что нужно делать, чтобы заложить хороший фундамент для раскрутки сайта
Как минимум следует включить SEO-специалиста в команду по разработке сайта. Лучше того, который потом и будет отвечать за продвижение сайта.
У нас обязательно каждый этап согласовывается с руководителем команды SEO-специалистов. А окончательная приемка идет только с его разрешения, так как чаще всего созданный сайт попадает к нам же на продвижение. И нам самим придется закрывать все дыры и недочеты, которые допустим в момент разработки. Поэтому следим особенно тщательно за этими моментами.
Еще раз оговоримся, непосредственно продвижение сайта в услугу разработки у нас все-таки не входит, но предусмотрена базовая подготовка сайта к его дальнейшему продвижению в момент его создания. Что это значит?
Во время создания сайта мы подбираем CMS, оптимальную как по цене, функционалу, так и подходящую для дальнейшего развития и раскрутки сайта. Если у клиента сейчас нет денег на калькулятор или расширенный личный кабинет, подберем CMS так, чтобы в будущем можно было реализовать этот функционал без проблем.
Какие базовые работы по подготовке сайта к оптимизации должны быть проведены на этапе его создания
У нас в тарифы включены базовые работы, которые в дальнейшем помогут раскрутить сайт, даже если продвижением будет заниматься не наша компания. Итак, какие базовые действия проводим мы и рекомендуем требовать от разработчиков сайтов:
-
Настроить карту сайта и файл robоts.tхt
Перед тем, как новый сайт отправляется в поисковую выдачу, на него приходят роботы и индексируют сайт.
Проверяют на ошибки, ищут пустые страницы, тестируют скорость загрузки, читают теги и т.д. Если вы хотите, чтобы поисковики в принципе нашли ваш сайт, то нужно указать роботу правильный путь для индексации с помощью файла robоts.tхt и карты сайта. Чтобы он мог полностью оценить его и не запутался.
О том, каких ошибок нужно избежать при создании robоts.tхt, можно узнать в нашей статье.
-
Настроить 404 страницу
Очень важный элемент навигации, особенно на молодых сайтах, где многие страницы ещё не готовы. Если пользователь попал на страницу, которой ещё нет на вашем сайте, то лучше ему это объяснить и дать ссылки на основные страницы, которые точно уже работают. Это можно сделать за счет правильной настройки 404-й страницы, чтобы все пустые страницы автоматически отправляли на неё.
Также важно содержание этой страницы, чтобы с неё пользователь переходил на работающие страницы сайта, а не закрывал. В качестве примера одна из таких страниц, разработанная нами:
-
Помнить о скорости загрузки сайта
Многие забывают об этом параметре при разработке. Порой веб-дизайнерам очень сложно отговорить заказчика делать макет по его пожеланиям.
«В первом экране вставьте видео, ну такое зацикленное, как модно сейчас. В этот блок добавьте анимацию, а вот сюда фон золотой. Фотографии всех моих сотрудников и 98 дипломов, тоже на главную страницу разместите, чтобы все знали с кем работают и почему мы крутые…» и т.д.
В итоге мы получаем тяжелый сайт, который будут закрывать, не дожидаясь загрузки этого шедевра.
Старайтесь разрабатывать дизайн сайта, учитывая его цель. Если это промостраница, то, безусловно, можно разнообразить её анимированной графикой, чтобы произвести впечатление на пользователя. Если у вас интернет-магазин, то главное, чтобы посетитель сайта мог найти товар и купить его без лишних препятствий и убегающих от него кнопок целевого действия.
-
Прописывать теги и метатеги description, title и h2-h6 для каждой страницы
Если вы хотите, чтобы сайт находили в Интернете, и находили именно те, кому он нужен, то теги и метатеги – основа основ. С помощью них мы рассказываем поисковикам, про что наш сайт и по каким запросам на нем можно найти полезную информацию. Все тексты, которые пишет наша команда, всегда оптимизированы.
Чтобы корректно прописать все теги, нужно не забыть составить семантическое ядро. Разрабатывать структуру без проработки семантического ядра зачастую бессмысленно. Поэтому мы обязательно имеем в виду запросы, по которым будем привлекать клиентов, еще на этапе разработки структуры и прототипов.
Бывает долго и дорого делать полноценный сайт под ключ. Поэтому в работе используем небольшие итерации.
Если для старта достаточно 5 базовых страниц, начнем с них. Так страхуем клиента от больших вложений и возможности не сработаться с нами.
Вывод
Любой SEO-специалист скажет вам, что в сайте главное – не красивая оболочка, а оптимизация. И будет отчасти прав, но лишь отчасти. Мы все-таки считаем, что при создании сайта нужно найти золотую середину между красотой, удобством и оптимизацией, чтобы в итоге получить сайт, который будет симпатичен и поисковикам, и пользователям. Такой баланс мы отразили в наших тарифах по созданию сайта – ознакомиться.
Поисковая оптимизация сайта по всем стандартам
Оптимизация сайта — это самая важная часть работ по продвижению сайта. Если ваш сайт не оптимизирован, и вы постоянно не занимаетесь улучшением видимости в глазах поисковых систем, то ваши траты на внешнее продвижение и раскрутку имеют в два раза меньшую эффективность. Даже просто за счет хорошей оптимизации сайта можно достичь существенных результатов и иметь хорошие позиции в поисковых системах. Оптимизация сайта — это тот вид услуг, который окупается многократно. Одна из стратегий как оптимизировать сайт – по чуть-чуть в течение года, в таком случае один рубль, вложенный в оптимизацию, приносит сто. Конечно, работа должна быть выполнена по всем стандартам. В нашей компании вы получите файл в xsl, в котором можете сразу увидеть все страницы своего сайта и колонки «было» и «стало» — это крайне удобно для согласования и перенаправления администратору сайта для размещения. Естественно, мы и сами можем качественно разместить на вашем сайте оптимизацию сайта, это займет до четырех часов администрирования сайта на средний 30-ти страничный сайт.
Далее, когда поисковые системы проиндексируют ваш оптимизированный сайт, мы анализируем кликабельность описаний, по которым пользователи вас находят и переходят на ваш сайт. Обычно более 50% словосочетаний имеют нулевую кликабельность, так как описания (сниппеты) нужно тоже оптимизировать. Если этого не делать, то некликабельные ссылки в органической (бесплатной) выдаче поисковых систем будут тянуть ваш сайт вниз. В PRSTAR.ru высокий стандарт оптимизации, удобное взаимодействие по проекту в удобном онлайн кабинете.
Для решения вопроса «как оптимизировать сайт», вам потребуется задействовать следующие ресурсы:
1. Оптимизация сайта – наш совет покупайте не обещания, а реальную работу. Мы выполним работу, которую, при желании вы можете показать кому угодно. И поверьте, если вы покажете нашу работу профессионалу, он тут же захочет взять на вооружение наш наглядный и удобный для клиента подход. Мы подготовим на согласование файл (xls — таблица), вы легко сможете согласовать предстоящие изменения и далее оптимизация должна быть размещена на вашем сайте. В среднем один час оптимизации уходит на 4-ре страницы сайта.
2. Администрирование сайта – вы, конечно, можете разместить оптимизацию при помощи наших специалистов. Труд администратора сайта стоит меньше оптимизатора (сеошника). Просто добавьте в корзину часы администрирования в соотношении: 3 часа оптимизации на 1 час администрирования. Другими словами, для того чтобы сделать работу оптимизатора нужно в три раза меньше времени администратору сайта. Вы можете купить эту услугу позже, после того как получите файл с оптимизацией своего сайта.
3. Написание статей – Конечно хорошие результаты в поисковых системах в итоге упрутся в контент на сайте, на вашем сайте должна появляться новая информация: статьи, новости, вики-справки. Можно заказать статьи по совершенно конкретным поисковым словам. Каждая такая статья приносит дополнительный трафик ежемесячно, ежегодно и эффективна до 7-10 лет. Но главное – ваш сайт растет в выдаче поисковых систем.
4. Дизайн – сейчас на первое место выходит поведенческий фактор. От дизайна статьи или уникальной картинки, которая служит иллюстрацией к статье, зависит покинет ли сразу посетитель ваш сайт или задержится и станет путешествовать и по другим страницам вашего сайта.
5. SEO-Аудит – если вы не профессионал и точно не знаете что нужно вашему сайту, тогда вам нужна эта услуга. С SEO-аудита начинается ежемесячная работа над сайтом и аудитом заканчивается. В начале мы точно знаем что нужно в первую очередь, а в конце мы знаем что нужно делать в следующем месяце.
Контроль – чтобы вы могли быть уверены, что каждый ваш рубль используется по назначению, вы можете указать в своем онлайн-кабинете, чтобы все работы по оптимизации сайта были выполнены в режиме запись экрана. В этом случае, в отчете вы получите ссылку на видео и сможете проконтролировать каждую минуту работы наших оптимизаторов.
Оптимизация сайта для поисковых систем: что это такое
С какими факторами ранжирования работают в рамках SEO-оптимизации
- С внутренними факторами. К ним относятся техническое состояние и структура сайта, его доступность, скорость загрузки страниц, контент (тексты, видео, изображения), перелинковка.
- С внешними факторами. Это ссылочная масса — количество обратных ссылок на ресурс со сторонних площадок, причем важную роль играет авторитетность ресурсов, ссылающихся на оптимизируемый сайт.
- С коммерческими факторами. В эту группу входят товарный ассортимент, узнаваемость бренда, наличие на сайте цен, страниц с описанием способов оплаты и доставки, контактной информации.
- С поведенческими факторами. К ним относятся показатели, которые характеризуют действия посетителей ресурса: количество просмотренных страниц, среднее время, проведенное на сайте, процент отказов.
Этапы оптимизации сайта
- Техническая оптимизация. На этом этапе выявляют и устраняют проблемы, которые могут препятствовать корректной индексации страниц и успешному продвижению ресурса. Ниже перечислены основные работы, выполняемые в рамках технической оптимизации сайтов.
- Настройка зеркал. Зеркалами называют дубликаты ресурса с другими доменными именами (например, с www). Для улучшения позиций сайта в поисковых системах и предупреждения некорректного распределения ссылочной массы необходимо указать основное зеркало. Для этого используется директива host из robots.txt и 301-й редирект. Выполнить настройку зеркал также можно через панель веб-мастера.
- Проверка корректности статус-кодов и robots.txt. Для корректной индексации страниц необходимо, чтобы они правильно отвечали на запрос поисковых систем. В рамках оптимизации создают или дорабатывают файл robots.txt, настраивают статус-коды во избежание появления дублей, неверной склейки зеркал и т. д.
- Добавление карты сайта. Полный каталог всех страниц и разделов сайта упрощает и ускоряет его индексацию. Поэтому при оптимизации создают или проверяют корректность файла карты — sitemap.xml.
- Устранение дублей. Страницы с дублирующимся контентом возникают из-за проблем с CMS сайта или некорректной настройки robots.txt. В рамках оптимизации устраняют эти помехи для продвижения ресурса.
- Подбор запросов. Для оптимизации сайта потребуется сформировать семантическое ядро. При подборе запросов учитываются многие факторы: возраст сайта, ссылочная масса, количество страниц, тематика и т. д. С учетом этого формируется список ключевых слов, по которым планируется продвигать ресурс. Для запросов указывают целевые страницы.
- Текстовая оптимизация. Этот этап включает проработку уже имеющегося контента или написание и размещение новых текстов. Они должны быть релевантны продвигаемым запросам. Тексты наполняют ключевыми словами в разных формах, избегая переспама. Контент создается с учетом интересов пользователей и требований поисковых систем. Качественными считаются легкочитаемые, структурированные тексты с логически и визуально выделенными блоками. Важной характеристикой также является уникальность контента. В текстах на коммерческих сайтах рекомендуется указывать цены на товары или услуги. Приветствуется добавление изображений и видео.
- Проработка метатегов. В рамках оптимизации сайта прописывают содержание тегов keywords (ключевые слова), description (описание, может использоваться при формировании сниппета) и title (заголовок страницы, отображается в браузере). Грамотная проработка метатегов позволяет улучшить позиции в выдаче и сделать ресурс более привлекательным для посетителей, которые находят его через поиск.
- Доработка структуры и дизайна. Оформление некоторых сайтов реализовано с использованием flash-графики. Это является помехой для продвижения, так как такие элементы интерфейса не индексируются поисковым роботом. При оптимизации ресурса по возможности дорабатывают его дизайн так, чтобы появилась возможность размещения индексируемого контента. При этом учитывают удобство сайта для пользователей: элементы оформления не должны затруднять навигацию, совершение целевых действий и т. д.
- Внутренняя перелинковка. В рамках оптимизации расставляют ссылки внутри самого ресурса. Это позволяет грамотно распределить вес между страницами и в ряде случаев даже сократить затраты на закупки внешних ссылок.
- Внешняя оптимизация. Данный этап предполагает наращивание ссылочной массы. Это позволяет увеличить вес продвигаемых страниц и положительно повлиять на их продвижение. Наиболее качественными являются ссылки с авторитетных сайтов-доноров такой же тематики, поэтому при оптимизации тщательно подбираются подходящие площадки. Ссылочная масса наращивается постепенно с учетом возраста сайта. Это необходимо для того, чтобы не попасть под фильтры.
Грамотная оптимизация сайта для поисковых систем может помочь в максимально сжатые сроки выйти на первые позиции выдачи, привлечь целевой трафик и повысить конверсию.
«Что такое сео оптимизация сайта?» – Яндекс.Знатоки
SEO-оптимизация сайта – это искусство продвижения страниц сайта в топ выдачи поисковых систем.
Если вы хотите купить вечные ссылки для продвижения сайта, полный список всех сервисов рунета можно найти вот здесь https://otzyvmarketing.ru/best/pokupka-vechnyh-ssylok/. Ступайте и выбирайте самые подходящие площадки!
Теперь вернемся к обсуждению продвижения сайта.
Знаете ли вы, что 60% пользователей во время поиска информации выбирают ссылки из топ-3 выдачи? Оставшиеся пользователи нажимают на четвертое, пятое и шестое место в списке.
Только 2% людей вообще переходят по ссылкам на второй странице!
Одним словом, бессмысленно находиться на седьмом, восьмом, девятом и на всех следующих по порядку местах в выдаче – никто к вам не придет из поиска, никто не прочитает вашу статью, никто не совершит покупку на вашем сайте и не закажет ваши услуги. Вы будет видеть в «Яндекс.Метрике» нулевую посещаемость и грустить, грустить, грустить…
Но не стоит вечно находиться в депрессии, ведь есть спасители – SEO-специалисты! Они «подкачают» ваш сайт, и вы сможете со временем попасть на доску почета выдачи!
SEO-специалисты – это настоящие тренеры, которые доведут ваш сайт до кондиции. Ваш питомец научится делать становую тягу, накачает пресс и получит кубики на животе! Если без шуток, то SEO-специалисты могут вывести сайт на первое место в выдаче!!!
Как они это делают? О, братья, здесь существует целый набор мощнейших инструментов!
Во первых, спецы приведут дизайн вашего сайта в порядок. Создадут мобильную версию, которую так любят поисковые системы. Ускорят загрузку ваших страниц. SEO-специалисты, словно пластические хирурги, подтянут дизайн вашего сайта и делают и него конфетку! Они добавят уникальные интересные людям тексты, правильно заполнят метатеги и alt картинок.
SEO-оптимизиаторы заведут вам странички в социальных сетях, купят вам вагон и маленькую тележку ссылок. Так что ваш сайт сразу превратиться в «трастовый» уважаемый ресурс. Все захотят с вами дружить, вас станут узнавать в интернете.
Не могу даже помыслить, что сей текст мог хотя бы в малой мере ответить на ваш вопрос! Но я в силу своих скромных знаний хотела вам помочь. Скорее всего, я что-нибудь забыла, ведь формат не дает мне сил сделать все правильно. Так или иначе, желаю вам только добра! Если вы хотите раскрыть мне глаза на истинное положение вещей, оставляйте комменты под ответом!