Важнейшие рекомендации тем кто делает первый сайт

Здравствуйте уважаемые начинающие веб-мастера. Вот Вам ещё один термин — Производительность сайта.

Что такое производительность и для чего её нужно улучшать, а так же как это делать, уже очень много рассказано в рубрике SEO

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

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

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

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

Изображения

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

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

Использовать нужный формат изображения. Например рисунок лучше форматировать в PNG а фотографии в JPEG.

Если уж вам жизненно необходимо показать картинку в полной красе и весе, то разместите её на стороннем сервере типа trueimages.ru/, и поставьте под облегчённым вариантом ссылку с анкором «Посмотреть полный размер», или как то так.

На сайте не должно быть ни одного не оптимизированного изображения.

Вид или восприимчивость страницы

Восприимчивость — характеристика того, как страница воспринимается пользователем.

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

Вид страницы должен быть прост. Возможно оригинален, возможно солиден, но при этом прост.

Избегайте большого количества рамок, меню, ссылок, расцветок, и в особенности рекламных блоков.

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

Необходимая навигация должна быть простой и немногочисленной, чтоб не рассеивать внимание. Солидная простота — основная цель.

Отсутствие излишеств — хороший плюс для ускорения загрузки страницы.

Содержание

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

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

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

Защита

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

Поэтому не стоит сразу ставить защиту типа BulletProof Security. Это же ещё на полдвижка кода.

Поначалу Вам нужна только защита от спам ботов, и попыток начинающих хакеров взломать ваш пароль.

Спам можно изолировать капчёй, или легким плагинчиком типа Kama SpamBlock, а пароль сделать посложнее и почаще менять.

В последней версии WordPress это делается в один клик.

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

На моём Бегет например, эта услуга бесплатная, и я уже давно не знаю забот с ботами тип Хруммер и т.п.

Очень рекомендую прочитать мою статью Как защитить сайт от злоумыщленников.

Рекомендации данные в ней доступны для самых начинающих.

Приложения, плагины, 3rd Party

По возможности сократить использование приложений плагинов и данных третьих сторон (Third party data).

Источники Third party data — сервисы рассылок, платёжные системы, сторонние сайты, сервисы обработки и хранения данных

Базы данных Third party data создаются на внешних платформах, и агрегируются с других сайтов. Есть много ресурсов продающих эти данные.

Естественно возникает вопрос о правомерности использования, качестве и безопасности таких данных.

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

Поэтому в настройках браузера лучше блокировать cookies сторонних ресурсов.

Pixel tags — программа пиксель, внедряемая в страницу, так же в рекламных целях.

Блокируется большинством антивирусов. Поэтому при выборе антивируса интересуйтесь, есть ли в нём защита от pixel tags, в противном случае можно получить столько таких пикселей, что страница станет неподъёмной.

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

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

Кеширование

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

Плагин создаёт статические копии файлов, получить которые браузеру гораздо легче, чем грузить из БД динамический контент.

График обновления файлов задаётся пользователем. К примеру на этом сайте статические файлы обновляются каждые 24 часа.

Кроме того плагин использует GZIP сжатие (сжатие без потерь) при передаче данных, что дополнительно ускоряет процесс.

CSS <script>

Отрисовка страницы начинается только после загрузки CSS файлов.

При создании первого сайта многие начинающие веб-мастера начинают активно изменять оформление HTML элементов.

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

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

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

Минимизируйте комментарии и пробелы в файле CSS.

Минимизируйте «тяжелые» свойства такие как box-shadow и прозрачность rgba.

Если в шаблоне подключены несколько CSS файлов, то лучше объединить их в один.

В целом используйте как можно меньше CSS и скриптов. Как я уже говорил выше основная цель — оригинальная простота.

При необходимости внедрения скрипта обеспечьте ему асинхронную загрузку (атрибут async).

Выбор хостинга

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

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

Адаптивность

Используйте только шаблоны адаптированные под мобильные устройства. Альтернативно можно адаптировать стационарный шаблон.

Уже сейчас половина трафика приходит с мобил, и что будет завтра — легко представить.

Желаю творческих успехов.