Несколько дней назад…
Я оптимизировал скорость загрузки сайта клиента с 10 сек до < 2 сек.
Затраченное время: 2 часа
Затраты клиента: $500
Вот 8 шагов, которые я выполнил, и вы можете следовать им для оптимизации сайта, сделанного на любой CMS или технологии:
Во-первых, почему вы должны сделать любой сайт быстрее?
- ✔️ Снижение показателя отказов на 57% (согласно исследованию)
- ✔️ Повышение рейтинга Google
- ✔️ Счастливые посетители/клиенты
давайте проверим шаги 👇
1/ Анализ веб-сайта:
➡ Перейдите на http://gtmetrix.com
➡ Введите URL и нажмите «Проверить сайт».
➡ Через несколько секунд вы увидите полный отчет, содержащий GTmetrix Grade, Performance & structure.
(Отчет GT metric)
➡ В отчете GT metric прокрутите вниз до раздела «Top Issues» («Лучшие проблемы»).
➡ Здесь будут показаны проблемы, связанные с JS, CSS, изображениями, слишком большим количеством запросов, размером страницы и др.
👉 GTmetrix покажет большинство улучшений, НО НЕ ВСЕ.
➡ Давайте решим проблемы, на которые указывает GT metric
2/ Оптимизация размера изображения:
➡ Уменьшите размер всех изображений с МБ до КБ
➡ Перейдите на http://squoosh.app
➡ Загрузите оригинальные изображения
➡ Загрузите сжатые изображения
➡ Замените на своем сайте
3/ Ленивая загрузка изображений:
➡ Ленивая загрузка откладывает загрузку изображений до тех пор, пока пользователь не прокрутит страницу рядом с ними.
➡ Делать только при большом количестве изображений
➡ Просто добавьте load=»lazy» в теги img
(проверьте скриншот)
4/ Кэширование js & css
➡ Кэширование активов загружает их один раз и сохраняет их в кэше браузера
➡ Это уменьшает время загрузки последующих страниц
➡ Кэшируйте их, добавляя версию актива
(проверьте скриншот)
5/ Минифицируйте JS & CSS:
➡ Минификация JS и CSS уменьшит их размер почти на 70%.
➡ Зайдите на http://smalldev.tools, найдите js/css minifier
➡ Минифицируйте все js и CSS.
PS: сохраните резервную копию не минифицированных файлов на случай, если они могут понадобиться позже.
6/ Переместите JS в конец документа:
➡ JS блокирует все остальные ресурсы
➡ Это увеличивает время «First Contentful Paint».
➡ Переместите их в конец HTML-документа.
7/ Сжатие Brotli:
➡ Уменьшает размер HTML почти на 80%.
➡ Перейдите на http://giftofspeed.com/gzip-test/ & проверьте, включено или нет.
➡ Если нет, свяжитесь с хостингом, чтобы включить его
➡ Или используйте cloudflare, чтобы использовать это бесплатно.
Теперь мы закончили с оптимизацией, предложенной GTmetrix
➡ Проведите повторное тестирование вашего сайта, и вы увидите хорошие улучшения 🤩
➡ но еще не оптимизированы на 100%
Давайте оптимизируем больше…
8/ Оптимизация базы данных:
Неоптимизированная БД может значительно снизить скорость работы
Оптимизация БД может быть большой темой, но выполнение этих основных действий поможет
➡ Добавьте индексацию к полям, используемым для поиска, сортировки, объединения таблиц (базовый вариант).
Это мой первый пост. Надеюсь, этот пост поможет!
Оставляйте комментарии ниже, если у вас есть вопросы.
Подключайтесь ко мне в Twitter и LinkedIn.