Советы по быстрой обработке статических файлов, таких как JavaScripts, CSS и изображения

Question

Я хотел бы получить от наших пользователей SO несколько советов по размещению статических файлов на веб-сайте & mdash; как JavaScript, CSS, изображения и файлы Flash & mdash; Быстрее. Любые полезные советы?

Answer 1

Лучший совет, который я могу вам дать: купить Книга Стива Саундерса Высокопроизводительные веб-сайты , которая полна простых советов.В отношении статических изображений: используйте сеть доставки контента (CDN), что означает: просто поместите свой статический контент на другой сервер, в другой (суб) домен, и вы получите лучшую производительность, которую вы можете иметь для статического контента.

Преимущества: никакие файлы cookie не отправляются туда-сюда (это приводит к большим накладным расходам!), Никакие другие HTTP-издержки, хорошие тайм-ауты, стабильная производительность при использовании внешнего CDN и вашего собственного сервера значительно снижают трафик.Существует много коммерческих (например, Amazon S3), но также бесплатных поставщиков CDN.

Несколько менее важных, но все же ценных советов:

• минимизируйте ваш JavaScript (ускоряет только первую загрузку);
• объедините ваши JavaScripts и CSS-файлы в один и;
• используйте CSS-спрайты для ваших (меньших) изображений.

ПримечаниеStackOverflow - это прекрасный пример веб-сайта, который следует всем этим советам и загружает YSlow для проверки собственного веб-сайта.

Answer 2

Ознакомьтесь с предложениями Yahoo по http://developer.yahoo.com/yslow/ и http://developer.yahoo.com/performance/rules.html. Некоторые общие замечания:

1. Использовать CDN для статических файлов (и отключить куки в домене CDN)
2. Убедитесь, что размеры изображения оптимизированы
3. Сократите ваши файлы JS
4. Поместите теги SCRIPT внизу HTML-кода и по возможности используйте атрибут defer = (это ускоряет загрузку страницы браузером)

Answer 3

Использование сети доставки контента - CDN - для статического контента.

В качестве альтернативы вы можете создать поддомен, т.е. gfx.yoursite.com, для размещения всего вашего статического контента.Отключите файлы cookie и оптимизируйте производительность сайта с помощью агрессивного кэширования.

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

Чтобы уменьшить количество внешних ресурсовна странице вы также можете вставлять небольшие изображения непосредственно в файлы CSS, используя кодировку base 64.Это сократит количество поисков DNS и улучшит производительность.Тем не менее, это добавляет немало сложности, и техническое обслуживание быстро становится кошмаром.Это отличный инструмент, чтобы помочь вам, Конвертировать любое изображение в строку base64 , но будьте осторожны.:)