Как оптимизировать код и повысить скорость загрузки сайта

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

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

При обращении к любой странице в сети Интернет браузер в первую очередь получает ip адрес сайта, к которому планирует обратиться. Получение ip адреса происходит через запрос к службе DNS. После получения ip адреса браузер обращается по данному ip по 80 порту (если не указано иное). Все это элементарно проверить, используя любой низкоуровневый сниффер, например, Wireshark.

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

После получения кода страницы браузер начинает парсить (разбирать) HTML код страницы, подгружая элементы, указанные в коде страницы (стили, скрипты, картинки). Надо понимать, что для каждого подгружаемого элемента браузером формируется отдельный запрос к серверу. В этом так же легко убедиться используя низкоуровневый сниффер или HTTP сниффер, например дополнение к Firefox – Просмотр HTTP заголовков.

Понимая суть процесса, мы уже можем воздействовать на скорость времени загрузки страницы. Итак, основные методы уменьшения времени загрузки страницы:

• Сокращение количества запросов к серверу, в том числе путем объединения графических файлов (метод спрайтов) и путем объединения css и js файлов, о чем было написано ранее.
• Сокращение размера кода страницы, об этом мною так же было написано ранее.
• Сокращение размера графических файлов. Каждый графический файл содержит избыточную информацию и/или закодирован с избыточным качеством изображения. Существует ряд программ и онлайн сервисов, которые позволяют удалить лишнюю информацию из графических файлов. Например я использую SmashIt и RIOT, о котором уже писал ранее. На практике размер некоторых файлов удается уменьшить на 90% от исходного.
• Использование CDN (Content Delivery Network), т.е. сетей распространения контента, когда компьютер подгружает контент с ближайшего по расстоянию к нему сервера. Данный вид ускорения сайта используется как правило при наличии большого количества мультимедийного контента, однако есть некоторые сервисы позволяют распространять не только мультимедийный контент, например можно подгружать jquery библиотеку через Google CDN, используя конструкцию:.

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