Главное Авторские колонки Вакансии Образование
Выбор редакции:
2 144 11 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Каждая секунда на счету. Как увеличить скорость сайта?

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

Все чаще я начинаю грешить на свой уже видавший виды Macbook, особенно ему достается в тот момент, когда я пытаюсь открыть все необходимые сайты, а он всячески показывает мне свою лень. Столкнувшись с данной проблемой я увидел статью в Интернет о том, что дело может быть совсем не в нем и ругать надо скорость работы сайта, про которую забыли разработчики, наполнив его всяческими виджетами и медиафайлами размером с полный винчестер компьютеров 90-х годов прошлого века.

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

Теория и Практика

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

Предлагаю вам сразу же погрузиться в практику и провести тест скорость сайта на собственном примере. Для этого я советую использовать сервис Webpagetest.com и более простой Page Speed Insight от Google. Причем я пользуюсь сразу двумя, одни показывает подробную информацию, второй подсказывает, что с ней делать на первом же этапе. Также есть множество других сервисов: GTMetrix.com, Sitespeed.ru, Webo.in и другие. Выбирайте тот, что удобнее вам.

Page-speed.png

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

Скорость работы сайта - из чего она состоит?

Итак, для начала вспомним, что сайт наш хранится не просто где-то, а во вполне четком пространстве под названием Сервер, и весь процесс загрузки сайта начинается поиска этого сервера через ваш адрес (домен). Сервер с вашим сайтом привязан физически к какому-либо географическому месту, поэтому скорость обращения к нему тоже разная. Например, если ваш посетитель в Москве и сервер находится также в Москве, то скорость эта будет измеряться в сотых долях секунды, но если сервер будет находиться, например, в Америке, то на этот путь запросу понадобиться порядка 1/6 секунды, а ведь есть еще и путь обратно - то есть на эти потери уйдет уже 1/3 секунды. Казалось бы это не много...

НО! Счет здесь идет не на секунды, а на мили секунды, Wall-Mart проводил исследование, в котором они получили следующий вывод - если время появления страницы (первой информации на ней) больше 3 секунд, то такой сайт может терять до 40% конверсии в зависимости от ниши и конкурентности в ней. То есть, если у вас скорость работы сайта 15 секунд и имеет порядка 5% конверсии, то ускорив его до 3 секунд, вы теоретически можете получить до 8,3% конверсии. Если вы знаете как работает воронка продаж, то можете оценить потери.

Правило 1

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

Правило 2

Домен лучше тоже использовать российский, так как это незначительно, но может повлиять на время отклика.

Этап второй - процессы загрузки сайта

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

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

Для себя мы учли это, но решили руками не переписывать скрипты и воспользовались сжатием и кэшированием данных. Не буду описывать технически как это происходит, так как боюсь специалисты этого не оценят. Для этого на WP есть необходимые плагины, самые популярные это W3 Total Cache и WP Super Cache. В Интернете достаточно много описаний о них и настройках поэтому мы не будем останавливаться на этом, если возникнут вопросы можете использовать комментарии - постараюсь на них ответить. Могу сказать одно - использование данных плагинов позволило нам увеличить скорость сайта более чем в 2 раза.

1373561798_4hxvdlpjn7m.jpg

Может быть дело именно в них

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

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

Как правило при использовании графической информации пользователи часто не утруждаются вопросом размеров картинок. Поэтому у вас на сайте фаил может быть шириной 2560 пикселей, а отображаться в окне размером в 300 пикселей. Это значит, что весь фаил можно сжать почти в 10 раз, а также каждый такой фаил еще можно провести через оптимизатор, сжав его фактический размер не влияя на качество изображения. Подобные действия могут обеспечить вам до 30-50% сжатия размера самого сайта, а это в свою очередь положительно отразиться на скорости работы сайта.

Наш пример

Конечно, мы также проверили наши сайты, честно сказать по некоторым получили результаты, которые не могли нас порадовать. Сейчас мы запустили в тест страницу подписки на нашу базу знаний - http://umagency.ru/subscribe.html. Начальный результат был 7,538 секунд в полную загрузку страницы и 4,802 секунд до начала показа (старта рендера). Внизу вы можете оценить скриншоты по аналитике скорости работы сайта с начальными значениями.

Snimok-e`krana-2015-03-17-v-18.17.49.png

Snimok-e`krana-2015-03-17-v-18.17.58.png

После оптимизации мы получили результат загрузки сайта за 4,159 секунды, а начало формирования страницы всего 2,505 секунд. Мы знаем, что это не предел, но на данный момент такой показатель нас устраивает.

Snimok-e`krana-2015-03-17-v-18.18.28.png

Snimok-e`krana-2015-03-17-v-18.18.42.png

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

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

Что это может дать вашему сайту?

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

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

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

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

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Jury Gerasimov
"Домен лучше тоже использовать российский, так как это незначительно, но может повлиять на время отклика." Бугагашеньки.
Ответить
UMAgency
Интернет-маркетинговое агентство
Дмитрий Медведский
Я так понимаю, это означало крайнее не согласие с тезисом?))
Ответить
Jury Gerasimov
Если сможете его хоть как-то подтвердить, заберу свои слова обратно. Пока что Бугага.
Ответить
UMAgency
Интернет-маркетинговое агентство
Дмитрий Медведский
Подтверждаю тем, что на одном и том же хостинге у меня лежит два сайта и время First Byte у того, который COM 0,317, а у RU 0,150. Сайты сами имеют один и тот же движок и схожую архитектуру и дизайн.
Ответить
UMAgency
Интернет-маркетинговое агентство
Дмитрий Медведский
Еще раз напишу, что профессионалом в техническом вопросе не являюсь, а пишу исключительно о своих наблюдениях. Если расскажите свою точку зрению с описанием процесса, буду только рад)
Ответить
Prodai.ru
Торговая площадка - нового поколения!
Воробьев Валерий
Гугл Page Speed чего то вашу главную страницу не любит…. Сами же подсказали чем проверять…
Ответить
UMAgency
Интернет-маркетинговое агентство
Дмитрий Медведский
какую именно тестировали? У меня 82/100 получилось
Ответить
Prodai.ru
Торговая площадка - нового поколения!
Воробьев Валерий
Главную вашу.
Для мобильных: 28/100
Для компьютеров: 36/100
Ответить
UMAgency
Интернет-маркетинговое агентство
Дмитрий Медведский
Главная да, пала после редизайна под нагрузкой анимации - она будет переделываться, сейчас мы работаем над другой схемой, поэтому она скорее презентационная страница
Ответить
Grigory 215
с анимацией всё хорошо.
Браузер делает ~300 запросов и выкачивает 7.5Мб ради одностраничника.
— склейте css;
— склейте js;
— склейте иконки;
— изображения клиентов — в конском размере(одна из них 1.2Мб(WTF?!)), на самой странице не нашёл, где они в таком размере используются, в баннере о клиентах маленькие превьюшки — порезать, как раз то, что вы писали в статье;
— на сервере включить gzip для сжатия;
— на сервере прописать правильные заголовки для кэширования статики;
— грузить сначала css, а js по максимуму после всего(перед закрывающим body), по крайней мере точно после всего css. И всё у вас станет хорошо и по баллам и вообще.

Ещё неплохо убрать опечатку(ошибку) в js которая может что-то рушить.
Если включить телепата — либо вы используете cms(для одностраничника?), либо выложили dev версию, либо стоит поговорить с вашим фронтэндером, т.к. По коду очень много "любопытных" моментов, современные браузеры их вроде как проглатывают, однако.

Если можете ответить было бы здорово — зачем блокировать правую клавишу мыши? Тот же email некоторые пользователи вставляют через правую клавишу.
Ответить
UMAgency
Интернет-маркетинговое агентство
Дмитрий Медведский
Спасибо, за развернутый обзор по нашей странице) Очень круто, добавлю к своим замечаниям при переделке.

Про правую кнопку мыши думаю, что это из методов борьбы с копированием текста и содержимого — лентяи не будут заморачиваться получив отказ по правой кнопке, а таких большинство. Думаю, что расклад такой)
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.