Создание сайта самостоятельно с нуля: пошаговая инструкция, как новичку самому создать сайт и не платить за это дизайнеру

Содержание

пошаговая инструкция по раскрутке и оптимизации для начинающих, руководство и советы

Самостоятельное продвижение сайта

Продвижение сайта самостоятельно


Аналитическое агентство Statista опубликовало интересную статистику: общий объем рынка онлайн-коммерции в секторе потребительских товаров вырос на 16 % за прошлый год. В 2017 году пользователи потратили в сети около 1,5 триллионов долларов США. Примерно 45 % интернет-пользователей совершают покупки в интернет-магазинах, но уровень проникновения онлайн-коммерции различается по странам. В России 63 % пользователей ищут услуги и товары онлайн. Возможно, среди них были и ваши клиенты, которые очень старались вас найти, но так и не смогли этого сделать по простым причинам: у вас нет сайта либо он не в топе (это, по сути, одно и то же).


Возможно, вы просто не знаете, с чего начать. Конечно, нельзя просто так взять и раз и навсегда изучить SEO, ведь алгоритмы работы поисковых систем постоянно меняются, а Яндекс и Google никогда не раскроют секретов успешного продвижения. Однако сегодня мы откроем завесу тайн и поделимся пошаговой инструкцией, как лучше действовать, чтобы раскрутить сайт самостоятельно. Если вы продвигаете сайт своими руками, то наше руководство как раз для вас. Легко не будет, но мы надеемся, что вы не боитесь сложностей! Итак, поехали – основы раскрутки сайта.

ШАГ 1. Разбираемся с теорией


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

ШАГ 2. Создаем сайт

Создание веб-сайта

Создание сайта


Если он у вас уже есть, то можете смело пропускать этот раздел пошаговой инструкции по продвижению сайта и переходить к следующему. Но, возможно, вам тоже будет интересно. Итак, что же нужно продумать при создании сайта?


1. Выберите домен. Вы можете зарегистрировать доменное имя в одном из сервисов или приобрести с рук или на аукционах. Вот несколько сервисов для регистрации домена: nic.ru, REG.ru, 2domains.ru. Если вы хотите купить домен у пользователей, обязательно проверьте, что он не под фильтром, например под АГС или «Минусинск». В другой раз мы обязательно расскажем вам о них подробнее.


2. Определитесь с CMS. Выбирайте CMS, соответствующую характеру вашего сайта, например WordPress отлично подходит для блога, но не потянет крупный интернет-магазин. В этом случае лучше отдать предпочтение 1С-Битрикс. Есть как платные, так и бесплатные варианты. Функционал у них примерно похожий, но каждая система имеет свои особенности.


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

ШАГ 3. Анализируем конкурентов


Конечно, мы о конкурентах, которые основательно прописались в топе, чувствуют себя там вполне комфортно и даже не планируют отступать. Чем они лучше вас? А может, у них все-таки есть слабые места, которые вы сможете обыграть в свою пользу? Поэтому следующий наш шаг – SEO-аудит сайтов-конкурентов и вашего сайта. Такая работа потребует от вас максимум усидчивости и внимательности.


1. Определите список наиболее успешных в продвижении конкурентов.


2. Определите более 15 показателей, по которым будете сравнивать (ТИЦ, возраст, количество ссылок, видимость, структура сайта, контент и т. д.).


3. Высчитайте средние значения и значения по медиане и внесите полученные данные в таблицу.


4. Сравните с показателями вашего сайта.


5. Определите ваши слабые и сильные стороны.


6. Сформируйте стратегию продвижения.

ШАГ 4. Прорабатываем семантическое ядро

Подбор семантического ядра

Семантическое ядро


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


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


2. Подберите запросы, перемножив слова из полученной таблицы, воспользовавшись, например, Яндекс.Вордстатом и Планировщиком ключевых слов Google Adwords, программой KeyCollector или ее бесплатным аналогом с цепляющим русское ухо названием СловоЕб, а затем отминусуйте все лишнее через тот же KeyCollector.


3. Не ожидали, что будет так много? Выдохните и разберитесь во всем этом хаосе. Чтобы работать со списком, сгруппируйте ключевые слова и распределите группы по продвигаемым/посадочным страницам. Если у вас небольшой проект, вы не ищете легких путей и крайне экономны, то можете сгруппировать запросы вручную. Но для более крупных проектов лучше использовать платные программы, например Rush Analytics. Не переживайте, если страниц будет много. В этом случае принцип «чем больше, тем лучше» работает отлично. Если пользователь увидит точный ответ на свой запрос, вероятность, что он совершит покупку, будет выше. При этом учитывайте, что продвигаемая страница должна быть не больше чем в 3 клика от главной.

ШАГ 5. Приступаем к внутренней оптимизации

Прорабатываем удобную структуру и дизайн


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


1. Если структура понятна и логична, поисковики быстрее проиндексируют страницы, а пользователи найдут все, что им нужно. Для seo лучше всего подходит иерархическая с двумя или тремя уровнями вложенности («Главная» / «Рубрика» / «Запись») и решетчатая структура (распространена у крупных интернет-магазинов, когда страницы нижних уровней входят в несколько категорий) с исключением дублирующихся страниц атрибутом rel=»canonical» или запретом индексации дублей в robots.txt.


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


3. Вы страстная натура и просто обожаете красный шрифт на черном фоне? А посетители сайта? Уверены, что далеко не все. На сайте все должно быть гармонично – цветовая гамма, шрифты, изображения. Разработайте дизайн с учетом аудитории, ее интересов, тематики самостоятельно или обратитесь к профессионалу.

Доводим сайт до технического совершенства


Чтобы ваш сайт попал в топ-10 Яндекс или Google (а на меньшее мы и не рассчитываем), сначала он должен попасть в индекс ПС – поисковую базу, в которой хранятся все доступные поисковикам документы и веб-страницы. А чтобы там оказались только страницы с контентом, а не технические, важно правильно настроить сайт.


1. Заполните robots.txt и sitemap.xml. Дайте поисковикам команды, какие страницы нужно добавить в индекс, а какие все-таки не стоит, в специальном файле robots.txt. Он лежит в корневой директории сайта. Задайте им правила поведения относительно всех файлов. Также в общении с роботами вам поможет файл sitemap.xml. Особенно, если на вашем сайте очень много страниц. Роботы поисковиков обходят сайт последовательно: сначала заходят на страницу X, находят на ней ссылку на страницу Y и переходят туда, потом находят там ссылку на Z и идут дальше своим путем. При этом обойти за сутки на одном сайте он может не больше 100 страниц. Упростите ему работу и проложите маршрут в карте сайта sitemap.xml, а затем загрузите ее в корневую папку.


2. Настройте 404-ые страницы. Несуществующие страницы обязательно должны отдавать код 404. Популярные CMS, по умолчанию, имеют функцию грамотного ответа для отсутствующих страниц, но это не точно. Поэтому введите в адресную строку любые безумные варианты, которые может ввести пользователь: site.ru/123456, site.ru/йцуке, site.ru/404, site.ru/qwerty – и проверьте код ответа, например на этом сайте www.redirect-checker.org. Если что-то пошло не так, срочно поправляйте.


3. Создайте ЧПУ. Человекопонятный URL может быть настроен практически в любой CMS. Поисковые системы предпочитают URL латиницей, нежели кириллицей, которая кодируется в формате UTF-8, преобразуя каждую кириллическую букву в 16-ричное представление. ЧПУ не должны быть длиннее 130 символов. Желательно, чтобы в нем были ключевые слова, но без переспама.


4. Настройте 301-ый и 302-ый редиректы. Редиректы – большая боль поисковиков. Чтобы не получить от них минус балл в карму, нужно грамотно настроить переадресацию. Если вы изменили адрес внутренней страницы при оптимизации, используйте 301-ый редирект. В этом случае после индексации поисковик заменит в выдаче старый адрес на новый. Если адрес меняется на время, используйте 302-ой редирект. Поисковик не изменит адрес страницы в выдаче на новый и не проиндексирует новую страницу.


5. Избавьтесь от дублей страниц и мета-тегов. Если у страницы есть дубли на сайте, вылететь из индекса могут обе. Поэтому:

  • грамотно настройте «главное зеркало» сайта – его основной адрес;

  • удалите все лишние технические адреса страниц, которые случайно возникли при создании сайта;

  • избегайте параметрических УРЛов при настроенных ЧПУ;

  • если используете UTM-метки, укажите поисковикам каноничный адрес страницы.


Проворить сайт на дубли поможет Screaming Frog SEO Spider или бесплатный аналог Xenu. Примерно так и с мета-тегами. Если они совпадают, шансы успешной раскрутки минимальны. Поэтому отлавливаем их с помощью специального софта и используем заполнение по маске.

Наполняем сайт ключевыми словами


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


1. Напишите оптимизированные тексты. Поисковые роботы индексируют текстовый контент, поэтому берем в руки перо и бумагу пишем и оптимизируем тексты сами или обращаемся за помощью к копирайтерам. Найти их можно самому на биржах копирайтинга (etxt.ru, advego.ru и пр.), автоматизированных сервисах (например, Rookee) или в специальных копирайтинговых агентствах. Важно, чтобы контент был грамотным, уникальным, логично структурированным, полезным и интересным для пользователей.


2. Оптимизируйте мета-теги. Зачастую правильно заполненные теги влияют на скорость продвижения лучше, чем оптимизированные тексты. Заполните title, keywords, description, h2-h4 заголовки, вписав в них ключи в максимально точном вхождении, сохранив при этом их адекватный вид. Все мета-теги должны быть заполнены и уникальны.


Повышаем юзабилити


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


1. Проработайте коммерческие факторы. Если вы хотите выйти в топ по коммерческой тематике, добавьте на сайт раздел о компании, способы связи, информацию о ценах и спецпредложениях, раздел «Помощь», информацию о доставке, схему проезда, отзывы покупателей и пр. Это оценят и пользователи, и поисковики.


2. Повысьте скорость загрузки. Медленные сайты сразу отпугивают пользователя и занимают более низкие позиции в выдаче. Как говорится, время – деньги. Оптимальной считается скорость загрузки до 200 мс. Проверьте скорость с помощью Google PageSpeed Insights, gtmetrix. com, tools.pingdom.com и других сервисов.


3. Сделайте сайт мобилопригодным. Не будем снова мучить вас цифрами и просто скажем, что количество покупок с мобильных устройств растет семимильными скачками. Вы же не хотите терять потенциальных клиентов? Поэтому оптимизируйте обычный сайт для мобильных устройств, структурировав имеющиеся разделы контента для корректного отображения на маленьких экранах. Проверить отображение можно с помощью официального инструмента от Гугл Mobile-friendly Test.

Настраиваем перелинковку


При самостоятельной раскрутке сайта с нуля грамотная перелинковка помогает быстрее занять высокие позиции по НЧ и СЧ запросам за счет лучшей индексации доработок (выше мы рассказывали про то, как робот переходит по ссылкам), передачи веса страниц от донора акцептору и улучшения поведенческих факторов. Ссылайтесь на другие страницы сайта, действительно интересные посетителю в данный момент, используйте модуль похожих новостей, предлагайте просмотреть подборки интересных материалов (не зря же мы выше искали копирайтеров!). В т. ч. это улучшает поведенческие факторы, так как значительно дольше удерживает пользователей на страницах ресурса. P. S. Циклических ссылок быть не должно.

Улучшаем поведенческие факторы


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

ШАГ 6. Приступаем к внешней оптимизации

Внешняя ссылочная оптимизация

Внешняя оптимизация


По сути, все работы по внешней оптимизации сайта сводятся к наращиванию ссылочной массы: закупке ссылок, репостам в социальных сетях, регистрации в каталогах и справочниках. Вот как это работает: у каждого сайта в индексе есть определенный вес. Любая ссылка с сайта-донора, которая не закрыта от индексации, переносит на сайт-акцептор часть веса, в результате чего он наращивает собственный вес. Чем выше авторитетность (больше вес), тем проще выйти в топ-10 по желаемым запросам. Раскрутить сайт самому помогают десятки бирж и сервисов.

Постепенно наращивайте ссылочную массу


Если на ваш сайт часто ссылаются качественные ресурсы, это значит, что он интересен другим пользователям. Пока ваш сайт молодой, трудно найти ресурсы, которые бесплатно будут на вас ссылаться, поэтому можно работать с сервисами для автоматического продвижения, например с сервисом Rookee. При этом важно соблюдать правила seo-оптимизации, грамотно и органично вписывая в анкоры ключевые слова, а также следить за качеством доноров, чтобы не попасть под «Минусинск».

Регистрируйтесь в каталогах


Еще одна возможность наращивания ссылочной массы – это различные каталоги, где можно выложить информацию о своем сайте со ссылкой на главную страницу. Несколько лет назад был популярен каталог Dmoz, но он закрылся. А в 2018 году прекратил прием заявок и популярный Яндекс.Каталог, куда стремились попасть многие ресурсы. Сейчас существует большое количество других авторитетных каталогов, в т. ч. и региональных. Обязательно подавайте заявки на добавление в каталоги, где действительно бывает ваша целевая аудитория.

ШАГ 7. Используем дополнительные каналы раскрутки сайта


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

ШАГ 8. Учимся на чужих ошибках

Использовать знания о чужих SEO-ошибках

SEO-ошибки


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

  • берут текстовый контент с других сайтов;

  • некорректно распределяют запросы по страницам или подбирают их, не учитывая характер сайта;

  • заказывают тексты низкого качества или используют синонимайзеры;

  • не обновляют контент на сайте;

  • накручивают поведенческие факторы с помощью специализированных сервисов;

  • создают сайты-дорвеи или MFA;

  • сразу покупают большое количество ссылок;

  • игнорируют советы по адаптивности сайта под мобильные устройства, увеличению скорости загрузки страниц;

  • не проверяют ресурс на наличие дублей страниц;

  • отказываются от расширения семантического ядра;

  • не подключают Яндекс. Метрику, Google Analytics для анализа поведения пользователей;

  • игнорируют советы по улучшению юзабилити.


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

Создание действительно быстрого сайта с нуля | Мартин Драпо | HackerNoon.com

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

В этой статье я исследую создание веб-сайта с нуля с учетом UX, скорости, мобильных устройств, SEO и AMP.

Когда я пишу по-французски, я часто натыкаюсь на спряжение глагола. В отличие от английского, во французском языке есть странные правила. Оно заканчивается на «с» или «т»? Есть некоторые грамматические правила, о которых забывают. Например, глагол «finir» будет заканчиваться на «s» или «t» в настоящем времени, но без в прошедшем времени.

Мой естественный инстинкт — погуглить «conjugaison finir», чтобы найти правильную грамматику. Есть множество веб-сайтов, которые дадут вам ответ. Однако они перегружены рекламой. Например, nouvelobs.com даже размещает большое видеообъявление, которое подталкивает ответ ниже сгиба. Как неприятно!

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

Находясь в браузере, довольно быстро открыть новую вкладку и погуглить «conjugaison finir». Если бы только был чистый, супер быстрый и бесплатный веб-сайт, чтобы дать мне ответ.

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

  1. Эффективный дизайн без рекламы и лишних функций
  2. Легко запоминающееся доменное имя
  3. Быстро. Действительно, очень быстро. Загрузка страницы менее 1 секунды.
  4. Интегрированный поиск
  5. Удобство для мобильных устройств
  6. Быстрый поиск в Google

В этой статье описывается мой путь создания conjugaison.xyz . Я увидел в этом хорошее упражнение по созданию веб-сайта с нуля.

Выбор домена всегда сложен. В первую очередь речь идет о брендинге и о том, чтобы его было легко запомнить. В конечном итоге я хотел, чтобы мое доменное имя содержало ключевое слово, которое я буду искать. В данном случае «сопряжение». Затем я бы добавил само имя глагола. Поиск спряжения глагола «finir» даст поисковый запрос «conjugaison finir».

К сожалению, conjugaison.com уже занят (или припаркован). Логичными были варианты laconjugaison.com или conjugaisonverbe.com . Мне пришлось выйти из домена дотком.

Во время моего исследования GoDaddy предложил альтернативу: conjugaison.xyz всего за 2 доллара в первый год. Мне понравилось расширение dot xyz . У него было приятное звучание, и его было легко запомнить. И за 2$ это была сделка.

Как насчет SEO? Самюэль Лавуа отмечает, что с 2012 года Google не дает дополнительных SEO-баллов сайтам, содержащим ключевое слово. На самом деле они штрафуют сайты с точным соответствием домена (сокращенно EDM), если контент плохой. EDM — интересная тема. Брайан Харниш написал довольно познавательное руководство по EDM. Короче говоря, Сэмюэл считает, что есть 3 критерия, которые используются для определения сайта низкого качества: дефис в имени домена, точное соответствие ключевому слову и необычное доменное имя. Слишком плохо для меня с conjugaison.xyz соответствует 2 из этих 3 критериев. Google может счесть его некачественным и понизить в рейтинге.

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

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

Заголовок

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

Содержание

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

Нижний колонтитул

Редко кому удается добраться до нижнего колонтитула. Это стандартная практика — указывать автора (и авторские права). Это имеет смысл.

Дизайн

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

Окончательный уменьшенный файл CSS весил 57 КБ и еще 24 КБ для темы. Хорошо, не так уж плохо. Кроме того, минимизированный файл CSS не изменится. Я определенно мог бы отправить эти активы в CDN.

Вот окончательный вариант.

Скорость всегда следует рассматривать как характеристику. Я стараюсь никогда не идти на компромисс в скорости. Я считаю, что веб-сайт, который долго загружается, является неудачным. Кажется, я не один такой. Согласно исследованию Akamai и gomez.com, количество отказов от медленных веб-сайтов резко возрастает. Большинство пользователей ожидают, что сайт загрузится менее чем за 2 секунды. Я постараюсь сделать это менее чем за 1 секунду.

Когда разработчик думает о быстром веб-сайте, ему на ум приходят различные технологии. Есть back-end языки: Java, python, node JS, C#, ruby, PHP. Имеются базы данных: MySQL, MS SQL, Mondo DB. Есть front-end библиотеки и фреймворки: React, Angular, Vue, обычный jQuery. Есть серверы на голом металле, VPS (виртуальные приватные серверы) и докер-контейнеры. Наконец, можно также рассмотреть возможность использования CDN (сети доставки контента) для обслуживания статического контента, такого как изображения, файлы Javascript и CSS.

Серверная часть

Для conjugaison.xyz — чисто статического веб-сайта — внутренняя технология — это скорее вопрос личных предпочтений и знаний. С этой задачей справились бы Java, Node JS или PHP. Я выбрал PHP, потому что у меня уже есть опыт создания веб-сайтов и приложений с использованием LAMP (Linux Apache MySQL PHP).

В марте 2017 года я перешел с Rackspace на Amazon Lightsail. Я был очень доволен качеством и ценой VPS. У меня есть сервер с 1 ГБ оперативной памяти, который стоит мне всего 10 долларов в месяц, на котором я размещаю все свои личные проекты. Я выбрал стек LAMP на базе Bitnami. Bitnami LAMP — это Ubuntu с предварительно настроенными Apache, MySQL и PHP. Он также имеет PageSpeed ​​​​для кэширования ресурсов JS, CSS и изображений. Он также включает популярные фреймворки PHP, такие как Codeigniter, Laravel или Zend. В целом Bitnami LAMP хорошо документирован и прост в использовании.

В настоящее время HTTPS имеет решающее значение, и благодаря Let’s Encrypt установка SSL-сертификата выполняется легко и совершенно бесплатно. Bitnami предоставляет отличное руководство по Let’s Encrypt.

Front-end

На front-end я решил ничего не использовать — никакого Javascript. Это верно, вы правильно прочитали. НЕТ ЯВАСКРИПТА . conjugaison.xyz состоит из статических веб-страниц. Поэтому я решил изучить, как далеко я могу зайти, вообще не загружая Javascript.

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

Моя первая попытка состояла в том, чтобы создать одну статическую страницу для каждого глагола и отправить их в CDN. Это более 2000 статических веб-страниц. Когда я экспериментировал с созданием статических страниц, я столкнулся с проблемой, что любое изменение дизайна или любое исправление ошибки потребует регенерации более 2000 статических страниц и повторной отправки их в CDN. Обновление более 2000 страниц в CDN требует времени. Даже с хорошими инструментами CI (непрерывной интеграции) невозможно преодолеть задержку обновления этих страниц.

Решение со статической страницей казалось действительно архаичным по двум причинам. Во-первых, это было бы очень неэффективно. Это напомнило мне о днях, когда я загружал файлы по FTP на сервер. В настоящее время выполнение git pull на сервере намного эффективнее — только получение изменений.

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

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

Моя вторая попытка состояла в том, чтобы использовать PHP для динамической генерации HTML. Моя гипотеза заключалась в том, что мой сервер мог отображать HTML и отправлять его достаточно быстро. Моя целевая аудитория географически сосредоточена на восточном побережье Северной Америки, во франкоязычной провинции Квебек. Мой сервер Amazon Lightsail находится в Огайо. Я полагал, что сайт будет загружаться быстро. Наверняка достаточно времени до первого байта (TTFB) было 40мс. Это довольно быстро. В целом из Монреаля HTML-документ пришел менее чем за 200 мс, а иногда и намного быстрее. Моя гипотеза подтвердилась.

В этот момент мне не нужно было беспокоиться о CDN, что дало мне самое большое преимущество — возможность взломать сайт prod в реальном времени. Внесение изменений на веб-сайт просто включало обновление файла PHP на сервере и вуаля!

Кстати, ничто не сравнится с динамичностью и скоростью развертывания интерпретируемого языка. В моем случае я просто использую git в качестве своего CI. На сервере я запускаю «git pull», и все обновляется. Простота — это блаженство.

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

Отсутствие необходимости загружать, анализировать, интерпретировать и выполнять Javascript сделало страницу еще быстрее. В наши дни мы так привыкли к тому, что Javascript загружается на страницы. С React, Vue или Angular это невозможно. К счастью, мой сайт не требует ничего из этого. Это просто HTML. Что-то очень приятное возвращение к основам.

Единственный вопрос, который у меня возник, касался интегрированной формы поиска.

 
 
  значение = ”» />

Как оказалось, отправка форм встроена в HTML (я часто забываю об этом после многих лет использования библиотек jQuery и Javascript). Нажатие ввода просто отправляет на сервер. А поскольку мои страницы такие легкие и загружаются очень быстро, нет необходимости в AJAX на стороне клиента. При выполнении поиска браузер добавляет строку запроса ?term=miner и загружает новую страницу с сервера. Например, если ввести майнер в поле поиска, откроется страница https://conjugaison. xyz/recherche?term=miner.

Поиск включает загрузку двух страниц. В первом перечислены результаты поиска. Затем пользователь нажимает на нужный глагол для загрузки второй страницы. Может ли это быть быстрее? Почему бы не показать полное спряжение ближайшего подходящего глагола под результатами поиска? Я изменил веб-сайт, чтобы сделать именно это. Теперь вы гарантированно получите спряжение глагола после любого поиска, если мы найдем совпадение. Кроме того, поисковый запрос сохраняется, когда вы нажимаете на другой соответствующий глагол.

В бэкенде страница поиска /recherche просто выполняет перенаправление на страницу /verbe . В нашем конкретном случае это перенаправление:

Звонок https://conjugaison.xyz/recherche?term=miner.

Перенаправляет на https://conjugaison.xyz/verbe/miner?term=miner.

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

Open Search

Несколько лет назад Chrome представил поиск прямо в адресной строке браузера. Я вспоминаю тот день — это было ах-ха! момент. Он устранил поле ввода, тем самым улучшив взаимодействие с пользователем. В какой-то момент в адресную строку было добавлено автозаполнение, показывающее прошлые поиски и посещенные адреса веб-сайтов по мере ввода.

Недавно я обнаружил еще одну интересную вещь в адресной строке — встроенный поиск по сайту. Откройте новую вкладку браузера и введите «conjugaison.xyz». Нажмите пробел и обратите внимание на появление вертикальной полосы. Все, что вы наберете после этого, вызовет встроенный поиск на моем сайте.

Встроенный поиск в браузере через Open Search

Это возможно благодаря OpenSearch. OpenSearch «представляет собой набор технологий, позволяющих публиковать результаты поиска в формате, подходящем для синдикации и агрегирования» (OpenSearch в Википедии). RSS и Atom каналы являются частью этого. Как и встроенный поиск в браузере.

Чтобы включить OpenSearch на вашем веб-сайте, вам необходимо создать документ с описанием OpenSearch; XML-файлы, которые сообщают поисковым системам, какой URL-адрес вызывать для выполнения поиска. Вот файл opensearch.xml на моем сайте.

  
 conjugaison.xyz 
 Conjugaison des verbes en français 
 UTF-8 
  type="image/x-icon"> 
 https://conjugaison.xyz/favicon.ico 
  template="https://conjugaison.xyz/recherche?term={searchTerms}">

Тег Url сообщает браузеру, что нужно выполнить поиск с помощью HTTP GET , используя указанный URL-адрес. Он говорит, что результатом будет HTML-документ.0005

В дополнение к этому вы должны добавить ссылку мета-тег в свой HTML-документ, чтобы информировать браузеры и разрешить автоматическое обнаружение вашего поискового плагина.

Bootstrap изначально отзывчивый, поэтому сайт уже был мобильным. Единственным необходимым изменением было предотвращение сворачивания панели навигации на узких экранах. Применив немного CSS, я смог получить следующие результаты отклика на iPad и iPhone 4. На очень узком экране строка тега скрыта в панели навигации. Окно поиска находится ниже бренда. Я также укоротил заголовок, чтобы важный контент был в верхней части страницы.

Как насчет производительности на мобильных устройствах? Я провел дальнейшее тестирование, используя аудит производительности инструментов разработчика. Он измеряет производительность, как если бы это было на обычном мобильном устройстве и соединении 3G (код эмулирует мобильное соединение, ограничивая скорость соединения до 1,6 Мбит/с, средней скорости соединения 3G).

Вот этот аудит:

С оценкой 98/100 и временем взаимодействия 2100 с, это неплохо, но в два раза больше моей цели в 1 секунду? Дальнейший анализ указывает на одну вещь, замедляющую работу страницы: используемый мной пользовательский шрифт. Согласно аудиту, мы теряем 570 мс при загрузке и рисовании шрифта Courgette. Поэтому я провел эксперимент, удалив пользовательский шрифт. Я повторил аудит:

С высшим баллом 100 и 790 мс времени до интерактивности это довольно существенно! Отсутствие загрузки этого пользовательского шрифта сокращает время более чем на 1200 мс — вдвое больше, чем показал аудит!

Подождите, давайте рассмотрим это в контексте…

Во-первых, Аудит производительности эмулирует среднее мобильное устройство, работающее в сети 3G. Сюда не входит моя целевая аудитория в Квебеке, у которой недавно были подключены iPhone и LTE. Во-вторых, он измеряет первую загрузку и не учитывает последующие загрузки, в результате чего активы кэшируются.

Этот момент важен. Браузер кэширует пользовательский шрифт. Хотя первая загрузка может занять 2 секунды, последующие загрузки должны занимать менее 1 секунды.

В конце концов я решил, что пользовательский шрифт важен для дизайна conjugaison. xyz . Поэтому я решил оставить Courgette, пожертвовав временем первой загрузки.

SEO или поисковая оптимизация — это большой волосатый зверь. Обычно он состоит из двух частей: внутреннее SEO и внешнее SEO. Внутреннее SEO направлено на то, чтобы сделать сайт удобным для поиска. Подразумевает карты сайта, robots.txt, структурированные данные, метатеги (заголовок, описание), ключевые слова и т. д. –

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

В этой статье я не буду рассматривать внешнее SEO. Когда-нибудь я решу побороться за трафик, но пока conjugaison.xyz для меня в первую очередь.

Возвращаясь к моему списку желаний, осталось кое-что посмотреть: Поиск Google. Я хочу иметь возможность вводить в Google «conjugaison finir» и быстро находить свой веб-сайт. Как я уже упоминал, существует множество авторитетных веб-сайтов, конкурирующих за ключевое слово «сопряжение». Тем не менее, по опыту я знаю, что Google будет считать доменное имя довольно уникальным. Поэтому я могу изменить свой запрос на «conjugaison.xyz finir», и, надеюсь, правильная страница моего веб-сайта появится в качестве первого результата. Ниже приведены важные аспекты SEO на месте, над которыми я работал, чтобы достичь своей цели.

Ключевые слова

Боты поисковых систем сканируют страницы веб-сайтов в поисках ключевых слов. Затем индексатор пытается определить, о чем сайт и страницы. В моем случае это чертовски просто — спряжение глагола. Поэтому каждая из 2000+ страниц, которые у меня есть, имеют следующий шаблон заголовка: «[глагол] — Conjugaison du verbe [глагол]». Кроме того, я логически выстраиваю схему URL: conjugaison.xyz/verbe/[verbe].

Карта сайта

Рекомендуется создать файл sitemap.xml, содержащий список ваших страниц. Для conjugaison.xyz я написал PHP-скрипт для создания sitemap.xml с более чем 2000 страниц. Файл sitemap.xml находится в корне моего сайта.

Дополнительные ссылки Окно поиска

Вы когда-нибудь замечали, что на некоторых веб-сайтах окно поиска непосредственно интегрировано в результаты поиска Google? Это то, что называется окном поиска дополнительных ссылок, и его довольно легко реализовать, если на вашем сайте уже есть поисковая система. Мне нужно было только указать правильную разметку, чтобы сообщить Google Search:

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

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

Регистрация моего веб-сайта в поиске Google

Чтобы появиться в Google, Google должен знать, что вы существуете. Google предоставляет инструмент под названием Google Search Console (ранее известный как Инструменты Google для веб-мастеров). Вы можете добавить свой веб-ресурс, предоставить карту сайта и попросить Google проиндексировать ваш веб-сайт. Google Search Console также оценит ваш сайт, покажет вам статистику и даст вам советы по оптимизации вашего сайта и сделает его удобным для поисковых систем. Чтобы узнать больше, на Kissmetrics есть хорошая статья о поиске Google.

Я добавил conjugaison.xyz в Google Search Console, попросил Google проиндексировать веб-сайт, а затем попытался выполнить поиск в Google по запросу «conjugaison.xyz». Сайт появился в результатах поиска — ага! Затем я попытался найти глагол: «conjugaison.xyz finir». Мой сайт не появился ни на одной из первых страниц результатов поиска. Дерьмо.

Поиск по конкретному сайту

Затем я обнаружил, что вы можете заставить Google выполнять поиск только по сайту, используя этот шаблон: «site:conjugaison.xyz finir». Это называется поиском по конкретному сайту. Этот результат поиска дал мне только один результат — домашнюю страницу со списком всех глаголов. Страницы спряжения, кажется, не было в индексе Google.

А сейчас позвольте мне рассказать вам самое важное о SEO. Его терпение. Вы видите, что Google потребуется время, чтобы просканировать ваш сайт и добавить его в результаты поиска. Я ждал 1, 2, 3 дня и до сих пор ничего. Через неделю появилось всего несколько глаголов. Еще через неделю произошло волшебство — Google смог дать мне стабильные результаты, когда я искал глагол на своем веб-сайте. Поисковый запрос «site:conjugaison.xyz finir» наконец дал мне это:

Google даже отдал приоритет глаголу page над домашней страницей в качестве первого результата. Бинго.

Я очень доволен conjugaison. xyz как личным инструментом для просмотра спряжения глаголов на французском языке. Веб-сайт работает быстро, а пользовательский интерфейс для поиска глаголов очень эффективен в браузере, в поиске Google и на самом веб-сайте. Думаю, я достиг своей цели.

Еще лучше то, что я открыл для себя — встроенный поиск в браузере благодаря Open Search. Чтобы найти глагол, мне просто нужно открыть новую вкладку, ввести «conjugaison.xyz» и пробел, чтобы войти в режим поиска. Как показано в следующем видео, мне требуется 5 секунд, чтобы найти глагол. Большую часть этого времени я печатаю и двигаю мышью. Поиск и загрузка сайта занимает менее 1 секунды.

Специальная благодарность Daniel Tousignant-Brodeur , Pierre-Luc Maheu , Alexis Philippe и Samuel Lavoie для чтения ванн и предоставление кормовой.

Если вам понравилась эта история, могу ли я предложить Быстрый и бесплатный RAD с использованием страниц GitHub .

Создание иммерсивного креативного веб-сайта с нуля без фреймворков (онлайн-курс)

СКИДКА 75% НА ВСЕ КУРСЫ

Черная пятница

Назад к курсам

Существует множество преимуществ создания веб-сайтов с нуля без использования фреймворков JavaScript, таких как React, Vue или Angular. Особенно, когда вы хотите создать что-то уникальное, чего еще никогда не было ни на одном другом веб-сайте.

Требования

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

Описание

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

Дополнительная информация

Мы научим вас правильному подходу к использованию простого JavaScript на веб-сайте: мы расскажем о Fetch API и History API, а затем интегрируем их с классами ECMAScript 2015+, которые будут использовать Promises для анимации в и плавно анимируйте свои представления.

Мы также узнаем  , как создавать повторно используемые классы компонентов, которые могут ускорить процесс разработки.  Наконец, мы узнаем, как интегрировать простую настройку JavaScript с библиотеками, ориентированными на анимацию, такими как GSAP, OGL и Three.js, чтобы выделить свой веб-сайт среди всех остальных.

К концу этого курса вы сможете создать первоклассный веб-сайт, изучить некоторые технологии и инструменты переднего плана, такие как Pug (механизм шаблонов), SASS/SCSS + PostCSS (препроцессор CSS), Babel (ECMAScript 2015+ JavaScript Compiler) и Webpack (Assets Bundler) и, наконец, узнайте, как интегрировать все со стандартными отраслевыми библиотеками, такими как GSAP, OGL и Three. js, чтобы еще больше улучшить свой веб-сайт.

Вы узнаете

  • Как настроить свой шаблон с нуля
  • Новейшие инструменты и библиотеки, необходимые для ускорения работы
  • Правильный подход к использованию простого JavaScript на веб-сайте
  • Узнайте о наиболее часто используемых интерфейсных технологиях и инструментах
  • Интегрируйте все с GSAP, OGL и Three.js

Курс включает

  • 25 часов практических и сжатых знаний
  • Немедленный доступ ко всей коллекции видео
  • Документация курса
  • Исходный код
  • Ценные ссылки и ресурсы для каждого урока

Узнайте больше о
этом курсе

Модули

Что вы узнаете

в этом курсе.

Познакомьтесь с учителем

Интерактивный разработчик в Active Theory

Луис Энрике Бизарро — бразильский креативный разработчик из Сан-Паулу, Бразилия, в настоящее время работает в Active Theory.

Он работал над технически сложными проектами для известных международных брендов, таких как Nike, Google, Airbnb, Samsung, Lufthansa, Shell, Corvette, Chevrolet, HBO и Cartoon Network, используя передовые технологии, такие как WebGL, GLSL и JavaScript.

Сейчас

25€

/€100

Содержание курса

Существует множество преимуществ создания веб-сайтов с нуля без использования JavaScript-фреймворков , таких как React, Vue или Angular. Особенно, когда вы хотите создать что-то уникальное, чего еще никогда не было ни на одном другом веб-сайте.

Особенности

  • Английский

  • английский, испанский, французский, японский, итальянский, португальский
    (Машинный перевод)

  • Все уровни

  • Доступ на мобильных устройствах и компьютерах

  • Полный доступ

  • Сертификат об окончании

Если у вас есть какие-либо вопросы об этом курсе, пожалуйста, свяжитесь с нами

Начните курс и улучшите свой профессиональный инструментарий.