Оптимизация для сокращения времени загрузки веб-сайта

Каковы некоторые важные оптимизации, которые могут быть сделаны на веб-сайте, чтобы сократить время загрузки?

Удалите / Минимизируйте все узкие места на стороне сервера. Для этого используйте профилировщик, например Xdebug или Zend Debugger, чтобы узнать, где ваше приложение выполняет дорогостоящие и медленные операции. Реализуйте кеширование, где это возможно. Используйте кеш OpCode. Если это еще не достаточно быстро, подумайте о том, чтобы инвестировать в большее количество CPU или RAM или SSD (в зависимости от того, являетесь ли вы процессором, IO или памятью)

Для общих оптимизаций на стороне сервера / клиента см. Yahoo YSlow! Руководство пользователя .

Это в основном суммирует его до:

  1. Минимизировать HTTP-запросы
  2. Использовать сеть доставки контента
  3. Добавить истечение срока действия или заголовок кэша
  4. Компоненты Gzip
  5. Положите StyleSheets наверху
  6. Поместите скрипты в нижнюю часть
  7. Избегайте выражений CSS
  8. Сделать JavaScript и CSS внешними
  9. Уменьшить DNS-запросы
  10. Минимизировать JavaScript и CSS
  11. Избегайте переадресации
  12. Удаление повторяющихся скриптов
  13. Настройка ETags
  14. Сделайте AJAX Cacheable
  15. Использовать GET для запросов AJAX
  16. Уменьшить количество элементов DOM
  17. Нет 404s
  18. Уменьшить размер файла cookie
  19. Использовать неактивные домены для компонентов
  20. Избегайте фильтров
  21. Не масштабировать изображения в HTML
  22. Сделать favicon.ico Маленьким и Cacheable

Также см. Комментарии ниже, так как они содержат дополнительную полезную информацию для других пользователей.

Прежде чем приступать к какой-либо оптимизации, сначала вам нужно иметь профиль, получить FireBug для Firefox. Затем вы можете запустить некоторый анализ, который точно скажет вам, что делать, используя YSlow . Здесь перечислены основные вещи, которые вы должны сделать.

определенно хотят посмотреть на кеширование, поскольку круглые поездки в БД дороги. также, минимизировать JS

Вот несколько примеров «лучшей практики»:

  • Кэширование CSS, JavaScript, изображений и т. Д.
  • Минимизация файлов Javascript.
  • gzip.
  • По возможности поместите ссылки на файлы JavaScript, код JavaScript и ссылки на файлы CSS внизу страницы.
  • Загружайте только то, что необходимо.
  • Для существующего веб-сайта перед тем, как вы это сделаете, определите, где ваши узкие места с такими инструментами, как Firebug, и как кто-то упомянул YSlow (я настоятельно рекомендую этот инструмент).

установить плагин firebug и pagespeed, следуя всем директивам pagespeed (пока это возможно) и быть счастливым http://code.google.com/intl/it/speed/page-speed/

в любом случае самая важная оптимизация в моем опыте – это сократить количество HTTP-запросов до минимума …

Простые варианты, о которых я могу думать, это:

  1. Gzip (x) html, поэтому сжатый файл должен прибыть быстрее пользователю
  2. минимизировать CSS
  3. минимизировать JS
  4. использовать кеширование, где это возможно
  5. использовать сеть доставки контента
  6. используйте инструмент, например yslow, чтобы определить узкие места и дополнительные предложения

Есть две стороны, о которых вы можете заботиться, при оптимизации:

  • Серверная сторона: важно, чтобы генерировать вывод быстрее
  • Клиентская сторона: важно, чтобы все, что должно отображаться быстрее.

Примечание: мы, как разработчики, часто думаем об оптимизации серверной стороны … В большинстве случаев это составляет менее 10% от времени загрузки страницы!

На стороне сервера вы обычно хотите:

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

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

На стороне клиента наибольшие достижения обычно достигаются за счет:

  • Сокращение количества HTTP-запросов – самый простой способ сократить количество файлов JS / CSS / изображений, объединив несколько файлов в один
  • Сжатие CSS / JS / HTML, используя, например, mod_deflate Apache.

О том, что на Исключительной производительности Yahoo есть много отличного материала: они выпустили множество хороших оценок и инструментов, таких как yslow .

Мы недавно сделали это на нашем веб-сайте. Здесь мы изложили девять методов, которые, казалось, имели наивысший эффект с наименьшими трудностями: http://mentormate.com/blog/easy-ways-speed-website-load-time/

Первая оптимизация: решить, медленно ли она, а если нет, не беспокойтесь.

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

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

То же самое возможно не для многих пользователей.

Поэтому существуют следующие варианты:

  • Узнайте, спрашивая у ваших пользователей, найдут ли они, что они медленные
  • Имитируйте среду с высокой задержкой и протестируйте ее самостоятельно (или вашу команду QA)
  • Догадки

Последнее не рекомендуется.

Вариант, в котором книга эффективности хостинга «Сайтер-Сай» (да, это книга, которую вы можете купить) не упоминает много, это HTTPS. Большинство веб-приложений, которые обрабатывают важные данные, работают в основном или полностью по HTTPS, что значительно изменяет правила игры. Не забудьте сделать все тестирование с включенным.

я написал кое-что о, см .:

Оптимизация скорости страницы в Google

Как уже упоминалось, вы можете использовать расширение Yslow или PageSpeed ​​firefox. Но вы также можете использовать GTmetrix , онлайн-сервис, сканирующий вашу страницу с помощью обоих инструментов.

Особенности, которые мне нравятся / используют:

  • мягкое, чистое и удобное представление
  • сравнение с другой страницей. Очень интересно посмотреть, где ваши друзья / конкуренты.

(кстати, я не связан с gtmetrix!)

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

Тем не менее, первый шаг – фактически проанализировать, что принимает все время – независимо от того, отправляет ли бит по сети или фактически генерирует отправляемый контент. Нет смысла делать ваши файлы CSS на 10% меньше, если для создания каждой HTML-страницы требуется минута.

Не используйте пробелы в коде.

Балансировка нагрузки поможет сократить время загрузки.