Доброго времени суток! Пришла идея написать полезный пост, за ускорение загрузки лендосов/прокладок или любых страниц, на которые вы планируете заливать трафик. Я думаю все в курсе, что чем быстрей загрузится страница — тем быстрей пользователь сделает действие. Предлагаю взять за пример готовую прокладку под онлайн игру, исходник вы можете скачать в этом посте.
Лично моё мнение такое, если вы задумали заливать сливать трафик на прокладку, первым делом нужно повысить скорость загрузки этой страницы, что бы все быстро загружалось и моментально отображалось на дисплее любого пользователя, который находится на вашей страничке.
Если посмотреть на техническую сторону, того как реализована реализация быстрой загрузки страницы, там будет 3 кита на котором все держится. Первый — это картинки, а точнее оптимизация их веса, второй — это css-стили, нужно их оптимизировать, третий — это js-скрипты, там тоже можно поиграть с настройками. В дополнение можно еще настроить хостинг, на котором все это будет работать еще быстрее. Потому предлагаю перейти от слов к делу.
В разборе будет сегодня прокладка под онлайн игру «Nextrp», скачать или посмотреть на исходник вы можете по ссылке выше. Но сейчас предлагаю глянуть визуально и посмотреть на технические параметры, для точки старта и перейти к делу. Вот как выглядит прокладка:
Изначально она адаптивная, но предлагаю посмотреть на файлы и какой вес у неё в итоге. Это важно для замера параметров до и после ускорения. Вот что у нас по файлам:
Как видим общий вес нашей прокладки 4.45 мб. От этой точки буду отталкиваться и постараюсь снизить вес и оптимизировать содержимое. С техническими параметрами мы разобрались, предлагаю перейти к делу. Загружаю прокладку на свой хостинг и делаю замер скорости с помощью одного толкового сервиса под названием «Website Speed Test», это мне нужно для сбора исходных данных по скорости загрузки нашей прокладки. Вот что получилось:
Видим что загрузка страницы получилась 0.2 секунды. Хотя я использую под бурж гео расположение данных в Швейцарии, а данные теста проводился из сервера в Париже, там расстояние не большое, чисто теоретически, потому и такая скорость загрузки, меньше 1 секунды. Еще важный момент — нужно использовать хостинг для ваших прокладок, максимально близко к вашей ЦА, что бы была минимальная задержка в пинге, в общем вы мою мысль поняли. Дальше по весу страницы, она сейчас весит 1,1 мб. Данные сохраняю, перехожу к делу.
Шаг 1 — Оптимизация картинок. Наша цель на этом шаге, оптимизировать все картинки которые используются для вывода на экран пользователя. Для этого нам нужно зайти в папку с названием «images» и оптимизировать все картинки которые там находятся. Самый простой и действенный способ, это воспользоваться сервисом «TinyPNG». Как говорят старый конь борозды не испортит, потому мы не будем изобретать велосипед, качать разный софт и крутить в нем настройки, а просто забросим картинку туда на обработку и получим на выходе готовый результат. Что я и сделаю. Забрасываю на этот сервис все картинки из папки «images», жду когда он их обработает и скачиваю их обратно, уже готовые.
Как видим там картинок было всего 2, но посмотрите что произошло, мы снизили вес на 40% без потери качества. За что я и полюбил этот сервис, годный все таки этот инструмент. Дальше скачиваю и копирую в папку уже готовые картинки. С этим шагом закончили, перехожу к другому.
Шаг 2 — оптимизация стилей CSS. Можно много говорить об этом, но существует 3 пути как решить этот вопрос. Первый, это использовать сервис по оптимизации, к примеру «CSS Optimizer», второй — используем сжатие данных, к примеру через сервис «CSS Minifier», ну и третий вариант, это оптимизируем работу скриптов на стороне сервера. В нашем случаи с файлами стилей все хорошо, время загрузки страницы в приделах 1 секунды. Это отличный результат.
Шаг 3 — оптимизация скриптов JS. Этот шаг делать не обязательно, но если нужно еще снизить время загрузки страницы, тогда уже переходите к нему. Есть крутой сервис, часто использую его в работе, потому рекомендую «Optimize-JS Tool». Он прост и удобен, вставляем код, кликаем на кнопку и получаем уже готовый результат. Забрасываем путем замены на ваш хостинг и радуемся результату.
Вот мы и прошли 3 шага, оптимизировав таким образом наш лендинг. Предлагаю сделать повторный замер скорости и посмотреть на результаты.
Как видим существенно повлияло то что мы оптимизировали картинки, потому как вес страницы получился из 1.1 мб - 700кб, тех самых 40% о которых говорил нам сервис. Вот такой пост получился, у нас получилось снизить вес страницы на 40%. Но тот факт, что расположение сервера с нашей прокладкой получилось близко к проверочному серверу, скорость загрузки в обоих случаях не изменилась. Ну это понятно с технической стороны, потому если загрузка страницы происходит в пределах 1 секунды, все нормально, можно заливать смело трафик. Еще хочу подвести итоги и добавить пару слов об «CloudFlare».
Итог
Если вам скажут, что под бурж легче и проще использовать «CloudFlare» и нет смысла использовать бурж хостинг или облачные сервера ближе к вашей ЦА — можете смело слать таких людей куда подальше в лес. Поясню, во-первых — используя CloudFlare вы будете терять трафик, во вторых — все что бесплатно, потом вылазит боком. Возьмите под бурж тот же диджиталоушен за 5-10 баксов в мес и загружайте туда свои проклы/лендосы/прокладки и забудьте об ускорении и оптимизации. Это самый верный путь, когда вам нужно пойти в бурж со своими проклами.
На связи Арбихелпер, и помните, нестандартные решения, приносят максимум профита. Но не теряйте голову, включайте холодный подход к задаче и реинвестируйте. Время понтов прошло, мир уже не будет прежний. Думайте и действуйте господа!
