Курс WEB
разработки
Анализ
данных
Курс JAVA
и Android
Курс C#
и .NET
React JS
Angular JS
Javascript
HTML5 и CSS3

Поделиться:

Повышение скорости загрузки сайта

Читайте так же: «Оптимизация страниц. Сайт в ТОП своими руками.»

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

Сегодня мы разберемся, каким образом повышается скорость загрузки, какие нюансы нужно учитывать?

1 Оптимизируйте скорость загрузки файлов

К этому разделу хочу отнести ресурсы, которые загружаются с сервера при обращении к странице сайта: изображения, файлы css, javascript, внешние шрифты, дополнительные файлы (.xls, .doc, .pdf….) и прочие.

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

К примеру, в шапке сайта у вас стоит изображение, которое по размеру 2Мб. Вот представьте, что пользователь зашел на страницу и для того, чтобы изображение отобразилось, с вашего сервера должен скачаться файл размером в 2 Мб. Это очень много + он будет тормозить загрузку остального контента. А если речь идет о сетях 3G? Тогда пользователь вообще не дождется загрузки и покинет страницу. С этим надо работать.

Проверить скорость загрузки страниц можно с помощью специального сервиса Google PageSpeed Insights: developers.google.com

Google PageSpeed Insights

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

Это крайне удобно, самый простой способ оптимизировать файлы. В среднем, объем передаваемых данных с сервера не должен превышать 1,5 Мб.

2 Сократите количество запросов к серверу

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

2.1 Объедините иконки сайта в один спрайт

Спрайты для сайта

На одной странице обычно находится достаточно большое количество небольших изображений (иконок). Чтобы загрузить каждое из изображений браузеру приходится каждый раз обращаться к серверу, в следствие чего замедляется загрузка. Чтобы этого избежать, нужно все иконки объединить в одно изображение (как показано на рисунке выше) и, в дальнейшем, при вставке на страницу, указывать координаты нужного места, с которого требуется взять часть изображения. Это делается с помощью CSS-свойства background-position.

2.2 Уберите загрузку ненужного содержимого

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

2.3 Добавление асинхронного метода загрузки контента

При загрузке файлов .js происходит блокирование загрузки следующих за ними файлов до момента, пока текущий файл не загружен. В следствие этого, если у вас через HEAD подключается 30 файлов, то каждый последующий будет загружаться после загрузки предыдущего.

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

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

3 Сократите время ответа сервера

Рассмотрим на примере сборки страниц сайта.

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

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

4 Улучшите верхнюю часть страницы

Верхняя часть сайта

Один из важных пунктов, вследствие недоработки которого можно потерять до 30% потенциальных клиентов.

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

Нужно проделать несколько шагов:

  • Весь код CSS, относящийся к загрузке верхней части страницы разместить внутри тега <style> в <head>. Тем самым мы убираем запросы к серверу при загрузке верхней части.
  • Все подключаемые файлы js (если они не влияют на отображение шапки сайта) и .css подключать после html блока верхней части или перед закрывающим тегом <body> (последний вариант рассматривается индивидуально). Опять же минимизируем запросы к серверу.

5 Используйте кэш-браузера

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

Как настраивать кэш мы поговорим в отдельной статье, так как тема достаточно большая.

Настраивать кэширование можно с помощью дополнительных заголовков Cash-Control и Etag, а также с помощью настройки файла .htaccess.

Подробнее о Cash-Control и Etag читайте на сайте Google: developers.google.com/speed/

6 Применяйте GZIP-сжатие файлов

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

GZIP сжатие настраивается в файле .htaccess. Есть очень много готовых примеров с кодом для GZIP сжатия, допустим такой:

GZIP сжатие

7 Обеспечьте быструю загрузку в 3G-сетях

Ваш сайт может быстро загружаться в 4G(LTE) сетях, но этого недостаточно. Зачастую пользователи заходят на сайт с мобильного устройства в местах, где есть доступ к интернету только по 3G, а таких мест предостаточно.

По данным Google, процент 3G сетей до 2020 года будет составлять 70%. А это немало.

Загрузка сайта в 3G не должна превышать 4 секунды. Каждая дополнительная секунда будет забирать у Вас примерно по 10% потенциальных пользователей.

Корректность работы в сетях 3G можно легко проверить с помощью сервиса Google: testmysite.withgoogle.com

Скорость сайта в 3G-сетях

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

Друзья, на этом все. Конечно, есть еще куча мелких нюансов, которые так или иначе могут повлиять на корректность работы Вашего ресурса. Я указал самые основные и самые важные. А если хотите создавать изначально качественные сайты, жду Вас на своем курсе! inordic.ru/courses/web-development

Читайте так же: «Оптимизация страниц. Сайт в ТОП своими руками.»

Поделиться:

ЧИТАЙТЕ В БЛОГЕ

Nordic IT School в гостях у Avito
Автор статьи: Вячеслав Жуков

Специально для студентов курса "Веб-разработчик", 7 августа, компания Avito провела лекцию по организации фронтенд разработки. Лекцию проводил Сергей Мелюков - тим-лид одного из отделов фронтенд разработки в Avito. подробнее...
12 августа 2018

Какие книги читать начинающему программисту?
Автор статьи: Вячеслав Жуков

В этой статье я постараюсь рассказать про книги, которые на мой взгляд самые полезные. Я буду говорить про веб-разработку, так как это моя основная область деятельности, но еще и посоветую несколько книг, которые должны прочитать все разработчики подробнее...
26 апреля 2018

Сколько зарабатывают программисты?
Автор статьи: Вячеслав Жуков

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

Теперь интернет официально становится мобильным.
Автор статьи: Мария Симонова

26 марта 2018 года, в понедельник, Google объявил, что после полутора лет экспериментов и тестирования, начался перенос сайтов, отвечающих всем требованиям mobile-first индекса. подробнее...
27 марта 2018

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

Это самый популярный вопрос у тех, кто решил стать разработчиком. Действительно, языков программирования очень много: javascript, php, c++, java, с++, python, go, perl, ruby и еще сотня других. В данной статье я расскажу про эти языки и дам вам несколько советов. подробнее...
20 марта 2018

ВСЕ СТАТЬИ...

ДРУГИЕ НОВОСТИ

13 сентября 2018

Приглашаем на Avito Student Talks 17 сентября

17 сентября приглашаем всех в офис Авито на первый митап Student Talks подробнее...
05 сентября 2018

День открытых дверей в Nordic IT School
5 сентября в 19.00

Ты давно хотел заняться программированием, но у тебя были сомнения: какую именно школу выбрать? получится ли у меня? На все эти и другие вопросы мы ответим в стенах нашей школы 5 сентября в 19.00. подробнее...
14 мая 2018

"День Фрилансера в России" 14 мая

Ежегодно, 14 мая, тысячи людей из разных регионов России отмечают этот праздник. Впервые его стали отмечать еще в 2005 году и приурочили к открытию первой биржи фриланса Free-Lance. подробнее...

ВСЕ НОВОСТИ...

Выберите курс

Курс WEB-разработки
(144 ак.часа)

Курс для начинающих в разработке сайтов

Ближайшая группа: 
28 ноября 2018

Курс "Анализ данных на Python"
(144 ак.часа)

Курс для начинающих обучение с нуля

Курс JAVA и Android
(110 ак.часов)

Курс для начинающих обучение с нуля

Курс C# и .NET
(144 ак.часа)

Курс для начинающих в разработке приложений

Ближайшая группа: 
28 ноября 2018

Курс HTML5 и CSS3

Курс для начинающих в разработке сайтов

Курс Javascript

Требуется подготовка по курсу
HTML5 и CSS3

Курс PHP

Требуется подготовка по курсу
HTML5 и CSS3

Курс AJAX

Требуется подготовка по курсу
HTML5 и CSS3Javascript

Курс Angular JS

Требуется подготовка по курсу
HTML5 и CSS3JavascriptAJAX

Курс React JS

Требуется подготовка по курсу
HTML5 и CSS3JavascriptAJAX

МЫ РЯДОМ

Nordic IT School
Москва, ул. Большая Спасская 12
8(495)626-46-00
moscow@inordic.ru
лицензия на образовательную деятельность
Лицензия на образовательную деятельность:
№ 035452 от 19.09.2014 года