Общие принципы ускорения сайтов

Несмотря на то, что сайты стоят на абсолютно разных CMS и фреймворках (или велосипедах), всё равно есть общие аспекты влияющие на скорость загрузки. Ведь у них у всех есть какой-то вес статических файлов (картинки, стили, js-файлы...), практически у всех есть динамически выводимая информация, которая через сервер берётся из БД. И это те вещи, которые можно оптимизировать для уменьшения времени загрузки страниц. В этой статье я расскажу об универсальных приёмах ускорения сайта.

Зачем вообще нужно ускорять загрузку страниц?

4 секунды не так долго ведь, правда?

Вообще, существует два важных факторов, не считая вашего личного эго, ради которых стоит мучиться. Это улучшение ранжирования в поисковиках (SEO) и удобство пользователя (User Experience). С быстрым сайтом намного приятнее и удобнее работать пользователю, а поисковики считают своей целью сделать работу в интернете максимально удобной. Также стоит понимать, что чем быстрее сайт, тем он более производителен, а значит больше юзеров может одновременно просматривать его, а трафик это наше всё. Скорость также косвенно указывает на релевантность запроса в данном регионе, правда это лишь догадки.

Сейчас наступила эра мобильного интернета, всё меньше сайтов не адаптируются к маленькому экрану. Но мобильный интернет не самая быстрая штука на свете и порой у посетителя стоит выбор между сайтом, который сразу открывается, и тем, который никогда не откроется (минуту ждать, например). Для таких ниш как интернет-магазины, скорость загрузки становится одним из самых критичных факторов.

Как проверять прогресс?

Самым лучшим способом является панель разработчика в Google Chrome и её расширение Google Insights. Она анализирует страницу, подключаемые файлы, этапы загрузки и даёт советы после анализа. Также в этой панели будут полезны вкладки "Network" и "Audits".

Веб-версия Google Insights находится по адресу developers.google.com/speed/pagespeed/insights/, здесь доступна более полная, чем в панели, информация.

Способы ускорения

Собственно сами приёмы повышения скорости отдачи страниц. Напомню, что все они общеупотребимые.

Обновления

Всегда ставьте свежие обновления всего, что можно обновить. Новые версии CMS, кроме всего прочего, повышают производительность, уменьшают количество запросов к БД, улучшают работу с кешем, облегчают сам код. Не забывайте также обновлять версии php, это служит тем же целям.

Выберите хороший хостинг

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

Минимизация изображений

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

Подобрать правильное расширение

Во-первых, нужно определиться с нужным типом файла. В основном, в вебе выжило только три расширения: gif, jpeg, png, и важно знать когда какой применять, картинка ниже доходчиво всё объясняет (прикреплена ссылкой из-за слишком большого размера).

Если в двух словах, то применяйте jpeg ко всем картинкам, кроме тех, где есть прозрачность - это будет png, или анимация - это будет gif.

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

И последнее, когда вы уже задали нужные расширение и размеры, сожмите сам файл, это поможет сэкономить вам десятки килобайт. Для этих целей я пользуюсь этими двумя бесплатными веб-сервисами: compresspng.com и compressjpeg.com, просто потому что у них удобный интерфейс и нет заметной потери качества при обработке.

Уменьшите количество http-запросов к серверу

Каждая подгрузка файла с сервера занимает немножко процессорного времени. Самым популярным способом решения этой проблемы является создания css-спрайтов. Это когда создаётся одна картинка, которая содержит несколько других. Для примера:

Таким образом вместо n запросов, мы обращаемся к серверу всего один раз. Чтобы вывести в нужном месте нужный кусочек спрайта, мы создаём элемент, у которого указываем размеры и сдвиг бэкграунда (background-position), а в background-image, естественно, ставим наш спрайт. Несмотря на то, что суммарный вес картинок по отдельности точно такой же (а иногда и меньше), мы уменьшаем время загрузки страниц разгрузкой процессора. У себя на сайт я пошёл ещё дальше и вообще отказался от картинок в оформлении, у меня здесь только лого, а тот домик в меню это, вообще, символ.

В случае с другими файлами, которые загружаются браузером (стили, например), не думаю, что вы их разделили без веской причины, поэтому не стоит думать над этим, к тому же некоторые движки (Bitrix, например) умеют сами объединять и сжимать такие файлы.

Также можно использовать специальный заголовок для запуска кеширования браузером. Для этого необходимо прописать заголовок expires. У себя я задаю его через .htaccess, для примера:

	
		ExpiresActive on
		ExpiresDefault "access plus 1 day"
		ExpiresByType image/jpeg "access plus 3 day"
		ExpiresByType image/gif "access plus 3 day"
		ExpiresByType image/png "access plus 3 day"
		ExpiresByType text/css "access plus 3 day"
		ExpiresByType application/javascript "access plus 3 day"  
	

Данный код значит: "по умолчанию кешировать на один день, картинки, css и js кешировать на три дня".

Уменьшите количество запросов к бд

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

• Могу ли я точнее указать список необходимых полей для возврата?

  В CMS это позволяет уменьшить количество задействованных таблиц при запросах

• Получал ли я эти данные где-нибудь выше?

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

• Никогда не стоит писать запросы внутри циклов.
• Стоит объединять близкие запросы на одной странице.

Зачастую вам, вообще, не надо обращаться к бд при каждой загрузке страницы, так что закешируйте всё что можете, чтобы отдавать уже готовый html при повторных загрузках.

Минимизация css и js

Как и все файлы, эти файлы также имеют вес, который отрицательно влияет на скорость загрузки. Но фанатичное сокращение символов, ведёт к потере читаемости. Я не думаю, что ради 1-2 кб веса стоит жертвовать поддержкой разработки. Но если подойти с умом, то можно, конечно, найти компромисс, например, использовать быстрые правила, уменьшать размер селекторов, убрать дублирующиеся правила, объединить функции и циклы.

Подробнее об ускорении работы css и js файлов будет рассказано отдельно.

География

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

В наше время уже широко распространён cdn, зачастую он даже бесплатный, так что если удастся подключить эту технологию, она даст вам заметное увеличение скорости.

К чему стремиться?

К идеалу конечно, человек моргает за 0,3-0,4 секунды. У акул рынка скорость загрузки страниц составляет как раз 0,3 - 0,5 секунд и это позволяет приводить на их сайты большУю аудиторию. Выполняя советы из этой главы, можно добиться загрузки в полсекунды, лично у меня получалось на моих основных проектах.

Если остались какие-то вопросы по поводу пунктов этой инструкции или вы знаете ещё действенные способы, которые стоит упомянуть, отпишитесь, пожалуйста, внизу, я вам отвечу.