Медиа-материалы

Разное: Login + PDF

Видео и публичные выступления

Персональные web-сайты, online-резюме, сайты для малого бизнеса

Лучший друг Nikushin это (ясное дело) Mikushin! Изучите на досуге: mikushin.com и сразу возникнет новый вопрос: "А как в 2023 году сделать персональный сайт-визитку, чтобы это было реально полезно в работе?"

Здесь два фундаментальных подхода – либо красиво, либо полезно. Эти окружности пересекаются, но не вот тебе в одну. Ясное дело, что сайт mobile-first, но при этом и на ПК должен отображаться, а это уже 4 окружности. И с каждым новым пунктом в ТЗ все "чудесатей и чудесатей". Посмотрим, как может выглядеть эффективная (но это не точно) персональная страница в 2023 году:

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

Пошаговый процесс создания одностраничного сайта на конструкторе типа Tilda / Creatium выглядит примерно так:

Регистрируем (или достаем из запасников) домен и делегируем его на NS конструктора. Делаем это первым делом, так как процесс может занять существенное время в зависимости от регистратора и доменной зоны.
Создаем на стороне конструктора новую страницу, она пока без домена, но уже можно выбрать поддомен третьего уровня. Если такая возможность есть, выбираем совпадающий с нашим доменом. Это мелкая деталь, но она может пригодится в последствии при переездах или утрате основного домена.
Пишем контент для новой страницы. Начать лучше всего с чистого листа и совершенно пустого шаблона. Ваша задача получить все основные элементы страницы – заголовок H1, заголовки H2-H3-H4, несколько абзацев текста, изображение в формате .WEBP, по возможности видео на платформе YouTube.
Отключаем все шрифты кроме Open Sans. Дополнительные шрифты не нужны и лишь воруют у вас производительность сайта.
Добавляем наш домен в интерфейс конструктора, если все успешно делегировалось то осуществляем связь новой страницы и домена.
Сгенерируйте и загрузите сразу изображение faviсon, чтобы потом месяцами не ждать его обновления в сервисах Яндекс.
Отыщите, как в конструкторе организована обработка страницы 404 и отредактируйте ее содержимое, включая Title и Desctiption. Бывает сделаешь сайт на английском, а 404 на чистом русском языке. То же самое стоит проделать с остальными "техническими" страницами, которые конструктор делает сам ("Благодарность", "Пользовательское соглашение" и другое). Если эти страницы вам не нужны - удалите их.
Перед началом всех остальных действий необходимо убедиться, что ваш новый сайт открывается, SSL-сертификат выпущен и установлен, HTTPS работает, все переадресации вида "http>https" и "www>корень сайта" функционируют успешно.
Добавляем Я.Метрика с включенным Вебвизор, после ее установки добавляем Yandex Webmaster и связываем счетчик с консолью Я.Вебмастер ("Включить обход по счетчикам").
Можно сразу потратить время и поменять оригинальный URL в Метрике на альтернативный CDN от jsDelivr. Такая опция должна быть в самом конструкторе, но скорее всего она будет неэффективной. Это требуется проверять, ибо показатели скорости загрузки могут улучшиться, но существенная часть трафика при этом окажется неучтенной. Эксперименты с CDN для скриптов лучше делать когда у вас уже есть опыт и трафик, а еще лучше изучить пункт про Zaraz ниже.
Добавляем Google Analytics, как код, так как пока далеко не все конструкторы поддерживают новую версию кода GA4. После этого добавляем сайт в Google Search Console и осуществляем его связь с GA.
Настраиваем OpenGraph для каждой из страниц нового сайта. Изготавливаем og:image с помощью Canva, например .PNG 1200x630, добавляем его в проект вместе с полями og:title, og:description, og:url, og:site_name, og:type и og:locale. Желательно этому изображению дать внятное название, связанное с вашим проектом. Всю эту конструкцию сверху полируем тегом <meta name="twitter:card" content="summary_large_image" />. С этого момента вы начнете получать прекрасные расширенные снипеты при распространении URL сайта в Telegram и других социальных сервисах. В случае с Telegram можно проверить сниппет отправив URL самому себе в Saved Masseges. Если внешний вид не устроит, меняйте текст и графику, а далее, используя @WebpageBot обновляйте кэш сниппета и проверяйте результат. В остальных соцсетях есть похожие инструменты по обновлению кэша, но лучше всё сделать на Telegram (где быстро и гарантировано) и уже потом нести URL на другие площадки.
Проверяем результаты работы сайта через Google Page Speed, исправляем все что можно, там будет детальный лог по проблемам. В идеале все ваши параметры должны быть в зеленой зоне, однако это не всегда технически достижимо. Интересует нас именно оценка скорости для мобильного устройства, рейтинг для компьютера всегда будет выше.
Добавляем Ahrefs, либо через meta-тег, либо, что еще лучше, через связку с Google Search Console. Дожидаемся завершения сканирования, проверяем результаты и исправляем все что можно. На первое время лучше всего поставить сканирование на ежедневный режим и наблюдая за изменениями оперативно вносить исправления и дополнения.
По желанию накатываем CloudFlare. В случае с Creatium он точно поможет сжать ряд ресурсов, например таких как CSS, что позволит получить чуть лучшие оценки в Google Page Speed и Ahrefs. Там же, на стороне CloudFlare будет дополнительный источник статистики на основе DNS. И именно здесь вы сможете гибко настроить все необходимые переадресации чтобы "поймать" любой ошибочный трафик на ваш домен (например, если он старый и там уже был проект) и корректно "завернуть" его на главную.
При добавления домена в CloudFlare выбираем тариф Free, он в самом низу, достаточно неочевидно расположен. После процедуры Quick Scan вам предложат минимум две DNS-записи, это нормально, если она будет одна это проблема и надо будет руками добавить запись для @. Копируем два предлагаемых NS-сервера и заменяем на них существующие NS-сервера домена от конструктора. Далее, в разделе Quick Start Guide со всем соглашаемся и все включаем (Automatic HTTPS Rewrites, Always Use HTTPS, Brotli) в зеленое. Далее Finish и Check nameservers. На стороне конструктора не делаем ничего. Ждем порядка 2+ часов и более. После получения от CloudFlare электронного письма с заголовком "[Cloudflare]: nikushin.com is now active on a Free Cloudflare plan..." можно действовать дальше.
Открываем URL браузере (до начала миграции он же открывался у вас, верно?) и получаем примерно такую ошибку "Сайт выполнил переадресацию слишком много раз. Удалите файлы cookie. ERR_TOO_MANY_REDIRECTS. Эта проблема может возникать при отключении или запрещении принятия кук". Это правильный и нормальный результат!
Все заработает когда вы перейдете в разделе SSL/TLS во вкладку Overview и включите режим Full или Full (strict). С этого момента сайт начнет без проблем открываться в браузере. После всех последующих настроек еще раз убедитесь, что режим именно Full. Если выбор Full (strict) нормально работает для вашего случая можно и нужно использовать его. Однако, именно в этом режиме может возникать ошибка Error code 526
Далеко не сразу нужно проверять Google Web Vitals после миграции, увидев резкий рост параметров всегда убеждайтесь, чрез пункт "Открыть карту эффективности" что все необходимые сайту скрипты действительно загружаются!
Там же можно смело включить HSTS (пункты Enable HSTS, Apply HSTS policy to subdomains, Preload), а в подразделе "Origin Server" пункт "Authenticated Origin Pulls". Далее в разделе Speed/Optimization включите всё, что можно включить. Примерно то же самое в разделе Network. Проверяйте работоспособность сайта в отдельном окне браузере в процессе включения опций.
Отдельно посмотрите на реакцию Core Web Vitals на включенный или выключенный Rocket Loader. Для совсем плохо оптимизированных конструкторов Rocket Loader может не улучшить показатели Google Page Speed, а напротив, ухудшить, особенно в разделе "Избегайте длительных задач в основном потоке". Не исключено, что его лучше не включать.
Чтобы не получать дополнительный предупреждений в Ahrefs отключите в разделе "Scrape Shield" пункт "Email Address Obfuscation". Он отвечает за сокрытие всех e-mail на странице и порождает сущность по адресу "домен/cdn-cgi/l/email-protection". Лучше всего это сделать сразу.
Если CloudFlare освоен успешно то можно включить в нем Zaraz и начать переносить туда все скрипты, в первую очередь GA4 и Yandex Metrika. На практике это аналог Google Tag Manager, но с немного другим принципом работы. Именно Zaraz позволит существенно улучшить Core Web Vitals индекс, в первую очередь снизить "Total Blocking Time" и увеличить оценку производительности на ~10 пунктов. Ясное дело, что после переноса скрипта на Zaraz в интерфейсе конструктора его нужно отключить.
Используя CloudFlare вы получаете некоторый контроль наш кэширование и тут стоит рассмотреть опцию "Browser Cache TTL". Установка там значения в 1 год (да, один год, это рекомендации Google) позволит снизить объем предупреждений в разделе "Диагностика" / "Задайте правила эффективного использования кеша для статических объектов". На практике, если 1 год страшно, то можно смело поставить 6 месяцев, эффект будет одинаковый, а вот меньшие значения не повлияют положительно на Core Web Vitals.
В зависимости от возможностей вашего регистратора доменов можно включить DNSSEC. Начинаются действия на стороне CloudFlare, полученные там данные относятся в панель управления доменом у регистратора. Если домен открывается после всех манипуляций, то финальный результат можно проверить здесь dnssec-analyzer.verisignlabs.com
Завершая историю с настройками на стороне CloudFlare не забываем выйти на самый верхний уровень в аккаунте и в разделе "Analytics & Logs" > "Web Analytics" через пункт Add site добавить наш новый проект в сбор статистики. Она основана на RUM и будет хорошим и совершенно бесплатным (как по деньгам так и по нагрузке на сайт) дополнением к Yandex Metrika и Google Analytics.
После появления трафика на сайт потратьте время на просмотр записанных сессий Вебвизора, особенно с мобильных устройств. Возможно потребуется поправить верстку, чтобы она оптимальнее отображалась на маленьких экранах мобильных телефонов.
Если функционал конструктора не дает внятных решений по набору иконок соцсетей для расшаривания вашей ссылки используйте Блок «Поделиться». Решение достаточно старое, но условно быстрое, особенно если вы встраиваете его через HTML-блок c Lazy load.
Если вы используете на сайте функционал чата с оператором, посмотрите внимательно в настройки, возможно там есть отложенная загрузка основного скрипта чата (не отложенное появление окна, а именно загрузка скрипта). Достаточно отложить загрузку на 2-5 секунд чтобы результат стал существенно лучше воспринимаем на стороне Google Lighthouse.