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

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

Что такое производительность и для чего её нужно улучшать, а так же как это делать, уже очень много рассказано в рубрике 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 больше десятка ресурсов, откажитесь от такого обслуживания, так как все Ваши усилия по улучшению производительности сайта завязнут как в болоте в таком количестве соседей.

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

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

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

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

Запись опубликована в рубрике SEO. Добавьте в закладки постоянную ссылку.

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

  1. stariс говорит:

    Нина!!! Я же просил подробныее! А Вы просто переписали то, что было в первом Вашем комментарии.

    Ну ладно, попробуем разобраться. Скорее всего Вы создали папку site в Документах. Затем создали каркас страницы. То есть скопировали у меня в статье и вставили в Notepad++ в Новый документ (открывается первой иконкой). Дальше не нужно «Сохранить как», нужно нажать третью иконку (синяя) «Сохранить». Откроется окно поисковика. В нём действительно сначала выскочит папка Notepad++, так как Вы находитесь в этой программе, но ведь это же поисковик. Сбоку слева там весь Ваш компьютер, т.е. Рабочий стол, Библиотеки, Компьютер.

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

    После того как Вы найдёте свой site и сохраните там Каркас страницы, поисковик будет открывать сразу эту папку. Но из неё так же можно будет перейти в любую другую на Вашем компьютере.

    Вроде я правильно понял вашу проблему? Если нет то ещё раз говорю пишите подробнее то что делали, что хотите получить и что не получается. Покликово. А то вы говорите о самом моменте, то есть о том что не получается, а как Вы к нему пришли — непонятно. Приходится гадать.

    А что происходит с комментариями? Почему их трудно отправить?

  2. нина говорит:

    Не получается «сохранить как» каркас страницы в документах и созданному в них site. Всплывает папка с многочисленными файлами notepad++. Что
    делать?
    Спасибо за уроки,Сергей Юрьевич. Письмо трудно Вам послать. Это уже 4-ое.

  3. stariс говорит:

    Освоение html, css и pnp — это круто. Я знаю эти языки только с краешку, что и показано на моём блоге. Однако этого достаточно для создания сайта. Для крутого сайта конечно маловато, но зато есть возможность для роста.

    Сделать сайт сейчас очень просто — установил CMS, WordPress например, вот тебе и сайт готов, только заполняй, но вот чтоб заполнять без затруднений, и спокойно реализовывать свои фантазии, конечно надо знать основы веб-программирования, т.е. основы html, css и pnp.

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

  4. Ирина говорит:

    Отличный сайт!Все изложено просто и ясно.Значит, первые шаги в создании сайта — это освоение html, css и pnp?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *