Советы вебмастеру по повышению технической эффективности веб-сайта и инструменты

перевод статьи из блога SUN.COM

Советы по повышению эффективности веб-сайта

• Делайте меньше HTTP-запросов
  • сократите количество компонентов на странице, CSS объедините в одну таблицу стилей, JS - в один сценарий
• Используйте распределённые сети для хранения и доставки контента
  • такие как Akamai Technologies, зеркала сайта , либо Limelight Networks.
• Добавьте заголовок Expires
  • Для статических компонентов сайта данных укажите, когда в будущем истекает его актуальность
  • для динамического контента используйте заголовок Cache-Control
• Используйте GZIP
  • он уменьшает время отклика за счет уменьшения размера ответа HTTP.
• Положите CSS в самом верху страницы
  • это позволит браузеру отображать содержание станицы как можно скорее.
• Положите скрипты в самом конце страницы
  • ранняя их трансляция замедляет рендеринг страницы
• Избегайте CSS выражения для динамических свойств
  • они могут быть оценен в тысячи раз и может влиять на производительность вашей странице.
• Сделайте JS и CSS внешними файлами
  • Если несколько страниц будут повторно использовать эти же сценарии и таблицы стилей положите их отдельными файлами, поскольку файлы кэшируются браузером.
• Уменьшите поиск в DNS
  • Сократите число уникальных имён хостов, используемых на странице - изображения, файлы сценариев, таблицы стилей .. Это сокращает число поисков DNS, но и уменьшает количество параллельных загрузок. Пусть их будет по меньшей мере 2, но не более 4 хостов.
• сократите размер JavaScript
  • Удалите ненужные символы из кода для уменьшения его размера: удалить пробел, комментарии ...
  • Два наиболее популярных инструментов для сжатия JavaScript кода: JSMin и YUI Compressor.
• Избегайте Redirect страницы
  • redirect - медленный способ, используйте Alias и mod_rewrite - они быстрее
• Удалите дубликаты скриптов
• Настройка ETags
  • ETag является строкой, которая однозначно идентифицирует конкретную версию контента или компонента страницы. Используется в условных GET запросах, при этом браузер использует If-None-Match заголовки. Когда используется ETags и возвращается 304 Код статуса то ответ сокращается до только заголовка.
• Оптимизируйте изображения для уменьшения их размера
• Уменьшите размер Cookie
  • Информация coockies, которой они обмениваются в заголовке HTTP между веб -серверами и браузерами. Храните размер coockies как можно меньшими, чтобы свести к минимуму его влияние на время ответа.
• Избегайте ошибки 404
• JavaScript:
  • Сделайте AJAX ответ кэширующимся, добавьте заголовок Cache-Control.
  • Создайте эффективный JS
  • сократите количество DOM элементов
  • Сделайте количество сообщений между сервером и браузером как можно меньше
  • Не переписывайте серверное приложений в JavaScript (как я понимаю - речь идёт о том, что не нужно производить тяжёлые вычисления, рассчитанные на быстродействие серверных языков не предназначенным для таких вычислений JavaScript-ом )
• Генерируйте содержимое только при изменениях
  • разделите систему на компоненты, так чтобы вы могли отделить компоненты, которые быстро изменяются от тех, чьё изменение нечасто.

Используйте инструменты для того чтобы узнать, что исправить

• HttpWatch
  • HttpWatch - это программа предназначеная для просмотра HTTP и отладчик, который интегрируется с IE и Firefox, чтобы обеспечить бесшовный ( так в оригинале - прим перев .) HTTP и HTTPS мониторинг
• Firebug
  • С Firebug можно редактировать, отлаживать и контролировать CSS, HTML, JavaScript живьём в любой веб -странице.
• Fiddler
  • Fiddler является отладочным веб прокси, который регистрирует весь HTTP (S) трафик между вашим компьютером и Интернетом.
• Анализатор сетевых протоколов:
  • http://www.ethereal.com/
  • http://www.wireshark.org/

Ещё инструменты

YSlow

• YSlow анализирует веб-страницы, и предлагает пути совершенствования их работы на основе неких правил для высокой производительности веб-страниц. YSlow является Add-ном Firefox, интегрирован с инструментом Firebug. YSlow оценивает веб-страницы на основе одного из трех предопределенных набор правил или определенный пользователем набор правил. YSlow даёт предложения по улучшению производительности страницы, анализирует компоненты страницы, отображает статистику о странице, а также предоставляет инструменты для анализа производительности.

Page Speed http://code.google.com/speed/page-speed/

• Веб-мастера и веб-разработчики могут использовать Page Speed

Pagetest

• Pagetest получает адрес веб-страницы для проверки Испытания будут проводиться в месте, указанном и Вам будет предоставлен график работы загрузки вашей страницы, а также сравнения с оптимизацией перечень.

Visual Round Trip Analyzer

• Мелкософтовский визуализатор производительности и анализатор

neXpert Performance Tool

• neXpert является дополнением к Web Debugger Fiddler, который помогает в выполнении тестирования веб приложений. neXpert является аддоном Fiddler , для сокращения времени, необходимого для поиска проблем с производительностью и выработки действий, которые могут осуществляться разработчиками

MSFast

• MSFast является плагином для браузеров , он помогает разработчикам улучшить производительность своего кода, фиксируя и измерения возможные узкие места на своих веб-страницах.