Чем больше ресурсов ваш браузер запрашивает у сервера, тем больше запросов надо обработать серверу, и тем дольше грузятся страницы. Удачной стратегией снижения скорости загрузки страницы является уменьшение количества запросов. Это означает меньше изображений, меньше файлов JavaScript, меньше используемых инструментов веб-аналитики и т.д. Главная страница выглядит по-спартански не просто так: она загружает очень немного ресурсов и потому грузится очень и очень быстро.
Хотя соблюдение принципа «чем меньше, тем лучше» должно быть целью, понятно, что это не всегда возможно. Поэтому вот несколько дополнительных стратегий:
Разрешите кэширование браузером. Если ресурсы страницы меняются не очень часто, нет причин, по которым нужно каждый раз заново их загружать с сервера. Пусть администратор включит кэширование для изображений, JS и CSS. Если вы не знаете, включено ли на вашем сервере кэширование, протестируйте страницу сайта на redbot.org посмотрите на заголовок Expires или Cache-Control: max-age на странице с результатом.
Cache-Control — более новый способ кэширования, а Expires используется сейчас преимущественно для поддержки старых версий браузеров.
Хотя кэширование на стороне браузера не ускорит первую загрузку страницы, оно даст огромное преимущество при повторной загрузке, часто экономя до 70 и более процентов времени. Это хорошо видно в результатах тестирования на WebPageTest, поскольку этот инструмент меряет как первую, так и повторную загрузку указанной страницы.
Объединяйте связанные файлы CSS и JS. Поддерживать отдельные файлы CSS и JS для разработчика проще, но конечному пользователю важно, чтобы сайт грузился быстрее, а значит и файлов с сервера должно скачиваться меньше. Если вы редко меняете эти файлы, вам может помочь их единоразовое объединение. Если же файлы меняются часто, при выкладывании обновлённой версии на рабочий сервер можно объединять связанные файлы автоматически. У каждого из этих подходов есть свои плюсы и минусы, рекомендуем почитать вот этот тред на StackOverflow.
Объединяйте маленькие изображения в спрайты CSS. Если на вашем сайте используется много маленьких изображений (кнопок, иконок и т.д.), вы можете существенно увеличить скорость загрузки, объединив их в один файл, называемый спрайтом. В этом случае браузер скачает всего один файл (сделав один запрос), а затем «вырежет» из него нужные фрагменты. Подробнее об этом приёме вы можете узнать из статьи "CSS Image Sprites" на, а бесплатный инструмент создания CSS-спрайтов есть на SpriteMe.
|