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

Видимо, поковырялся, понял, что там пахнет жареным, и просто отрапортовал "я сделяль". Проверить это заказчик не может, значит, задача закрыта.

Посещаемость сайта продолжила расти и в какой-то момент стала больше 50 посетителей в единицу времени. А это был лимит старого сервера.

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

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

Сейчас сложно посчитать, сколько недель / месяцев (?) сливали деньги на контекстную рекламу и теряли пользователей из SEO. Такой нюанс очень сложно заметить, если постоянно не проверять сайт.

Перенос на выделенный сервер у нас занял часов 10, пока исправили все косяки с ним связанные.

Кроме основной проблемы с max user connections, обнаружили почту в чёрном списке :)

Этап II: ускорение сайта

После того, как сайт смог в принципе принимать посетителей, занялись скоростью загрузки.

Главная грузилась 3 сек. только на стороне сервера:

После оптимизации сервер стал отвечать почти в 12 раз быстрее.

Самой проблемной страницей была страница категории.

Из-за неоптимизированных запросов сервер мог отвечать до 7.4 сек. Семь секунд, Карл!!!

После установки индексов и других работ сервер стал отвечать в 18 раз быстрее:

Как результат, конверсия в заказ выросла на 46% (!)

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

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

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

Провели аудит и ужаснулись:

Я понимаю, что скрины выше вам ни о чём не говорят. Если по-простому, то ситуация выглядела вот так:

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

После оптимизации почта получила высший балл на аудите:

Вы можете проверить свою почту вот тут: https://www.mail-tester.com/

Серверная оптимизация сайта

Вторая жалоба клиента касалась скорости работы сайта. Аудит показал высокое время ответа сервера:

Провели оптимизацию:

• Обновили nginx
• Установили TLS1.3 + Openssl1.1.1
  Это приводит к ускорению установления SSL-соединения в 2-3 раза.
• Внедрили метод отправки данных sendfile
  Он более эффективен, чем стандартный метод read+write.
• Кешировали шрифты, css и картинки
• Настроили сжатие Gzip
• Внедрили Keepalive
  Такой тип соединения позволяет избежать необходимости повторного создания соединения между клиентом и сервером. Если клиент перестал читать отвечать, Nginx будет сбрасывать соединение с ним.
• Подключили передачу данных по протоколу HTTP/2

Отдельно оптимизировали PHP:

• Установили и настроили режим Fastcgi 7.4
• Настроили ускоритель кода OpCache
  Результат первой компиляции сохраняется в кэш, с которым и будет работать PHP. Компиляция кода от этого происходит быстрее.
  Когда файлы изменятся, модуль сам сбросит кэш и обеспечит перекомпиляцию.
  Этот модуль делает очень полезную экономию ресурсов.
• Настроили время выполнения php процессов
  Это даёт возможность не засорять процессор сервера остаточными процессами от сайта

В итоге это дало результат:

Время ответа сервера сократилось с 2949 до 80 мс (более чем в 36 раз!).

Время загрузки всех ресурсов снизилось с 4.2 до 1.1 сек (в 3.8 раза).

По менее строгим критерям PageSpeed Insights сайт сразу получил высокие оценки.

Если тебе срочно нужно поднять скорость загрузки сайта для увеличения позиций по SEO или конверсии из рекламы, пиши мне в Телеграм https://t.me/nstebunoff или Вконтакте https://vk.com/nick_stebunov.

Сервис для бесплатной проверки скорости загрузки: https://developers.google.com/speed/pagespeed/insights/?hl=ru

Чаще всего предприниматели об этом не думают ровно до того момента, как приходят к SEO-специалистам.

А те, кто им разрабатывал сайт, скромно об этом умалчивают, так как добиться высокой скорости загрузки способна далеко не каждая команда. Да и как получить клиента, если проект от такого требования в ТЗ сразу может подорожать процентов на 30?

Всё равно при приёмке работ на скорость не посмотрят...

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

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

Решение

Окей, проблема понятна. Что с ней можно сделать?

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

И...

Ничего не изменилось. У сайта была оценка в 17 пунктов из 100 по скорости загрузки, стало 19, что вообще-то в пределах погрешности.

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

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

Я задал себе простой вопрос: почему сайты, которые мы с нуля собираем у себя, такие быстрые?

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

Почему?

Он качественно свёрстан!

То есть, чтобы твой сайт стал быстрым как Феррари в горах Италии, мы его переверстаем.

Возьмём твой дизайн без изменений, сверстаем по строгим критериям. Бонусом по пути уберём все ошибки валидации.

Если у тебя не осталось дизайн-макетов — не беда! Срисуем текущую версию сайта в .psd макет за пару дней.

Вёрстку перенесём на твою CMS (Wordpress, Bitrix, самопис, ModX, что угодно).

Подключим скрипты для ещё большего ускорения работы:

1. Отложенную загрузку изображений.
2. Сжатие картинок в формате WebP.
3. Быструю загрузку плеера Youtube.
4. Оптимизированную загрузку рекламных блоков РСЯ и Googel Adsense, если они используются в вашем проекте.
5. Асинхронно подгрузим виджет Вконтакте, чтобы не блокировал загрузку контента страницы.

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

Стоимость

Ок, сколько стоит?

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

Чтобы иметь статистику по цене и кейсы "переделок", я сейчас возьму 1 (один) проект по себестоимости (намного дешевле цены, написанной выше).

Сайт должен соответствовать следующим простым критериям (чтобы было, что оптимизировать):

1. Иметь индекс загрузки PageSpeed Insights <25.
2. Первый контент должен показываться после 3 секунды ожидания.

Если ты не знаешь, как всё это проверить, напиши мне в Телеграм https://t.me/nstebunoff или Вконтакте https://vk.com/nick_stebunov, я чекну твой сайт.

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

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

Мы перевели все картинки в лёгкий формат, подключили "ленивую" загрузку контента, но выиграли лишь пару десятых долей секунды. Увы, этот сайт нужно переделывать заново.

Цена ошибки: стоимость текущего сайта + от нескольких десятков до сотен заказов в месяц, потерянных из-за низкой скорости загрузки.

И Даниил такой не один.

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

Также, выбранная CMS Joomla не подходит под интернет-магазин таких размеров, о чём Александр узнала только сейчас... Становится особенно грустно, если учесть, что запуск проекта был запланирован на ноябрь прошлого года, а сейчас уже март.

Ещё пример?

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

В итоге ему сдали сайт без настроенной аналитики. Разработчики сослались на то, что не рекламщики и понятия не имеют, что нужно предусмотреть.

Впрочем, там и без аналитики достаточно недочётов: ссылки на мессенджеры не проставлены, фавикона нет, метатеги title и description прописаны без учёта требований SEO, все поля сделаны текстом, потому что так быстрее всего собирать страницу.

Может быть, это из-за того, что одностраничный сайт зачем-то натянули на CMS Wordpress?

И такое я вижу стабильно 3-4 раза в месяц.

Давайте покажу, как должен выглядеть отчёт PageSpeed Insights здорового проекта:

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

Может, стоит уже сделать нормально и заняться ростом бизнеса, а не бесконечными правками кода?

Как делается нормальный сайт (этапы)

1. Предпроектные исследования.
На этом этапе мы поймём: кто ваша целевая аудитория (если вы думаете, что ответ "предприниматели 30-50 лет" нормальный, то вы глубоко ошибаетесь), что вы предлагаете рынку и каково ваше конкурентное окружение.

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

Вот пример страницы, сделанной без ответов на вопросы выше:

Посмотрите внимательно.

Компания занимается поставками оборудования из Европы. И нет, это - не интернет-магазин.

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

Думаю, дальше можно не продолжать, так как смысл понятен.

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

В итоге у нас будут макеты типовых страниц

И техническое задание (обычно на 6-9 страниц А4), описывающее все последующие этапы.

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

Подберём подходящее техническое решение (например, выберем CMS под ваши задачи).

Обычно этот этап занимает от 5 до 9 рабочих дней.

3. Подготовка текстов на основные страницы.

Распространено мнение, что тексты и SEO нужно начинать делать после того, как сайт готов.

Нет!

Работу с текстами нужно начинать ещё до дизайна. И вот почему ↓

В среднем, работа над многостраничным сайтом идёт 2-3 месяца. За это время можно написать от 8 маленьких до 4 больших статей и сразу после запуска начать борьбу за верхние строчки выдачи поисковых систем.

4. Дизайн.

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

5. Вёрстка.

Сверстаем дизайн-макеты так, как умеют всего пара компаний на рынке.
От качества выполнения этого этапа зависят ваши результаты по SEO, скорость загрузки и многое другое.

6. Программирование.

Напишем необходимые скрипты.
Например, для отправки формы заявки на почту.

7. Аналитика.

Подключим через Google Tag Manager всё необходимое для рекламы и продвижения: Яндекс.Метрику, Google Analytics, Яндекс.Вебмастер, Google Search Console. Настроим цели в аналитике для отслеживания конверсий.

Порядок цен

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

Лендинг, он же одностраничный сайт

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

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

О том, как выполняются работы, можно прочесть здесь.

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

Разработка займёт 5-6 недель и будет стоить 120-140 тыс. руб.

Примеры работ: https://stone-buro.ru/, https://ppc-hackers.ru/, https://petdiet-ak.webflow.io/.

Многостраничный сайт (его ещё иногда называют корпоративным)

Подойдёт бизнесу, который предоставляет несколько услуг, идеален для SEO.

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

Добавляется этап программирования, когда мы превращаем вёрстку в шаблоны страниц, управляемые CMS.

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

Вы выйдете в ТОП на 1-3 месяца раньше за счёт того, что не придётся тратить время на исправление технических ошибок после разработки и переписывание текстов под поисковые системы.

Давайте я вам покажу, как это работает

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

Знаете, что интересно?

Этот сайт никогда не оптимизировался SEO-специалистом. Он растёт сам просто потому, что качественно сделан.

Разработка займёт пару-тройку месяцев и будет стоить от 300 тыс. руб.

Примеры работ: https://www.adspyglass.com/, https://hermes-shoeshine.webflow.io/.

- Коль, мы бы очень хотели заказать такую разработку, но мы только открылись и наш оборот меньше суммы за сайт. Как нам быть?
- Не беда, мы можем просто взять шаблон дизайна (например, на themeforest.net), вставить в него другие тексты и картинки и в бюджет от 50 до 100к недели за две сделать сайт.
Если это - ваш вариант, напишите мне в ВК или Телеграм. Я рассчитаю проект.

Интернет-магазин

В большинстве случаев я рекомендую купить качественный шаблон, выкинуть из него всё лишнее и загрузить товары. Это займёт пару недель и будет стоить до 150к вместе с шаблоном, лицензией Битрикса и мелкими доработками.

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

Для наглядности покажу проект, где она оправдана.

Что нужно сделать, чтобы убедить человека купить оборудование для майнинга криптовалют? Он должен быть уверен, что окупит свои вложения.

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

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

Круто?)

Разработка займёт 3-4 месяца и будет стоить от 450 тыс. руб.

Сложный кастомный проект

Люблю такие. Если вам нужен особый личный кабинет, нужно интегрироваться с 10+ поставщиками по API или без него или сделать нечто иное, что даже оценить по стоимости и срокам тяжело, я буду рад помочь.

• выделяем разработчика или целую команду под вас, чтобы быстро завершить проект с полным погружением в бизнес-задачу;
• используем Bootstrap и другие готовые библиотеки, чтобы максимально снизить стоимость и сроки разработки.
• собираем проекты на фреймворке Laravel, что позволяет не зависеть от ограничений конкретной CMS.

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

Оффер: помогу дойти до выручки 50 000 000 руб. / год. с помощью глубокой проработки интернет-маркетинга и рекламы.

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

Диагностическая консультация (1.5-2 часа)

Продукт

1. Что вы продаёте?
2. Если продуктов несколько, то какой главный / приоритетный?
3. Какая у вас продуктовая линейка?
1. Лид магниты.
2. Трипвайеры.
3. Основные продукты.

Цели

1. Чего хотите достичь?

Конкуренты

1. Кто ваши прямые конкуренты?

Конверсия

1. Как выглядит конверсионный путь?
2. Какая конверсия на каждом шаге в среднем на проекте?
3. Есть ли отдел продаж?
4. Как выглядят посадочные страницы для трафика?
5. Есть ли сезонность в проекте?

Трафик

1. Какие источники трафика используете?
2. Какой главный источник трафика в проекте?
3. Какие таргетинги используются?
4. Какие креативы используются?
5. Какой креатив самый конверсионный?

Предпроектные исследования

1. Карта целевой аудитории (заполнение из головы).
1. Определяем сегмент: при каких обстоятельствах нужен продукт / услуга (why)?
2. Кто тот человек, кому нужен продукт / услуга (who)?
3. Чего хотят эти люди? Отдельно подсветить ТОП-8.
4. По каким критериям они выбирают поставщика продукта / услуги?
5. Какие возражения у них есть? Я не покупаю, потому что...
1. Нет денег (создание недорогого продукта)
2. Нет мотивации
3. Нет доверия к продукту
4. Нет доверия к продавцу
6. Какие страхи у них есть? Я боюсь, что после заказа...
2. Интервьюирование сегментов ЦА.
3. Анализ конкурентов и лучших кейсов.
4. Брейншторм и поиск максимального количества возможностей в нише.
5. Приоритезация идей.

Сборка проекта

1. Составление продуктовой матрицы.
2. Users Flow.
3. Определение "The Big Idea" для формулировки Core Offer через фреймворк Desire - Promise - Fulfill - Big Idea - Premise.
   Формулировка оффера в позитивном ключе (я хочу + я НЕ хочу перевести в положительную формулировку) + подтверждение технологией.
   Усиление оффера: критериально-измеримый результат + скорость достижения результата + безопасность.
   Принять решение: разрабатывать другой продут или дорабатывать текущий до MVP.
4. Разработка позиционирования.
5. Brand Wheel.
6. Контент-план.
7. Контент-мейкинг.
   Отдельно прописать скрипты отработки возражений при закрытии сделки (pros and cons, what I'm really hearing is..., apples to oranges, chunking the price, trust and story, worst case best case).
8. Сборка продажников.
9. Автоматизация и программирование.
10. Настройка трафика.

Оптимизация

1. Сплит бюджета по результатам теста и медиапланирование.
2. Оптимизация таргетинга.
3. Оптимизация креативов.
4. Оптимизация по времени суток.
5. Оптимизация по гео

Масштабирование

1. Попытка вырасти "в лоб" за счёт простого увеличения ставок и бюджета.
2. Сплит-тестирование посадочных страниц и этапов воронки.
3. Подбор команды для масштабирования в каждом источнике трафика.
4. Охват всех доступных источников трафика (контекстная реклама в Яндекс и Google, таргетированная реклама в Facebook, Instagram, Вконтакте и Одноклассниках, SEO, Youtube, тизерные сети, CPA, прайс-площадки, Авито и т.д.).

ЦА

Предприниматели, которые выросли из схем квиз + РСЯ или лендинг + директ.

Отзывы

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

Клиент попросил выполнить проект в минимально возможную стоимость, поэтому по брендингу, анализу ЦА и подготовке контента был выполнен минимальный объём работ.

Подготовительные работы

Любая работа по маркетингу начинается с брендинга.

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

Выбирали из трёх концепций. Опишу их простыми словами:

1. Мастер.
   Из поколения в поколение знания и навыки передаются от одного профессионала к другому. В мастерской вы встретите человека, который сможет решить любую вашу задачу.
2. Технологичность.
   Представьте себе высокоточное производство, где машины в цеху выполняют операции с хирургической точностью.
3. Утончённость.
   Итальянцы являются законодателями мод в работе с камнем. Всё, что они делают красиво выглядит и нравится заказчикам и дизайнерам.

Каждое слово разворачивает у вас в голове свой особенный ассоциативный ряд.

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

2 сегмента целевой аудитории

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

То есть, нам понадобится 2 формы захвата: максимально быстрый расчёт проекта и запись на замер.

Особенности ниши

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

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

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

Логотип

Старый логотип совершенно не подходил под наши задачи. Его нарисовали клиенту вместе с визиткой:

С выбранной концепцией и заполненным брифом мы пошли к дизайнеру логотипов. Получили вот такой вариант:

На всякий случай отошли от концепции и отрисовали ещё несколько вариантов:

Дизайн сайта

Как только получили логотип и определились с требованиями к сайту, отдали дизайнеру список блоков для отрисовки:

1. Шапка.
2. Первый экран с формой захвата.
3. Услуги.
4. Портфолио.
5. Преимущества.
6. Дизайнерам и архитекторам.
7. Каталог.
8. Подвал.

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

Группировка всех трёх целевых действий в левом нижнем углу — не лучшее решение. Также попробовали светлый фон:

Песочный цвет тоже не подошёл — слишком грязный.

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

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

При клике на кнопку открывается форма с минимальным количеством полей:

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

На мобильных, по возможности, лучше избавить пользователя от заполнения формы заявки, поэтому мы оставили только кнопку "Написать в WhatsApp".

В проекте были использованы крупные изображения и большое количество "воздуха" между элементами.

Каталог выполнен в виде страницы с простым фильтром слева:

После утверждения десктопной версии на 1600px сайт был отрисован для планшетов и мобильных.

Часто вижу, что широкий экран не отрисовывают, ограничиваясь версией в районе 1000px по ширине, из-за чего текст и элементы получаются мелкими, а контент сайта как будто зажат в невидимые тиски:

Каждый проект комплектуется UI-kit'ом, описывающим состояния активных элементов при наведении и нажатии.

И фавиконкой для вкладки браузера

Вёрстка сайта

Стоимость перевода трёх страниц из .psd макетов в html-код стоила как полтора лендинга под ключ на фрилансе и выполнялась несколько недель.

Почему так дорого и долго?

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

Можно полностью уничтожить красоту, если сверстать страницу с допусками от дизайна в десятки пикселей (у нас допускается расхождение с макетами всего 2-3px).

Критерии качества только вёрстки занимают в договоре 3 страницы 10 шрифтом:

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

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

Итог качественной вёрстки — хороший показатель скорости загрузки сайта по результатам теста Pagespeed Insights для проекта с таким количеством графики и настроенной аналитикой:

Можете убедиться в этом сами: https://stone-buro.ru.

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

Программирование

Так как сайт не содержит большого количества контента и страниц, он был выполнен без использования CMS.

На бэкенде был написан PHP-скрипт, отправляющий данные из формы заявки на почту клиента.

Был установлен 301 редирект с версии https://www.stone-buro.ru на https://stone-buro.ru.

Аналитика

На сайт были установлены системы аналитики Яндекс.Метрика и Google Analytics через систему управления тегами Google Tag Manager.

Для целевых действий были настроены цели:

Сайт был подключён к Яндекс.Вебмастеру и Google Search Console для дальнейших работ по продвижению в поисковых системах.

———

Если вам нужен качественный сайт, напишите мне в телеграм @nstebunoff для оценки стоимости и сроков проекта.

• Facebook, VK Feed 1920x1080 (с оформлением)
• Youtube 1920x1080 (без оформления)
• Instagram Feed 1080x920 (59 сек. максимум)
• Stories Instagram 1080x1080 (15 сек. максимум)

• На Youtube
• Подготовлена обложка 1280 x 720 (JPG, PNG, GIF, <2Mb) с лицом и текстом (использовать можно и в Telegram)
• Подготовлено описание со ссылками на страницу подписки или страницы в Telegram, VK, Fb, Insta
• Подготовлены хештеги
• Создан плейлист при необходимости
• Подготовлены временные метки при необходимости
• Для Facebook / VK
• Подготовлена обложка 1280 x 720 (JPG, PNG, GIF, <2Mb) с лицом и чёрным текстом на белом фоне
• Подготовлен текст длинного поста
• Для Insta
• Подготовлен текст длинного поста с эмодзи

• Видео размещено в VK, Fb, YT, ленте Insta и сторис Insta в разные дни
• Время постинга: VK / Fb 12:05, Insta story 18:05, Insta feed 14:05
• Длинные посты размещены в VK, Fb и ленте Insta в разные дни с нестудийным изображением.
• Время постинга: 10:05

Монетизация

Мы выполнили всю эту работу не просто так. Пришло время вернуть свои вложения.

• Настроив объявление с предложением подписаться на рассылку / получить бесплатный продукт на тех, кто просмотрел 50 или 75% видео.
• Добавив тех, кто лайкнул пост с видео, себе в друзья на Fb и в ВК (они с высокой вероятностью добавятся в ответ).

Материал подготовлен на основе выступления Peng Joon на конференции Funnel Hacking Live.

Больше полезных материалов вы сможете найти на Telegram-канале @imsecretlab

Он крайне важен и в идеале мы снимаем видео под заголовок, а не придумываем его после съёмок.

Заголовок определяет, кликнут по вашему видео, или нет.

Многие начинают с того, что пишут SEO-заголовки, позволяющие привлекать трафик из поиска Youtube даже без подписчиков на канале.

Если контент — король, заголовок — это королева.

Как его написать?

• Он должен быть простым (понятным 4 летнему ребёнку);
• Создаёт интригу и интерес;
• Заметный (например, капитализация в буквах эмоциональных слов делает его заметнее);
• Необычное сочетание слов.
  У нас возникает приятное ощущение, когда мы видим что-то необычное;
• Наличие дат в статистике поднимает просмотры на 20%.
  Источник данных неизвестен, но из личного опыта я склонен им верить.
• [Квадратные скобки] повышают просмотры на 30%.

Несколько примеров от автора на английском:

BEFORE YOU GET MARRIED...WATCH THIS
ПОСМОТРИ ЭТО ПЕРЕД ТЕМ, КАК ЖЕНИТЬСЯ

STOP wasting your life (2020)
ПРЕКРАТИ бесполезно тратить свою жизнь (2020)

Dear Future Generations: Sorry
Дорогие будущие поколения: Простите

STOP Saying "I Love You"
ПРЕКРАТИ говорить "Я люблю тебя"

Создание видео

1. Время выхода видео важно.

Перед созданием видео спросите себя:

• Какие события сейчас происходят в мире / стране, где я живу?
• Что мы будем скоро праздновать?
• Какие фильмы скоро выходят?

Думаю, направление мыслей вы поняли. Можете ли вы использовать инфоповоды в своих видео?

2. Захватите внимание в первые 5 секунд ролика.

Иначе зрители просто уйдут.

Есть множество способов это сделать, например:

• Начните видео с интригующего вопроса;
• Или увлекательного факта;
• Расскажите убедительную историю.

Посмотрите на картинку. Она привлекает внимание и сразу в голове возникает множество вопросов. Почему в здании суда растёт дерево? Зачем мужику аквариум?

И это без аудиоряда, который не отпускает с первых секунд.

Видео начинается с вопроса: вы знаете, в какой день недели у вас наибольший шанс умереть от сердечного приступа?

3. Рассказывайте истории

• Истории намного старше письменного языка.
• Наш мозг воспринимает истории лучше фактов.
• Мы неосознанно хотим услышать конец истории и дольше задерживаем на ней внимание.

Как рассказать хорошую историю?

• В ней будут эмоциональные взлёты и падения.
• Не будьте скучными)
• Используйте фоновую музыку, чтобы усилить эмоции.

4. Эмоции и тон

Задайте себе вопрос: что должны почувствовать люди, которые смотрят ваше видео? Каков будет эмоциональный заряд видео?

И попытайтесь вызвать эти эмоции в ваших роликах.

Этому поможет:

• Выбор позиции по обсуждаемому вопросу. Даже если часть аудитории отвернётся от вас;
• Говорите и действуйте эмоционально;
• Будьте настоящим, не пытайтесь кого-то скопировать.

Картинка-заставка

Заставка, как и заголовок, продумывается до съёмок)

Вот несколько пунктов, которые помогут сделать заставку более кликабельной:

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

Вот несколько примеров:

Причины, по которым люди делятся видео друг с другом

Важно понимать эти причины, чтобы ваше имело шанс стать вирусным.

• Оно необычное и крутое;
• Мы узнаём в видео себя (или знакомых) или ситуацию, в которой бывали или находимся;
• Видео про то, что объединяет группу людей по определённому признаку (например, земляков объединяет рождение в одной стране/городе);
• Затрагивает то, что вам нравится или одну из ваших болей.

Материал подготовлен на основе выступления Prince EA на конференции Funnel Hacking Live.

Больше полезных материалов вы сможете найти на Telegram-канале @imsecretlab

Включаем Расширенный поиск совпадений (Advanced Matching Method)

Чем больше информации вы передаёте в пиксель, тем быстрее обучаются ваши рекламные кампании, тем быстрее набирается аудитория для ремаркетинга и тем больше прибыли вы получаете в итоге.

По умолчанию он отключён.
Включить можно в настройках Events Manager 👇

Перед тем, как перейти к желанной кампании с оптимизацией на конверсии, сначала создаём кампанию с целью "Трафик"

Чтобы получить аудиторию, на которой пиксель обучится. В противном случае вам нужно будет со старта иметь много конверсий каждый день для быстрого обучения алгоритмов.

Не запускайте Facebook сразу

Обучите сначала пиксель на заинтересованной аудитории из поиска Яндекс и Google. Так вы построите чёткий профиль конверсионной аудитории ещё до запуска Facebook Ads.

Если покупок на сайте кот наплакал, настройте микроконверсии.

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

Больше полезной информации можно найти в Телеграм-канале @imsecretlab

Более продвинутые техники
10. Создайте sitemap для изображений
11. Используйте SVG для логотипа и иконок
12. Используйте srcset, загружая разные размеры изображения, в зависимости от размера экрана
13. Используйте отложенную загрузку изображений, находящихся не на первом экране
14. Добавьте к изображениям кнопки расшаривания в соцсетях
15. Настройте клиентское кеширование изображений с помощью специальных плагинов
16. Использйте CDN
17. Настройте теги Open Graph и Twitter Cards
18. Используйте микроразметку

Источник на английском.

Телеграм-канал @imsecretlab, где ты найдёшь ещё больше полезной информации.