Все без исключения владельцы интернет-ресурсов мечтают о большой посещаемости и успешной монетизации своих проектов. Однако удается это, к сожалению, не всем.
- Хотите попасть в число избранных и достичь поставленных целей?
- В таком случае придется позаботиться о многих нюансах: не только разработать концепцию, выбрать подходящий дизайн, разместить полезный контент, но и увеличить скорость загрузки сайта.
- Быстродействие сайта — один из важных показателей, который положительно влияет на ранжирование в поисковых системах и конверсию.
Например, каждая дополнительная секунда загрузки грозит бизнесу потерей 7% целевых действий! Данные анализа Amazon.
Чем плох медленный сайт? Он не просто раздражает, а еще и приводит к серьезным проблемам в решении ежедневных задач. Проблемы с отрисовкой страницы спустя 10 секунд после клика — это сигнал о поломке, который приводит к уходу пользователя, снижению продаж и ухудшению поведенческих факторов.
Существует еще и техническая сторона вопроса. Если вы упустите из внимания столь важный показатель как скорость загрузки, это приведет к увеличению необходимого объема ресурсов хостинга и, соответственно, к дополнительным затратам. То есть работа над улучшением производительности оправдана как с экономической, так и с технической точки зрения.
В этой статье вы узнаете, как повысить скорость загрузки сайта на любом движке с помощью самых эффективных способов.
Какой должно быть время загрузки?
Пользователи не любят ждать: чем медленнее работает портал, тем ниже их лояльность. Поэтому в ваших интересах разогнать сайт до скорости гепарда:).
И все-таки, на какие показатели стоит ориентироваться?
- 1 секунда — отличный, но труднодостижимый результат.
- 2–3 секунды — стандартное время отклика большинства успешных ресурсов.
- 3–5 секунд — маленькая, но для некоторых проектов терпимая скорость;
- 6–10 секунд — столь низкий показатель негативно влияет на продвижение;
- от 11 секунд — плачевный результат, при котором надо срочно ускорять сайт.
Внимание! Выше представлены обобщенные данные. Идеальные для каждого конкретного случая цифры зависят от местоположения, функционала, объема и типа сайта.
В определенных нишах вполне нормально, если страницы загружаются по 5–6 секунд. Так, широко известная компания OZON не может похвастаться быстродействием интернет-магазина, но это не мешает ей иметь высокую конверсию.
- Будет полезно!
- Читайте наш мега гайд о продвижении интернет-магазинов в любой тематике.
Как увеличить скорость загрузки сайта: 8 практических советов
Мы живем в эпоху высоких скоростей. Это справедливо по отношению ко всему и потреблению информации, в том числе. Скорость загрузки любого сайта или web-сервиса имеет очень важное значение.
Когда ваш сайт загружается медленно, проблем с пользовательским опытом и конверсиям не избежать, и также с большой вероятностью это негативно повлияет и на его позиции в поиске. Человек, который перешел на страницу с выдачи, скорее вернется назад к поиску и успеет найти другой сайт, пока будет ждать окончания загрузки.
Однако причины, по которым сайт медленно работает, в большинстве случаев одни и те же. Соответственно, есть проверенные способы увеличить скорость загрузки сайта, реализация которых на практике позволит исправить проблему.
Давайте рассмотрим их подробнее.
1. Оптимизируйте загрузку скриптов и CSS-стилей
JavaScript/jQuery используются практически на любом современном сайте, так как с их помощью удобно реализовать интерактивные элементы и динамический контент.
Но когда браузер загружает страницу для отображения в ответ на запрос пользователя, он должен полностью загрузить все такие скрипты, что может замедлять работу, если их слишком много или они неправильно реализованы (render-blocking Java Script).
Есть несколько вариантов решения:
- использование встроенного кода Java Script, вместо подключения внешних файлов;
- асинхронная загрузка (скрипты загружаются отдельно от остальной части страницы);
- отложенная загрузка до того момента, пока большая часть страницы не видна пользователю.
Аналогичная ситуация и с CSS-стилями, решается задача похожим образом: использование встроенных стилей вместо множества внешних файлов, и объединение нескольких файлов в один.
2. Используйте сеть CDN
CDN является аббревиатурой от слов Content Delivery Network (сеть доставки контента). Суть технологии в том, что в стратегически важных географических точках мира располагаются серверы, на которых создается копия страниц сайта. В результате при переходе на сайт, пользователю показываются данные с ближайшего сервера, что ускоряет загрузку.
Одним из наиболее известных поставщиков такой услуги является Cloudflare. Тарифы стартуют от 5 долларов, в зависимости от поставщика.
Если большая часть переходов на сайт осуществляется пользователями одной или нескольких граничащих друг с другом стран – данный пункт можно назвать неактуальным. Но если ресурс ориентирован на глобальный рынок, CDN может помочь в оптимизации скорости работы.
3. Включите кэширование сайта
Польза от кэширования особенно заметна при большом трафике или работе на базе требовательной к ресурсам CMS. Включать его нужно как на стороне сервера, так и для браузера.
Если сайт работает на популярном движке, например WordPress, можно найти множество бесплатных и платных решений для управления кэшированием. Достаточно потратить вечер на просмотр обзоров и вопрос будет закрыт.
При использовании самописного движка или непопулярной CMS, у которых адекватные модули отсутствуют, лучше обратиться за услугой настройки к специалистам.
4. Оптимизируйте размер изображений
Большой объем неоптимизированных изображений как правило является основной причиной медленной загрузки страниц сайта. Одна и та же картинка может весить как 300 килобайт, так и 130, причем визуально пользователь не заметит разницы. А теперь представьте себе, что таких картинок на сайте десятки, сотни и даже тысячи.
Самый простой совет как повысить скорость загрузки: уменьшать размер изображения до ширины колонки с контентом. Например, если ширина колонки статьи 800 пикселей, то нет смысла загружать иллюстрации с 2000 пикселей по ширине. Особенно с учетом того, что существенная часть аудитории сейчас просматривает сайты с мобильных.
Также можно обрабатывать изображения при помощи графических редакторов или специальных онлайн-сервисов для оптимизации, таких как Iloveimg.com или TinyPNG.com.
5. Проведите ревизию плагинов и компонентов
Для каждого популярного движка существует множество плагинов, модулей и прочих компонентов, как от сторонних разработчиков, так и от создателей самой системы. Если вы работаете с тем же WordPress, у вас наверняка установлено несколько подобных дополнений, а иногда на сайте их используются десятки.
Каждый из них содержит свои собственные CSS и JavaScript, делает отдельные запросы к файлам и базе данных. Соответственно, чем больше плагинов вы используете, тем больше это может замедлять работу сайта.
Вариантов решения проблемы несколько:
- провести ревизию используемых компонентов и оставить только те из них, которые действительно необходимы;
- реализовать часть функционала, который достигается за счет плагинов, прямо в самом шаблоне.
Второй вариант может потребовать определенных разовых затрат, но в будущем все равно окупиться.
6. Оптимизируйте базу данных и код
Загрузка скриптов, файлов стилей и других элементов происходит через запросы к серверу или базе данных. Чем больше таких запросов и перенаправлений, тем больше времени потребуется для полной загрузки страницы. GTmetrix.com отображает это значение по результатам проверки:
Решение проблемы достигается за счет уже упомянутых рекомендаций по объединению файлов стилей и скриптов, а также уменьшению количества запросов к базам данных и повышению качества кода в целом.
В техническом плане это одна из наиболее сложных работ, поэтому услугу аудита и оптимизации стоит заказывать на стороне. Но опытный специалист без проблем справится с такой задачей, особенно если специализируется на работе с используемым вами движком.
7. Проанализируйте дизайн и компоновку страниц
Один из неочевидных моментов – структура самых страниц. Если они перегружены контентом, даже при хорошей оптимизации тех.части, это все равно будет серьезно замедлять загрузку.
Несколько примеров из практики:
- лендинги на 5-6 экранов, перегруженные графикой и прочими элементами;
- завешанная графическими баннерами страница СМИ;
- результаты поиска или сортировки фильтрами без ограничения по количеству элементов;
- посадочные страницы услуг, на которых попытались внедрить все 100500 советов по оптимизации конверсии и т. д.
Толку с такой красоты и «информативности» будет мало, если посетитель просто не дождется ее загрузки.
8. Проверьте производительность сервера и движка
10 способов ускорить загрузку вашего сайта
Существует множество причин, почему у пользователей может медленно загружаться сайт. Следуя лучшим практикам, можно, по крайней мере, смягчить проблему, убедившись, что мы сделали всё возможное.
1. Используйте CDN
CDN (Content Delivery Network) – географически распределённая сетевая инфраструктура, которая оптимизирует доставку контента конечным пользователям, давая доступ к сотням серверов по всему миру, размещающих копию
вашего сайта.
Если вы уже используете CDN, проверьте,
правильно ли вы настроили кэширование. Проблемы с кэшем могут привести к тому,
что CDN будет запрашивать ресурс у вашего сервера, а это противоречит
цели использования этой инфраструктуры.
2. Включите gzip-сжатие
В некоторых CDN gzip-сжатие можно включить флажком Enable
compression. Сжатие файлов обеспечит более быструю загрузку контента пользователями сайта.
3. Используйте оптимизацию изображений
Уменьшайте все изображения, которые не потеряют в качестве и не будут масштабироваться
Распространённая причина долгой загрузки страниц – избыточное качество изображений или выбор неподходящего формата. Можно уменьшить количество пикселей по каждой из сторон и применить сжатие изображений. Прогресс не стоит на месте – обратите внимание на формат сжатия изображений WebP.
Если у вас сайт на WordPress, можно использовать плагины, которые уменьшат размер автоматически в процессе загрузки.
4. Уменьшите количество
запросов, совершаемых страницей
Сократите число запросов, необходимых для загрузки верхней части страницы. Есть два способа:
- уменьшить количество запросов, удалив то, что не влияет на работу сайта;
- отложить загрузку низкоприоритетного контента, используя функцию ленивой загрузки.
5. Избегайте
перенаправлений
Редиректы значительно
замедляют работу сайта. Чтобы не держать специальный поддомен для
мобильных пользователей, используйте адаптивный CSS.
Некоторые редиректы
неизбежны, например, www -> root domain или root domain -> www, но
основная часть трафика не должна поступать через перенаправления.
6. Сократите время до первого байта
Время до первого байта (TTFB) –
это время, которое браузер тратит на ожидание данных с сервера после отправки запроса на ресурс.
На этот показатель влияют два параметра:
- Время, потраченное на сервере.
- Время, потраченное на отправку данных.
Первый параметр можно уменьшить, оптимизировав работу на стороне сервера: запросы к базам данных, вызовы API, балансировку нагрузки и т. д..
О втором параметре мы уже поговорили – на него мы можем повлиять, используя CDN.
7. Решите вопрос блокировки рендеринга JavaScript
Внешние скрипты часто блокируют загрузку страницы до
тех пор, пока не выполнятся сами. Этот эффект можно смягчить, пометив внешние скрипты директивой async:
Можно отложить
загрузку сценариев до тех пор, пока пользователь не начнёт совершать
активные действия:
window.addEventListener(
'scroll',
() =>
setTimeout(() => {
//insert marketing snippets here
}, 1000),
{ once: true }
);
8. Минимизируйте CSS и JavaScript
Минимизация подразумевает
использование инструментов для удаления пробелов, символов перевода строки и
сокращения длины имён переменных. Как правило, это делается автоматически в рамках
процесса сборки. Есть специальные инструменты: например, UglifyJS для JavaScript или cssnano для CSS.
9. Удалите
неиспользуемый код CSS и JavaScript
Чем больше проект, тем больше вероятность, что какой-то код стал неактуальным. И лучший способ его минимизировать и сократить время загрузки – просто удалить ненужный код.
Начиная с Chrome 59, в Chrome DevTools
можно анализировать использование JavaScript и CSS. Для этого откройте DevTools, перейдите во вкладку Console, нажмите на три точки и
откройте Coverage. При нажатии кнопки со значком перезагрузки будет проведен аудит использования CSS и JavaScript. Помеченные красным блоки кода загружаются, но не используются.
Аудит использования CSS и JS
10. Регулярно
отслеживайте скорость загрузки сайта
Если вы возьмете за
правило обращать внимание на проверку скорости загрузки, это станет гораздо меньшей проблемой.
Способы ускорения загрузки страниц сайта ????
21 февраля 2019
3 060
11
Время чтения ≈ 9 минут
Сделать свой сайт быстрым – актуальная задача для любого владельца ресурса или вебмастера. Ведь скорость загрузки станиц входит в число важнейших факторов успешности веб-ресурса, наряду с качественным контентом и красивым графическим оформлением.
Медленная загрузка увеличивает вероятность потери пользователей в разы. Особенно, когда посетители заходят с мобильных устройств. Свести к минимуму вероятность потери трафика помогут простые рекомендации по ускорению загрузки сайта, которые сможет внедрить на практике даже неопытный пользователь.
Статистика проводит прямую связь между скоростью выдачи информации и поведением пользователей.
1. Оптимизируйте HTML-код и CSS-, JS-файлы
Оптимизация загрузки невозможна без заботы о «чистоте» кода, передающегося браузеру пользователя при заходе на сайт. Большое число символов в исходном коде заметно влияет на скорость загрузки, поэтому его краткость является важным фактором успеха.
Как минимизировать код для ускорения загрузки сайта
- Удалить лишние символы, элементы разметки и теги исходного кода. Автоматизировать процесс поможет добавление небольшой вставки в начало и конец HTML-кода сайта.
Такой метод буферизации HTML-контента достаточно эффективен, но может создать дополнительную нагрузку на оперативную память.
- Сгруппировать однотипные CSS-файлы и JS-файлы. Объединить элементы помогут бесплатные PHP-приложения, вроде JCH Optimize, Cloudflare или Minify, которые копируются в отдельную директорию и пропускают через себя все файлы сайта.
2. Уберите лишние HTTP-запросы
Выгрузка элементов страницы (JavaScript, изображений, CSS- и флеш-файлов) занимает львиную долю ресурсов системы при загрузке сайта. HTTP-запросы к таким элементам заметно тормозят работу сайта.
Чтобы избежать «лишних» запросов, нужно сократить число компонентов страницы. Это повлечет пропорциональное уменьшение обращений к серверу и позволит ускорить загрузку сайта.
Сделать это можно несколькими способами:
- Комбинировать нескольких изображений в один графический файл (CSS-спрайт);
- Использовать встроенные изображения (Inline-картинки) в таблице стилей страницы;
- Несколько CSS-файлов или скриптов на одной странице объединить в один файл;
- Минимизировать число скриптов и плагинов.
3. Расположите JavaScript и CSS в нужном порядке
Рекомендуется располагать CSS-файлы вверху кода страницы, а JavaScript внизу. После подобной оптимизации, сначала будет загружаться статичный контент, а потом лишь динамическая графика.
Флеш-элементы или анимация, требующие больше ресурсов для загрузки, не будет «вырываться» вперёд и портить впечатление о сайте с первых секунд. Это обеспечит плавную загрузку контента и повысит эстетическую привлекательность ресурса.
4. Уменьшите число внешних скриптов
Внешние скрипты – это куски кода (сценарии), которые задействуются по внешней ссылке. Ссылки создают дополнительные запросы к множеству разных серверов, что в итоге замедляет работу сайта. Чтобы избежать этого, рекомендуется пользоваться преимущественно локальными скриптами, встроенными в структуру исходного кода страницы.
Конечно, упор на локальные скрипты создаст определённые ограничения во внешнем виде и функциональности сайта. Но полученное преимущество в скорости загрузки стоит этих «жертв».
5. Задействуйте функцию flush
Этот PHP-функционал позволяет не ждать, пока сервер пользователя загрузит информацию с ресурса, а выводить её по частям. Пока данные передаются в браузер, открытое окно не останется пустым, а плавно наполняется подгружаемыми элементами сайта. Такое ускорение особенно необходимо веб-ресурсам со сложным интерфейсом и большой посещаемостью.
Размещать функцию flush лучше в начале исходного кода страницы, сразу за head. Из заголовка HTML-контент будет открываться быстрее, к тому же так можно включить параллельную загрузку элементов CSS и JavaScript.
6. Кэшируйте страницы
Кеширование сохраняет часть информации со страниц сайта (флеш, графику, JavaScript и CSS) в браузер пользователя. При следующем заходе эти файлы мгновенно загружаются из браузера, давая сайту дополнительную скорость.
Подключить кэширование можно путём добавления в HTML-код заголовка expires. Сайты на WordPress легко кэшируются с помощью установки плагинов с бесплатным или частично бесплатным функционалом, вроде W3 Total Cache, Cache Enabler или Zen Cach.
Для новых сайтов кэширование лучше применять только после полной готовности к запуску. Если включить функцию во время разработки, вносимые дальше изменения могут неправильно отображаться на сайте.
7. Пользуйтесь CDN
Сеть доставки контента (Content Delivery Network) – цепочка серверов, разбросанных в дата-центрах по всему миру с целью увеличения скорости передачи контента ресурса посетителям. Чем ближе посетитель находится географически от CDN-серверов, тем быстрее передаются пакеты данных с сайта.
Сеть доставки и дистрибуции контента делает информацию доступнее для людей по всему миру
Использование CDN особенно актуально для контентных и высоконагруженных порталов, чья основная аудитория сильно удалена от физических серверов. Этот сервис минимизирует время ожидания загрузки с заграничных сайтов, способствуя повышению их рейтинга в локальной поисковой выдаче. Ведь контент загружается с ближайшего к пользователю серверного хранилища в его стране.
Популярные сети доставки контента (CDN)
8. Оптимизируйте графику и видео
Необходимо выбрать правильный формат графики и видео, так как формат файла напрямую влияет на скорость подачи информации посетителям.
Рекомендуемые форматы под разный веб-контент
- SVG – для векторных логотипов и несложных элементов интерфейса;
- PNG – для схем и не векторных логотипов;
- JPG – для фото и изображений;
- MPEG4 – для видео и анимации.
Также для видео и анимации доступен еще относительно новый формат WEBM.
В большинстве случаев он обеспечивает меньший размер видео при аналогичном качестве. Однако, формат имеет ограниченную поддержку браузерами (например, нет поддержки в браузере MacOS/iOS Safari). Поэтому рекомендуется приоритетным источником видео использовать файл в формате WEBM, а альтернативным – установить MPEG4.
Также можно использовать только MPEG4, если совместно использование недопустимо или неудобно.
Отдельно отметим, что векторный формат (SVG) позволяет осуществлять масштабирование без потерь качества графики.
Этапы оптимизации изображений
Шаг 1 – Уменьшение размера изображения.
Во многих популярных CMS, таких как WordPress или Joomla есть встроенные плагины для оптимизации изображений из оригинала. Но такой способ создаёт дополнительную нагрузку и может замедлить сайт. При каждой загрузке страницы браузер сперва обращается к исходнику, а только затем меняет размеры изображения «на лету».
Избежать потерь скорости при загрузке изображений помогут встроенные в ОС графические редакторы, вроде Preview (Mac) или Microsoft Paint (Windows), а также онлайн-сервисы с похожим функционалом. Для работы с ними потребуются минимальные навыки работы с графикой.
Шаг 2 – Сжатие файла перед загрузкой.
Даже после оптимизации размеров изображения, его «вес» обычно ещё далёк от оптимального. Уменьшить размер без потери качества картинки помогают такие удобные и бесплатные сервисы, как ImageResize или TinyPNG. Большинство процессов здесь автоматизировано. Пользователю нужно только залить файлы и скачать уже ужатые до оптимального размера изображения.
9. Примените Gzip-сжатие файлов
Gzip-сжатие файлов, производится для того, чтобы уменьшить количество запросов на сервер с браузера. Проще говоря, эта технология уменьшает исходный вес файлов до 70% для ускорения загрузки.
Способы внедрения Gzip-сжатия
- Добавить следующий фрагмент кода в конфигурационный файл веб-сервера «.htaccess».
# Включаем сжатие для текстовых, HTML, Javascript, css и xml файлов:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript - Добавить следующий отрывок кода в начало HTML- или PHP-страницы. Он проверяет поддерживается ли gzip-сжатие файлов браузером. Если поддерживается – использует его.
- Инсталлировать на сайт Gzip-плагин. Например, W3 Total Cache для сайтов на WordPress.
10. Сменить хостинг
Самый радикальный метод ускорения загрузки – смена хостинг-провайдера. Экономия на размещении ресурса часто приводит к значительному ухудшению качества услуг, что подрывает все попытки ускорить сайт на корню.
Если манипуляции с контентом, кодом и плагинами не приносят результата, самое время задуматься о выборе более достойного «дома» для сайта. На качественном хостинге с высокой отказоустойчивостью и заботливой технической поддержкой интернет-ресурс получит мощный импульс для увеличения скорости работы. А это обязательно оценит благодарная аудитория.
Вывод
Нельзя игнорировать такой показатель как скорость загрузки сайта. Именно он с первых секунд создаёт комфортную среду для посетителей. Чем быстрее пользователь получит искомый контент, тем больше вероятность, что будет сформирован позитивный образ ресурса и построена лояльность к нему.
Ищите надёжную площадку для размещения сайта? Веб-хостинг от Eternalhost – надёжный фундамент, который обеспечит быструю и бесперебойную работу интернет-ресурса!
В этой статье мы перечислили основные способы ускорения сайта. Но есть ещё много интересных и творческих идей по оптимизации данного процесса. А как вы добиваетесь ускорения загрузки? Пожалуйста, поделитесь опытом в х!
Как заставить сайт грузиться быстрее
vlada_maestro / shutterstock
Прошли времена, когда нужно было ждать несколько минут, чтобы открыть страницу без картинок. Сейчас большинство пользователей закроет сайт, если он не загружается уже дольше трёх секунд.
Мы подготовили несколько рекомендаций, которые помогут ускорить загрузку сайта.
Не обязательно загружать изображения в FullHD, чтобы сайт смотрелся красиво. В большинстве случаев можно сжать картинку без заметной для глаза потери качества.
Сложно заметить разницу между двумя частями этого изображения, поэтому не стоит загружать на сайт картинки в полном размере.
Изображения в GIF или JPG весят меньше, чем аналогичные в PNG. Также есть более современные форматы, которые, не теряя качества, могут быть легче, чем GIF и JPG. Например, иконки можно заменить на SVG — это формат векторных изображений, которые отрисовываются прямо в браузере.
Размер SVG-файла может быть менее 1 КБ, но при этом на нём не будет ни одного артефакта сжатия. Также он не размажется, даже если указать разрешение в 4К.
Есть ещё webp или webm (видео) и другие форматы. Однако стоит учитывать, что не все браузеры их поддерживают. На «Википедии» есть актуальный список форматов, которые поддерживаются разными браузерами.
Ленивая загрузка — это когда изображения или видео загружаются не сразу, а постепенно. В большинстве случаев — перед тем как пользователь до них доберётся.
Так пользователю не придётся ждать загрузки всех ресурсов, чтобы начать пользоваться сайтом.
Чтобы добавить ленивую загрузку на сайт, нужно вставлять картинки с помощью такого кода:
Здесь в атрибут src записано не само изображение, а заглушка — небольшой чёрный квадрат. Настоящий путь указывается в атрибут lsrc. Оттуда его будет получать скрипт:
var images = document.getElementsByClassName(“lazy-image”); window.addEventListener(“scroll”, function () { OnScroll(); }); function OnScroll() { var offset = window.innerHeight; for(var i = 0; i < images.length; i++) { var imagePath = images[i].getAttribute("lsrc"); if(images[i].getAttribute("src") != imagePath) { if(window.pageYOffset >= images[i].offsetTop – offset) { images[i].setAttribute(“src”, imagePath);
}
}
}
}
Если вы используете фреймворки или библиотеки JavaScript, то они должны находиться на сайте, а не где-то в другом месте.
То есть подключать их нужно не так:
А вот так:
Это увеличит скорость, потому что браузеру не придётся скакать по разным серверам. Тем более с сервера кроме вас эту библиотеку подключили ещё на тысячи сайтов, на которые заходят тысячи пользователей.
То же самое касается видео, изображений, документов и прочего.
Большие скрипты можно минифицировать, то есть удалить всё, что не влияет на их работу. Например, вот так выглядит полный код:
function Sum (a, b) //Функция сложения двух чисел, которая очень нужна для этого сайта. { return a + b;
}
Когда браузер запускает этот скрипт, он удаляет все комментарии, табуляцию и ненужные пробелы. То есть для него важно только это:
function Sum(a,b){return a+b;}
Можно удалить всё это заранее, чтобы увеличить скорость загрузки. Например, если скрипт весил 45 КБ, то после минификации его размер сократится до 32 КБ. То же самое можно сделать с файлами стилей и HTML-страницами.
Во время разработки удобно разделять функционал сайта на несколько скриптов:
- menu.js отвечает за меню;
- scrolling.js добавляет плавную прокрутку;
- lazyloading.js подключает ленивую загрузку и так далее.
Браузеру приходится закачивать каждый файл отдельно. Поэтому время уходит не только на саму загрузку, но и на отправку запросов.
Даже если объединённый скрипт получится большим, он всё равно загрузится быстрее, чем несколько маленьких. Исключение стоит сделать для скриптов, загрузка которых не сильно влияет на работу сайта, — их можно вынести отдельно.
Убедитесь, что скрипты не препятствуют загрузке сайта, если пользователь ничего не потеряет от их отсутствия. Это касается метрик и всяких красивостей. Для этого сделайте их подключение таким:
Атрибут async скажет браузеру, что скрипт можно загружать параллельно с остальным контентом.
Если вы выполнили все советы, но сайт всё ещё грузится долго, добавьте индикатор загрузки. Это даст пользователям знать, что сайт жив и есть смысл немного подождать.
20 способов ускорить загрузку сайта в 2018 году
Почему это важно
Время загрузки сайта – один из важнейших показателей, влияющий на поведение пользователей сайта. Давайте разбираться.
Снижение скорости загрузки страницы на 1 секунду влечет за собой:
- уменьшение числа просмотров на 11%;
- снижение показателя удовлетворенности пользователя на 16%;
- уменьшение конверсии до 6%.
Ниже представлен график, отражающий рост процента закрытых страниц вследствие увеличения времени загрузки сайта.
Пара лишних секунд времени загрузки сайта уменьшают шансы заинтересовать посетителей и осуществить продажи.
KISSmetrics провела исследование на тему того, как скорость загрузки сайта сказывается на поведении пользователей и покупателей:
- 47% пользователей ожидают, что страница откроется меньше чем за 2 секунды;
- 40% пользователей закрывают сайт, если он загружается дольше 3 секунд;
- 79% покупателей, которые остались недовольными удобством сайта, скорее всего, не будут покупать через него в дальнейшем;
- 44% интернет-покупателей расскажут своим знакомым о сайтах, которые их не удовлетворили.
Ускоренная загрузка сайта особенно важна для пользователей, заходящих на сайт с мобильных устройств. А так как сейчас доля мобильного трафика постоянно растет, то на ускорение на мобильном нужно сделать особый акцент.
Терпение пользователей мобильного интернетаТерпение пользователей мобильного интернета
Увеличение скорости загрузки сайта как способ увеличить конверсию
Время загрузки сайта влияет на конверсию. Рассмотрим на примере сети Walmart.
Зависимость показателя конверсии от времени загрузки страницыЗависимость показателя конверсии от времени загрузки страницы
Здесь мы видим, что чем выше скорость загрузки страницы, тем больше показатель конверсии.
По итогам Walmart выявило, что уменьшение времени загрузки страницы на секунду способствует повышению конверсии до 2%.
Влияние оптимизации загрузки сайта на органический трафик
Как ускорить загрузку сайтов? Рассказываем практические советы
В 2021 году только 2% сайтов во всей сети загружаются в течение 3 секунд. Часто этот процесс растягивается на 20 секунд и более.
Доверие пользователей, имидж бренда, безопасность — все это и многое другое напрямую зависит от того, как быстро загружается сайт. А еще скорость работы страницы влияет на посещаемость и конверсию.
Значит, и на выручку. Для арбитража, как не крути — самый важный фактор.
Исследования, которые провели в Amazon, показали, что задержка загрузки сайта всего на 0,1 секунды “съедает” 1% прибыли.
Чтобы исключить такие потери, уже сейчас нужно работать над скоростью загрузки своих страниц. Сегодня поговорим о способах, которые помогут решить эту проблему.
Но начнем с другого — причин, из-за которых страницы в сети медленно загружаются.
Причины медленной загрузки сайтов
Когда скорость работы страницы низкая, сразу нужно провести диагностику. Есть ряд сервисов, которые помогут это сделать и о них обязательно тоже упомянем. Но иногда причина может лежать на поверхности.
Много визуальных эффектов
Дизайнеры сайтов иногда грешат большим количеством анимации и видео. Конечно, в некоторых случаях такие эффекты помогают продвигать товар или услугу. Но чаще они просто бесполезны.
- Большие изображения
- Для оформления сайтов лучше найти баланс — использовать изображения, которые будут качественными, но при этом не снижают работу сайта.
- Можно воспользоваться онлайн инструментом iLoveIMG для оптимизации картинки.
- Много скриптов, плагинов, расширений
В погоне за качественной аналитикой некоторые владельцы сайтов перебарщивают с инструментами. И приходят к тому, что обилие алгоритмов уже не помогает, а только снижает скорость работы сайта.
Множество HTTP-запросов
Время загрузки любого сайта зависит от стилей загрузки, сценариев, изображений. Чем их больше, тем дольше загружается страница. Достаточно избавиться от ненужных элементов дизайна и оптимизировать интерфейс ,чтобы получить ощутимый эффект.
Как проверить скорость загрузки сайта
Есть много инструментов для проверки скорости загрузки страницы. Пользоваться ими нужно не только при запуске нового сайта. Периодически тестировать на быстроту загрузки следует и работающие ресурсы. Такой подход поможет вовремя заметить проблему.
Загрузка...
