Как я ускорил загрузку главной страницы сайта с 12 до 3 секунд

Миниатюра

 

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

Все изображения статьи в одном окне

 Мой сайт до изменений

1.1. Шапка моего блога с анонсами статей 1.1. Шапка моего блога с анонсами статей

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

Но так как она является элементом дизайна сайта, то изменить ее я не могу.

Я могу в будущем поместить сайт на выделенный сервер и ускорить скорость обращения к сайту со средних 100 кб/сек до 300 кб/сек, что позволит ускорить загрузку сайта в 3 -4 раза!

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

1.2. Подвал моего блога 1.2. Подвал моего блога (до оптимизации)

До оптимизации я не знал что эти картинки значительно замедляют время загрузки главной страницы (на 40%)!

Когда я это узнал из теста производительности, я незамедлительно удалил их из футера (оформлю в отдельной статье)

Этот шаг возымел значительное действие! Скорость загрузки уменьшилась в 2 раза!

 

Тесты скорости загрузки страниц после удаления лишних картинок из футера

 

2.1. Результаты теста скорости загрузки сайта 2. Результаты теста скорости загрузки сайта на сайте tools.pingdom.com. Еще один хороший сервис тестирования — http://gtmetrix.com/

Пользоваться этим просто. Вводим адрес нашего сайта в адресную строку, нажимаем кнопку «Test Now». Ждем очереди. Сервис быстро работает, что выделяет его на фоне унылых медленных конкурентов!

У меня время ожидания очереди было максимум минуту. Чаще всего 10-12 секунд ожидания.

Это вполне нормально, потому что сервис выдает очень подробные результаты тестирования, это бесценное преимущество!

2.А. Результаты теста скорости загрузки сайта 2.А. Результаты теста скорости загрузки сайта

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

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

Кроме того, у меня много ценных плагинов, помогающих в работе. У них много java-кода и скриптового кода на разных языках.

В будущем можно попытаться множество кода объединить в одном архиве, или из кода плагинов убрать вызов одних и тех-же общих Java-библиотек.

Это я оставлю на будущее программистам-аутрорсерам.

По крайней мере, благодаря сервису я увидел такую возможность и знаю куда стремиться!

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

Как это оптимизировать?

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

Еще один способ — плагины, действие которых начинается на стороне клиента (например плагин Lightbox Plus Colorbox, показывающий интерактивные эффекты показа картинок в отдельном окне) вынести в интернет-сервисы, которые работают быстрее моего платного хостинг-провайдера.

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

 

Результаты теста скорости загрузки главной страницы детально по файлам

2.1. Результаты теста скорости загрузки сайта 2.1. Результаты теста скорости загрузки сайта

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

Это очень ценная вкладка!

Она позволяет оценить детально загрузку каждого файла по параметрам:

  • Время ответа DNS сервера
  • Время соединения (Connect)
  • Время отправки файла (Send)
  • Время ожидания передачи файла на стороне клиента (Wait)
  • Время получения одного файла (Receive)

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

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

Например, в моем случае, тяжелые картинки долго пересылаются к клиенту, а код некоторых плагинов вызывает элементы онлайн-сервисов, которые не всегда быстро отвечают (ВКонтакте, счетчик Google, счетчик Яндекс).

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

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

2.3. Результаты теста скорости загрузки сайта 2.2. Результаты теста скорости загрузки сайта
2.4. Результаты теста скорости загрузки сайта 2.3. Результаты теста скорости загрузки сайта
2.5. Результаты теста скорости загрузки сайта 2.4. Результаты теста скорости загрузки сайта
2.6. Результаты теста скорости загрузки сайта 2.5. Результаты теста скорости загрузки сайта
2.7. Результаты теста скорости загрузки сайта 2.6. Результаты теста скорости загрузки сайта

 

Результаты теста скорости загрузки главной страницы после включения кеширования и уменьшения веса картинок анонсов статей.

 

3. Включим кеш 3. Включим кеш
3.А. В каждой статье я уменьшил вес картинок анонсов статей! 3.А. В каждой статье я уменьшил вес картинок анонсов статей!
3.1. После кеширования чуть быстрее стал грузится сайт 3.1. После кеширования чуть быстрее стал грузится сайт

Полезный график. Для тех, кто знает английский (или пользуется онлайн-переводчиком) думаю все понятно.

Если непонятно, переведите в онлайн-переводчике.

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

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

Я считаю такую помощь бесценной для новичков!

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

4. После удаления лишних картинок из футера сайта главная страница стала весить легче 4. После удаления лишних картинок из футера сайта главная страница стала весить легче
4.1. Оценка кеширования выросла! 4.1. Оценка кеширования выросла!
4.2. Оценка загрузок картинок лучше стала! Картинки грузятся быстрее! 4.2. Оценка загрузок картинок стала лучше! Картинки грузятся быстрее!

 

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

На этом все, счастливо!

Удачи в веб-мастеринге!

Теги: , ,

>