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

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

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

Выводы:

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

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

Тоже самое с css-ом. Если общий размер файла css 50 килобайт, то стоит разбить на части примерно так: часть для загрузки основного дизайна, часть для такого-то раздела итд.

Не стоит усердствовать и поступать так, как делает битрикс со своими “компонентами 2.0″, где у каждой мелкой формочки или еще чего-то свой файл css с двумя строчками. Хотя тут возникает здравая мысль: на кучу файлов css разбить можно, но надо написать php-скрипт, который будет их склеивать и присалать пользователю одним файлом. Но если подумать чуть дальше, то получается, что пользвателю все-равно должно присылаться 2 файлв: основной дизаин сайта (который уже закэшировался) и css для текущего раздела.

Теперь отдельно о jquery. Все немножко сложнее чем с css, так как есть 3 типа файлов: файл движка, файлы плагинов и файлы скриптов, работающих с плагинами.

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

Плагины разные: есть те, которые используются на всем сайте (например меню у вас навороченное), есть те, которые нужны в нескольких разделах и тек, которые нужны на одной странице. Если подумать:

  • все, что для всего сайта - в 1 файл, в любом случае пользователю это качать придется
  • все, что для разделов - отдельными файлами
  • все, что для страниц - тоже отдельными файлами или прямо в код страницы (размер кода страницы увеличиваем, но +- 1 килобайт на фоне 10 погоды не сделает)

Файлы для работы с плагинами - по идее так же как описано выше.

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

Работа с cookies “на лету”. С cookies воплне можно работать яваскриптами. Не стоит дяже при ajax-е заставлять сервер ставить пользователю cookies - для него это лишняя операция, а браузер пользователя вполне может сам все сделать.

GZIP. Html, Javascript и Css можно сжать и отправлять пользователю архивы, вместо реальних файлов, если его браузер умеет с этим работать. Настроить можно через htaccess.