Желание наполнить главную страницу информацией по максимуму вполне оправдано. Но в результате может получиться массив контента, который будет загружаться 10-15 секунд. Как это оптимизировать? Давайте разберемся в этой статье.
1. Серверная оптимизация
Увеличьте ресурсы хостинга. Если есть возможность увеличить ресурсы – welcome! Тем более, что нехватка ресурсов хостинга — это самая частая причина торможения «небольших» сайтов (сайт-визитка, интернет-магазин, и т.д.) сегодня.
Оптимизируйте работу базы данных. Упрощенно, задача сайта – собирать данные, хранить их в базе данных и отображать в нужный момент на нужной странице. Поэтому логично, что большая часть времени тратится на запросы к базе данных и ожидание получения необходимой информации. Если БД плохо структурирована, забита неактуальными данными, допущены ошибки в написании запросов, то скорость получения информации может значительно снизиться.
Оптимизацию базы данных лучше доверить опытному программисту – чтобы достичь максимальных результатов без потери важной информации.
Исправить это можно при помощи:
- Оптимизации структуры базы данных. «Разложите» всю информацию по своим «местам» – это упростит поиск и, соответственно, ускорит получение информации.
- Оптимизации запросов. Правильно составленные запросы на получение информации «помогут» онлайн-ресурсу быстрее найти необходимые данные в базе данных.
Ursus Wehrli «The Art Of Clean Up»
Используйте серверное кэширование. Это действительно мощный, универсальный способ. Просто помещайте результат вычисления в кэш и не забывайте периодически обновлять. Так вы снизите нагрузку на сервер и ускорите загрузку страницы.
2. Оптимизация файлов JS, CSS
Одновременное подключение нескольких CSS-файлов очень «растягивает» во времени загрузку страницы браузером. Рациональное решение – сведение нескольких СSS-файлов в один. Его следует подключать в начале страницы. Эти же правила работают для JS-файлов, только подключение осуществляется внизу страницы. Файлы, которые мы свели, минимизируем. Для этой цели подходят специальные программные утилиты, а также онлайн-сервисы.
Файлы стилей (CSS) отвечают за внешний вид (шрифт, цвет, позицию) элементов на странице. Файлы скриптов (JS) реализуют динамические эффекты (табы, выпадающие списки, анимации и т.д.).
Минимальный размер файлов – обязательное требование для главной страницы сайта. Поэтому мы рекомендуем подгружать только тот программный код, который актуален для главной.
Чем больше визуальных эффектов и анимаций сосредоточено на странице, тем дольше она будет загружаться. Главная задача – найти идеальный баланс.
3. Web-шрифты
Использование современных форматов WOFF2 и WOFF позволяет сократить трафик web-шрифтов и оперативно их получить. Для максимально эффективной оптимизации применяйте только те наборы символов, которые используются на сайте.
Достижение баланса между эстетикой и производительностью страницы возможно при использовании СSS-свойств Font-display. Так вы сможете управлять реакцией браузера – подождать шрифт или рисовать запасной, например. Быстрому отображению web-шрифтов также способствует их предварительная загрузка link rel=«preload».
Не стоит использовать на одной странице больше одного-двух шрифтов. Жирного и курсивного начертаний будет достаточно для выделения необходимого контента.
4. Кэширование файлов
Для редко обновляемых элементов на странице советуем настроить кэширование – так они будут вызываться из кэша браузера, а не с сервера. Использование ранее загруженных элементов во время повторного посещения сайта позволит снизить частотность http-запросов к серверу. А это, в свою очередь, положительным образом скажется на скорости загрузки Вашей страницы.
Закешированные файлы (изображения, видео, шрифты и т.д.) хранятся на компьютере у пользователя и отображаются в браузере мгновенно.
5. CDN
CDN (Сеть доставки контента) – большое количество веб-серверов по всему миру, которые представляют собой сетевую инфраструктуру. Использование CDN способствует высокому качеству и большой скорости передачи данных. Сеть позволяет подгружать на сайт библиотеки CSS и JS, и попутно снижает нагрузку на ваш сервер.
Использование CDN особенно актуально, если сайт посещают пользователи из разных стран. Файлы будут загружаться с местных серверов, что значительно ускорит загрузку страницы.
6. AMP
AMP – Ускоренные мобильные страницы – совместная разработка Google, IT-компаний с мировыми именами, владельцев и разработчиков сайтов. Технология с открытым кодом нацелена на снижение «веса» сайта и мгновенную его загрузку. За счет быстрой загрузки и адаптации под мобильные девайсы страницы с АМР выстраиваются выше других в списке поисковых запросов.
АМР идеально подойдёт, если вы собираетесь оптимизировать работу мобильной версии, разделы пониженной функциональности, блоги, интернет-журналы, информационные ресурсы.
7. Оптимизация контента
Чем больше мультимедиа и сложной графики – тем проблематичнее загрузка страницы браузером. Для оптимизации содержимого важно выбрать оптимальный формат файлов. Для изображений наиболее популярные такие форматы:
- JPEG – хорош для фотографий, многоцветных, детализированных картинок
- PNG – для изображений высокого качества с прозрачностью
- SVG – для анимированной и интерактивной векторной графики.
Для сокращения размеров графических файлов разработаны специальные утилиты, что решают вопрос без потери качества. Главное – не переусердствовать с параметрами компрессии.
Если хочется добавить видео – вперед! Только учтите, что оно «поедает» много ресурсов. Для снижения нагрузки на сервер рекомендуем использовать популярные сервисы Vimeo или Youtube.
Проверьте себя! Для того, чтобы проверить, нуждается ли Ваш сайт в оптимизации, можно использовать удобный инструмент PageSpeed Insights от Google. Достаточно ввести адрес сайта – и Вы увидите проблемные места десктопной и мобильной версий, а также советы от Google по их устранению.
Пример успешной оптимизации главной страницы сайта tomahawk.in.ua
Профессиональная оптимизация главной страницы обеспечит пользователям комфорт и, соответственно, хорошее впечатление от взаимодействия с онлайн-проектом. А ещё – улучшит поисковую видимость сайта по ключевым словам.
Хватит «тормозить» на старте. Оптимизируйтесь!
