Желание наполнить главную страницу информацией по максимуму вполне оправдано. Но в результате может получиться массив контента, который будет загружаться 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

Профессиональная оптимизация главной страницы обеспечит пользователям комфорт и, соответственно, хорошее впечатление от взаимодействия с онлайн-проектом. А ещё – улучшит поисковую видимость сайта по ключевым словам.

Хватит «тормозить» на старте. Оптимизируйтесь!