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

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

Первое, что мы сделаем – это посмотрим инструменты, которые могут нам помочь. Существует множество инструментов, которые могут показать, как загружается ваша страница и что на ней можно оптимизировать. Далее мы кратко рассмотрим их.

Инструменты браузера

Мы говорим о скорости загрузки страницы. Но как же нам ее измерить? Для этой задачи существуют инструменты в самом браузере. Например, у Google Chrome и Opera есть Web Inspector.

В нем есть вкладка Сеть (Network), в которой отображается список загружаемых ресурсов и данные о них, а также в нижней части находится важное для нас значение Load, т.е. время полной загрузки страницы. Что входит в это значение? Все! А именно, загрузка HTML, CSS, JS, изображений, шрифтов и другого контента.

Хорошо, мы увидели значение, на которое нужно повлиять. Но как же мы узнаем, что нам делать? Для этого нам поможет следующий инструмент.

GooglePageSpeed

Данный инструмент анализирует вашу страницу и отображает результат по 100-бальной шкале.

Для оценки система учитывает следующие критерии:

  • Включите сжатие;
  • Используйте кеш браузера;
  • Не используйте переадресацию с целевой страницы;
  • Оптимизируйте видимое содержание;
  • Оптимизируйте изображения;
  • Сократите CSS;
  • Сократите HTML;
  • Сократите JS;
  • Сократите время ответа сервера;
  • Удалите из верхней части страницы код JS и CSS, блокирующий отображение.

Изучив список рекомендаций, его можно разделить на несколько групп.

Конфигурирование WEB-сервера

Первая группа включает в себя рекомендации по конфигурированию web-сервера, а именно:

  • Включите сжатие;
  • Используйте кеш браузера;
  • Не используйте переадресацию с целевой страницы;
  • Сократите HTML;
  • Сократите время ответа сервера.

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

Верстка и подключение CSS и JS

Вторая группа включает в себя рекомендации по верстке и по порядку подключения CSS и JS файлов на странице, т.е:

  • Оптимизируйте видимое содержание;
  • Удалите из верхней части страницы код CSS и JS, блокирующий отображение.

Рассмотрим более детально каждый пункт.

Оптимизация видимого содержания

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

Удаление из верхней части страницы JS и CSS код, блокирующий отображение

Когда браузер встречает тег < script > при обработке HTML, он останавливает анализ HTML и выполняет содержимое тега. Это вынужденная мера, т.к при исполнении JS мы можем изменить HTML структуру документа и если бы это было бы параллельно с анализом HTML, то браузер не знал бы, что ему нужно отобразить.

Поэтому, когда верстальщик подключает большое количество JS-скриптов в секции head, браузер не отображает страницу, а исполняет JS. А что же увидит пользователь в это время? Правильно. Ничего не увидит. У него будет белый экран.

Для исправления данной ошибки требуется перенести весь JS-код вниз страницы перед закрывающим тегом body. Но в реальной разработке есть ситуации, когда подключение скриптов в секции head вынужденная мера. Для таких случаев существует атрибут async.

Когда браузер встречает данный атрибут, он загружает JS файл, но выполняет его после того, как загрузит страницу. Также при этом он не останавливает обработку HTML.

Мы рассмотрели рекомендации по JS, а как быть с CSS?

Если вы используете несколько файлов CSS и они маленького объема, то лучше их объединить в один файл. Но! Тут важно контролировать размер итогового файла. И если он оказывается большым, то практика объединения всего кода в один файл вам не подходит.

В такой ситуации сначала вам нужно проанализировать посещаемость сайта и в один файл включить CSS для популярных страниц, а для менее посещаемых создать отдельный файл. К примеру, мы выделим в отдельный файл main.css стили для каркаса сайта и общие элементы, в другой файл actions.css стили для страницы "Акции".

Обычно, посещение сайта пользовать начинает с главной страницы. Зайдя на нее, он загружает файл main.css с сервера. Далее, при посещении страницы "Акции" файл main.css у него загрузится уже не с сервера, а из локального кеша браузера, и тем самым мы сократили время загрузки страницы.

Также, хорошей практикой является помещать CSS для первого экрана пользователя прямо в HTML. Это поможет при решении проблемы "белого экрана" при медленном интернет соединении.

Оптимизация веса файлов

Третья группа включает в себя рекомендации по оптимизации размера файлов:

  • Оптимизируйте изображения;
  • Сократите CSS;
  • Сократите JS.

Для нас, как для верстальщиков, эти пункты очень важны. И мы напрямую можем влиять на оптимизацию таких ресурсов, поэтому мы подробно рассмотрим каждый пункт.

Оптимизация изображений

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

Для решения этой задачи я советую использовать 2 инструмента, которые можно открыть по ссылкам: https://kraken.io/ и https://tinypng.com/. Для того, чтобы использовать инструменты, вам потребуется загрузить файлы через специальную форму и после обработки, скачать их оптимизированные версии.

Оптимизация CSS и JS

Существует несколько способов выполнения этой задачи. Первым способом является использование онлайн-инструментов. Для минификации CSS и JS можно использовать http://cssshrink.com и http://www.jsmini.com/. Вам просто нужно скопировать CSS или JS и вставить его в форму. После обработки вы получите сжатую версию кода.

Главным недостатком предыдущего способа является то, что каждый раз приходится выполнять однотипные действия. Это утомительно. По этой причине разработчики создали консольные инструменты, которые автоматически выполняют рутинные задачи. К ним относят: Gulp.js, Grunt.js и другие. Но для начала работы с ними, вам требуется сначала познакомиться с JS, поэтому мы не будет подробно останавливаться на них.

Но для новичков существует десктопное приложение Prepros, которое также поможет автоматизировать задачи. Для изучения возможностей, посетите официальный сайт.

Заключение

Итак, мы рассмотрели базовые принципы и инструменты для оптимизации скорости загрузки сайтов. Они помогут вам начать ускорять ваши проекты. Но не стоит ограничиваться только ими. Важно понимать, что оптимизация загрузки сайта - это непростое сжатие ресурсов, это сложный процесс. Вы можете оптимизировать код, экспериментировать со способами подключения файлов, можете влиять на момент загрузки ресурса и многое многое другое. Попробуйте, и я уверен у вас получится по-настоящему быстрый сайт!

results matching ""

    No results matching ""