Osfonder's blog Just another wd weblog

1Май/101

Способы ускорения загрузки страницы часть 1

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

В первой части:

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

Как говорилось в вышеуказанном посте для каждого внешнего файла, будь то JS скрипт, CSS стиль или фоновая картинка, устанавливается новое HTTP соединение, влекущее за собой затратные по времени процедуры.
Решение очевидно, нужно уменьшать до минимума количество таких запросов.

JavaScript файлы

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

Сжать несколько файлов в один, убрав лишние символы можно просто. Приведу один из инструментов, на который жаловаться не приходилось.
Это продукт от google — google closure compiler. Проще всего его использовать online (если размер файлов не превышает допустимых пределов), но можно использовать и стэндалон в виде java приложения у себя на компьютере.
Есть еще вариант который раньше очень был распространен dean edwards packer.

CSS стили

Тут абсолютно тот же способ, что и с js файлами — на этапе разработки разделяй и властвуй, но на "продакшн", где возможно, объединяй в один файл. CleanCSS в помощь.

Графические файлы

Тут есть два способа по уменьшению количества запросов.

1. Это т.н. технология спрайтов. Для всех не повторяющихся(no-repeat) изображений, используемых в дизайне мы создаем один, только один графический файл, куда помещаем их все, без зазора. В при указании бэкграунда, для элементов используем этот файл, устанавливая нужный фрагмент большого файла на фон позиционированием.
Для всех градиентов и прочего, что требует репита создается другой файл, шириной один пиксель. И опять же нужный фрагмент выбирается позиционированием.
Вот пример. Спрайт используемый на фэйсбуке (7.5 Кб)

2. Все небольшие изображения, вроде значков 8x8 пикселов и т.п. прописываются прямо в CSS или src изображения в виде base64 кодирования текста. Сложно? вот пример:


или для CSS:


Особенно такой способ в почете у однопиксельных градиентов.
Кодировщик (один из)

Посты по теме

  1. Разработка сайтов: Процесс загрузки страницы
  2. Способы ускорения загрузки страницы часть 2
  3. Способы ускорения загрузки страницы часть 3
Комментарии (1) Пинги (0)
  1. Блог интересный, добавил в закладки.


Оставить комментарий


Нет обратных ссылок на эту запись.