Тормозит сайт? Как ускорить загрузку сайта с минимальными усилиями — Легко!

Многие владельцы сайтов (а еще больше — их пользователи) стыкаются с проблемой медленных сайтов и задаются вопросом, как ускорить загрузку сайта. Проблема с медленно работающими сайтами — не только в том, что ваш сайт просто себе медленно работает.

Основные последствия «тормозных» сайтов:

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

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

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

Есть шаги оптимизации, направленные на увеличение «начальной», свежей загрузки контента в браузер пользователя, который впервые посещает ваш сайт — «новый пользователь». Также, существует ряд оптимизаций, направленных на улучшение работы сайта для последующих загрузок страниц, либо для вернувшихся пользователей.

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

Она будет заключаться в 3 простых инструкциях:

Это и есть тот простой и чудесный рецепт, способный как ускорить загрузку сайта в 2-5 раз, так и уменьшить количество трафика при сравнительно небольших затратах усилий, что особо актуально при «мобильном» интернет-серфинге.

Уменьшение количества запросов к сайту для ускорения первоначальной загрузки страницы

Для новых пользователей, а еще больше — для сайтов, где важна скорость открытия одной из страниц (главной, как у поисковиков Google.com, Bing.com) оптимально, когда страница сайта делает минимальное количество запросов к серверу, не содержит больших файлов (более 150-200 кБ.). Это дает наиболее существенный прирост к скорости загрузки самой страницы (при условии, что остальные факторы не замедляют загрузку и рендеринг страницы).

Посмотрите на загрузку элементов главной страницы поисковика Bing.com в популярном сервисе проверки работы сайта Gtmetrix.com:

увеличение скорости работы сайта - Bing.com

Для достижения такого эффекта, вы можете полностью перенести CSS и JavaScript вашего сайта в тело самой страницы — сделать их «инлайновыми». Таким образом, вы избавитесь от загрузки внешних файлов. Обратной стороной медали является то, что данный шаг увеличит размер самой страницы и сделает невозможным использование прироста скорости загрузки за счет кеширования внешних файлов для повторной загрузки страницы. Для поисковика Bing или аналогичных сервисов, где важна скорость первоначальной загрузки страницы, а не расчет на постоянных пользователей и посетителей, это будет правильным шагом.

В идеале: хороший результат оптимизации для среднего сайта — 1 внешний файл .css и 2-3 файла javascript — подключенная библиотека jquery (или mootools, …), один общий файл скриптов в head сайта и 1 файл в футере, перед закрывающим </body> тегом. Либо и библиотека, и 1 общий файл скриптов в футере.

Многие популярные системы управления сайтами (CMS) имеют решения для объединения и кеширования файлов стилей и скрпитов в виде плагинов или встроенного функционала. Примеры такого — ScriptMerge для Joomla или  W3TotalCache для WordPress, умеющий объединять и минифицировать файлы и отдавать их кешированные копии, таким образом экономя в количестве запросов и размере самих файлов.

Кроме объединения скриптов и файлов стилей, необходимо подумать и про другие загружаемые элементы — картинки, иконки и т.д. Используйте разумно технологии спрайтов для растровых элементов вашего шаблона, для набора векторных изображений попробуйте использовать готовые иконочные шрифты или создайте свой собственный, с загрузкой только используемых элементов (это уменьшит размер самого файла шрифтов) на сайте https://icomoon.io/app/. Данный сервис позволяет загружать свои векторные файлы и объединять их в 1 файл шрифта. Также, вы можете скачать растровый вариант элементов и сделать растровый спрайт. Таким образом, вместо загрузки лишних 20 файликов и ожидания очереди их загрузки вы в 1 поток скачаете файл, содержащий все необходимые элементы, и финальный размер спрайта почти всегда будет меньше, чем суммарный размер объединяемых файлов. Для поддержки прозрачности используйте для создания спрайтов 24-битный PNG формат.

Сжатие и уменьшение больших файлов

Правильное сжатие, с оптимальным балансом для размера/качества выходного файла, является важным элементом всей стратегии построения сайта. Для быстрого и эффективного результата в сжатии JPG, PNG картинок воспользуйтесь сервисом tinypng.com. Данный сервис отлично оптимизирует PNG изображения (примерно 60-70 процентов экономии — за счет удаления альфа-каналов и других шагов оптимизации) и сжимает без видимых потерь качества файлы JPG (3-30% в зависимости от файла).

Посмотрите на 2 файла ниже — они примерно одинакового размера, но на файле JPG заметны видимые артефакты:

tinypng-optimization

Рис. 1 — оптимизированный файл png. Нажмите, чтоб увеличить

jpeg - оптимизация

Рис. 2 — оптимизированный файл jpg. Нажмите, чтоб увеличить

Правильная оптимизация типов, форматов и размеров файлов — это половина дела в ускорении работы сайта. Используйте JPG для полноцветных фотографий, с градиентами и большим количеством цветов, используйте GIF или PNG для изображений с «простыми» цветами, где количество цветов ограничено (256, 512). JPG файлы теряют четкость при сохранении в низком качестве (jpeg 0-60), картинка покрывается артефактами. PNG сохраняется без потерь, артефактов на файлах не бывает. Вы можете сравнить размеры и качество, сохранив и сжав один и тот же файл в обоих форматах. Присмотревшись, можно увидеть артефакты в файле формата jpg.

jpeg артефакты на файле

В идеале: загрузка нескольких (2-30 или более) файлов примерно одинакового размера для лучшего распараллеливания скачивания, отсутствие слишком больших графических файлов (более 300-350 кБ), общий размер загружаемой страницы — до 500-600 кБ, отложенная загрузка больших файлов (используя ajax, jquery .load() и подобные техники), что не повлияет на общую загрузку страницы. Также можно применить загрузку большого количества файлов с разных поддоменов\доменов для того, чтоб обойти ограничение на количество одновременно загружаемых объектов с 1 домена\поддомена. Для живого примера можете посмотреть загрузку этой страницы и то, с каких поддоменов грузятся изображения.

Иногда, действительно, будет полезно разделить 1 большой файл на 2 отдельных для того, чтоб его скачивание прошло в 2 потока и файл быстрее попал к пользователю. Это может, к примеру, быть тяжелая фоновая картинка сайта, которую без проблем можно разделить на 2 и через стили задать вид, будто бы это 1 картинка без разделения.

Сжатие javascript и css файлов — также довольно простой метод. Воспользуйтесь сервисами Google Closure Compiler ( http://closure-compiler.appspot.com/home ) для уменьшения вашего файла скриптов (Внимание! Обязательно делайте бекапы оригинальных файлов и проверяйте функционирование сайта после любых работ с данным инструментом!). CSS-файлы можно оптимизировать с помощью YUI Compressor от Yahoo! ( http://refresh-sf.com/yui/ ). Снова повторюсь — делайте бекапы и проверяйте, все ли в порядке после таких оптимизаций.

Оптимизация кода

Тут следует обратить внимание на такие рекомендации:

  • порядок подключения в коде вашей страницы внешних файлов стилей и скриптов должен быть таким — сначала все подключаемые файлы .css, а послед все внешние файлы скриптов;
  • все файлы скриптов, которые можно без проблем для работоспособности, подключить в футере, а не в разделе head вашего сайта, должны быть подключены там — сразу перед закрывающим тегом </body>. Это улучшит скорость рендеринга страницы, так как браузер не будет ждать загрузки этих файлов, чтоб отобразить страницу пользователю;
  • «чистота» и валидность кода также имеют значение. Правильно написанный код, без ошибок, наличия излишних тегов или откровенно мусорного кода, быстрее обработается браузером и будет отображен пользователю.

И небольшой совет — не вставляйте тексты из программы MS Word (и других текстовых редакторов с сложным форматирование) в визуальный редактор вашего сайта при публикации страниц — это внесет в код кучу лишних тегов, необходимых только для Ворда, но не для вашего сайта. Вставляйте тексты в простой блокнот (Notepad.exe, Notepad++) и копируйте уже оттуда. Это упростит и уменьшит код страницы.

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

Напоследок, тем, кто всерьез заинтересовался данным вопросом, я настоятельно рекомендую почитать книгу «Реактивные Веб-Сайты» (скачать). Она более полно откроет вам глаза на данный вопрос.

Успешных оптимизаций!