Оптимизация скорости сайта

Последнее обновление: 23 мая 2019 года в 10:47

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

Примечание для веб-мастера : это руководство является частью серии учебных пособий « Руководство по оптимизации скорости сайта «. Предыдущие уроки состоят из следующего:

1. Должен иметь плагин скорости сайта для WordPress
2. Оптимизация скорости сайта: асинхронный и отложенный Javascript
3. Как внедрить самодостаточный CDN для скорости сайта

Отказ от ответственности: я использовал мой сайт God and You, потому что блог SEO Hacker (этот сайт) уже оптимизирован с точки зрения производительности. Вы можете проверить нашу скорость и оптимизацию производительности, используя Pingdom и GTmetrix.

медлительный

Страница загружалась очень медленно - 7,29 секунды! Pingdom сказал мне, что мой сайт загружается медленнее, чем 81% всех протестированных сайтов. Это ужасно!

Следующее, что я сделал, - взглянул на мой отчет GTMetrix. Размер страницы вполне соответствует Pingdom. Я решил, что должен уменьшить это число. И какой лучший способ уменьшить размер страницы, чем убрать куски килобайт изображений?

Поэтому я провел небольшое исследование и наткнулся на термин « Ленивая загрузка » - это метод задержки инициализации объекта (изображений, видео, сценариев и т. Д.) До тех пор, пока он не понадобится. Звучит очень эффективно, не так ли? Поэтому я решил поискать плагин, который может эффективно «лениво загружать» мои изображения. Я попробовал несколько из них. Некоторые из них были не слишком дружелюбны, а некоторым не хватало гладкости, которую я искал. Поэтому, когда я нашел идеальный плагин, я решил, что мне нужно пойти дальше и поделиться им с вами. Так что без лишних слов:

Барабанная дробь, пожалуйста!

Введение в ...

Продвинутая Ленивая Загрузка! (Хлоп Хлоп Хлоп Хлоп…. *)

Теперь, хотя я не знаю, что же такого « продвинутого » в этом плагине, я знаю, что он довольно лениво загружается. Позвольте мне провести вас через варианты.

Хорошо, вы посмотрите на это! Он имеет только 2 простых варианта, с которыми вы можете возиться. Первый - Пиксель . Установите его так высоко, как вы хотите, чтобы изображение ниже сгиба загружалось. Это означает, что если ваш пользователь прокручивает вниз, следующие изображения на 1000 пикселей ниже видимого экрана вашего пользователя уже будут загружены вперед. Это значит, что ваши пользователи не будут ждать загрузки изображений при каждой прокрутке вниз.

Второй вариант - « Затухание по продолжительности ». Я установил его как можно ниже, потому что в любом случае мне не очень нравятся "исчезающие" изображения. И я думаю, что мои посетители разделяют мою любовь. Я хочу, чтобы изображения загружались как можно быстрее, чтобы не тратить время.

Вот результаты теста скорости после того, как я применил Lazy Load:

Время загрузки было сокращено на целых 40%! Это довольно много - даже если я все еще медленнее, чем 71% всех протестированных сайтов. Я должен буду работать над этим еще немного.

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

Советы по хранению

Я буду держать этот пост коротким и сладким. Скачать Расширенный плагин Lazy Load , Активируйте это. Установите параметры, как я его установил. Запустите его и проверьте свою скорость, используя Pingdom а также GTmetrix ,

Скоро в Ultimate Руководство по оптимизации скорости сайта: Оптимизация базы данных.