Когда дело доходит до того, чтобы сделать ваш сайт ослепительно быстрым, есть ряд шагов, которые вы можете предпринять. Эти шаги можно разделить на две категории: внешняя и внутренняя оптимизация. Несмотря на важность, бэкэнд-работа, как правило, дает менее заметные результаты для среднего сайта (за исключением, конечно, очень больших сайтов с высоким трафиком, где каждая миллисекунда считается). В этом посте мы рассмотрим общие проблемы, возникающие при работе в сети; в последующих публикациях мы сосредоточимся на некоторых простых шагах, которые могут сделать ваш сайт заметно быстрее.
Природа запросов
Веб-страница будет делать много запросов. Первый — для HTML страницы, которую вы просматриваете. Исходя из этого, ваш браузер будет запрашивать больше ресурсов для отображения страницы. Один запрос имеет две фазы: ваш браузер запрашивает файл — будь то изображение, файл CSS или файл JavaScript — и ждет ответа; затем он загружает то, что отправляет браузер. Таким образом, можно сделать две оптимизации: уменьшив количество запросов, вы уменьшите время, которое браузер тратит на ожидание ответа от сервера; и, ограничивая размеры файлов запрашиваемых объектов, ваш браузер загружает меньше информации для отображения страницы.
Допустим, у вас есть веб-страница с двумя таблицами стилей, файл библиотеки jQuery, другой файл JavaScript с вашими скриптами и четыре изображения. Это восемь запросов на отображение вашего контента (в дополнение к HTML). Вы можете подумать, что ваш браузер достаточно быстр, чтобы вам не пришлось об этом беспокоиться.
Неправильно.
Здесь есть два фактора. Во-первых, есть параллелизм . Ваш браузер может делать только ограниченное количество запросов одновременно, поэтому, пока не откроется свободный слот, все остальные объекты в очереди на загрузку просто должны ждать. Internet Explorer и Firefox имеют диапазон от двух до шести одновременных подключений (в зависимости от скорости сети для IE и версии браузера для Firefox), и существует четыре одновременных подключения для Safari, Chrome и Opera.
Во-вторых, есть задержка . Это, к сожалению, убийца. Нередко время задержки составляет две или триста миллисекунд (от трети до половины секунды или более, в зависимости от сервера), когда сервер бездействует, прежде чем он начнет что-либо загружать.
Что мы можем сделать, чтобы помочь этому? Ну, есть несколько вещей, которые мы можем попробовать:
Сокращение запросов
Уменьшая количество загружаемых элементов, браузер может быстрее визуализировать страницу, поэтому конечному пользователю она кажется быстрее. Основной причиной многочисленных запросов являются множественные файлы CSS, файлы JavaScript и изображения. К счастью, есть подходы и методы для обработки всех трех.
Объединение CSS и JavaScript
Сокращая количество файлов CSS и JavaScript, мы можем сделать огромные улучшения. Самый простой способ — объединить их, то есть свернуть в как можно меньше файлов.
CSS, как правило, гораздо проще свернуть в один или два файла, так как он обычно подается из того же места, что и ваш сайт. Перемещая содержимое в один файл, вы экономите значительное время ожидания.
JavaScript обычно будет состоять из нескольких файлов (при условии, что вы используете библиотечную среду и некоторые сценарии). Объединяя файлы там, где это имеет смысл, вы ускоряете свою страницу. (Лично я считаю правильным иметь один или два библиотечных файла и один файл для моего кода.) Обслуживание рекламы, использование инструментов Google Карт и некоторых инструментов JavaScript добавит дополнительные запросы, а файлы JavaScript, как правило, не доставляются из ваш сервер, вы не можете многое сделать для них. Я думаю, что это хорошо, чтобы принять небольшой удар скорости в обмен на выгоду, которую приносит файл, такой как показ рекламы или карт.
Спрайты изображений
Спрайты изображений возникли в ранних компьютерных играх, где пространство — как по размеру файла, так и по памяти — было ограничено. По сути, спрайты — это несколько изображений, объединенных в одно изображение.
В Интернете CSS контролирует, какое изображение в спрайте должно отображаться (фоновый стиль CSS). Эта техника широко используется, и некоторые крупные сайты (Yahoo, Amazon, Google) идут на все, чтобы выжать из нее каждую миллисекунду производительности.
Обычно на вашем сайте есть несколько спрайтов, так как не каждое изображение должно быть сгруппировано; фоны могут требовать разных макетов спрайтов (изображения, которые повторяются по вертикали, должны храниться вместе, и одинаковые для повторяющихся по горизонтали), в то время как значки, как правило, проще всего управлять, когда они все расположены вместе.
Вывод
В следующих нескольких статьях я подробно расскажу о том, как планировать и работать с использованием кода с учетом оптимизации. Эти шаги также удобны для ускорения работы установленных сайтов, поэтому стоит их проверить.