Как устроен динамический сайт или с чего начинается SEO

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

Многие начинающие оптимизаторы, читая блоги более успешных и опытных товарищей, видят оптимизацию только со стороны написания статей пот определенные запросы, закупу ссылок, перелинковку и так далее. Но оптимизация начинается еще до того, как сайт выйдет на свет. Будь то движок (WordPress, Joomla) или самописный движок.

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

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

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

Генерация страницы в WordPress

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

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

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

Теперь браузер должен интерпретировать HTML и CSS код и отобразить готовую страницу. Все это должно происходить в считанные секунды. По мнению некоторых авторитетных оптимизаторов 90% времени, которое тратиться на этот процесс отводиться браузеру на отображение. Поэтому не рекомендуется загружать страницу большим количеством клиентских скриптов. Учитывая то, что даже их расположение на странице играют огромную роль. Повторяю, это очень упрощенная модель.

Загрузка страницы на компьютер

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

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

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

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

Интерпретация сайта браузером

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

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

Скорость рендеринга и отображения страницы браузером почти полностью зависит от самого браузера. Конечно, все это происходит очень быстро, но нет предела совершенству. Быстрее всего работает браузер Safari, но при условии, что он установлен на маке, а не на Windows. На Windows в целом мне нравится скорость работы Chrome и Opera.

Как проверить скорость загрузки страницы и найти ошибки

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

Так же вы можете посмотреть, как отображается ваш сайт в мобильных устройствах и насколько он оптимизирован под них. Перейдите на страницу сервиса: PageSpeed Tools. Далее введите адрес страницы, которую хотите проверить и нажмите анализировать, после нескольких секунд вы получите результат:

Как видно мой сайт, мягко говоря, не сильно оптимизирован, хотя в нем используется, как и кеш, так и сжатие CSS файлов. Тем не менее, по ощущениям на деле сайт неплохо открывается и на мобильных устройствах и на компьютерах. А теперь ссылки на полезные плагины для WordPress, которые помогут вам оптимизировать сайт. Заранее сделайте полный бэкап сайта! Плагины:

• CSS-compress – плагин, который сжимает CSS файлы стилей. Не нуждается в настройке и более того, это один единственный PHP файл. Загружаете в папку с плагинами и активируете. Из минусов замечено то, что не со всяким шаблоном дружит.
• Optimize-DB – предназначение плагина заключается в оптимизации базы данных. Основные задачи, которые делает плагин, это очистка базы данных от различного рода мусора, оставленного записями в черновиках и т.д. После активации плаигна, нажмите кнопку «Optimize now» и все. В случае неудачи заливайте бэкап.
• Hyper Cache – плагин, который кэширует страницы и процесс их генерации ускоряется и упрощается. Плагину посвящена статья на блоге «Ускоряем работу WordPress»

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

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