Проверьте этот отчет по веб-оптимизации - как я могу это исправить?

Question

Привет, ребята. Я запустил анализатор на http://www.websiteoptimization.com/services/analyze/ и получил ряд проблем, наиболее значимыми из которых являются следующие:

---

TOTAL_OBJECTS - Внимание! Общее количество объектов на этой странице составляет 93, что по их количеству будет доминировать в задержке веб-страницы. Рассмотрите возможность уменьшения этого числа до более разумного. Более 20 объектов на страницу, накладные расходы на работу с реальными объектами (время описания и время ожидания) составляют более 80% всей задержки страницы. См. Рис. II-3. Относительное распределение компонентов задержки, показывающее, что накладные расходы на объекты доминируют над задержкой веб-страниц в секретах оптимизации веб-сайта, для получения дополнительной информации о том, как накладные расходы на объекты доминируют над задержкой веб-страниц. Объединяйте, улучшайте и оптимизируйте ваши внешние объекты. Замените графические ролловеры на CSS-ролловеры, чтобы ускорить отображение и минимизировать HTTP-запросы. Рассмотрите возможность использования CSS-спрайтов для консолидации декоративных изображений. Использование методов CSS, таких как цветной фон, границы или интервалы, вместо графических методов может уменьшить HTTP-запросы. Замените графические текстовые заголовки на текстовые заголовки CSS, чтобы еще больше сократить HTTP-запросы. Наконец, рассмотрите возможность оптимизации параллельной загрузки, используя разные имена хостов или CDN, чтобы уменьшить накладные расходы объекта.

TOTAL_IMAGES - Внимание! Общее количество изображений на этой странице составляет 85, рассмотрите возможность уменьшения этого числа до более разумного. Рекомендуем комбинировать, заменять и оптимизировать вашу графику. Замените графические меню ролловеров на меню CSS ролловеров, чтобы ускорить отображение и минимизировать HTTP-запросы. Рассмотрите возможность использования CSS-спрайтов для консолидации декоративных изображений. Используйте методы CSS, такие как цветной фон, границы или интервалы, вместо графических методов, чтобы уменьшить HTTP-запросы. Замените графические текстовые заголовки на текстовые заголовки CSS, чтобы еще больше сократить HTTP-запросы. Наконец, рассмотрите возможность оптимизации параллельной загрузки, используя разные имена хостов, чтобы уменьшить накладные расходы на объекты.

---

Проблема в том, что все 85 упомянутых изображений упоминаются в моем файле css - я не знаю, как, но я хотел бы уменьшить это число - однако мне все эти файлы требуются в какой-то момент на моем веб-сайте.

Любые идеи по дальнейшей оптимизации.

Кроме того, мой файл javascript имеет колоссальные 150 КБ даже после максимального сжатия - у меня закончились идеи по сокращению накладных расходов, и я мог бы подать в суд на некоторые советы.

Answer 1

Вы можете использовать CSS Sprites для изображений (например, ролловеры меню или значки). Это выгодно по двум причинам:

• Распространение изображений, общих для нескольких страниц, позволяет браузеру кэшировать изображение спрайта и, следовательно, уменьшает количество последующих загрузок на других страницах вашего сайта.
• Спрайтинг изображений снижает нагрузку на сервер за счет уменьшения количества запросов, отправляемых и получаемых сервером, поскольку многие изображения могут быть объединены в одно большее изображение.

Вы сказали, что ваш JavaScript сжат до максимума - однако все ли это нужно вашей странице? Или его можно разделить на несколько страниц? Кроме того, есть ли в вашем скрипте биты, которые не нужны или могут быть сокращены, например, с помощью функций-оболочек для задач, которые вы обычно выполняете в своих скриптах. Простым примером этого будет использование функции $ Prototype-esque вместо document.getElementById, которая при многократном вызове может значительно уменьшить размер вашего JavaScript.

Кроме того, как следует из отчета, используйте стилизованный текст вместо изображений, представляющих стилизованный текст, если и где это возможно (конечно, это применимо не во всех случаях).

Answer 2

Что касается вашего файла JS, вы можете удалить возврат каретки в вашей версии выпуска, «минимизировать» (изменить все внутренние переменные и методы на имена из 1 или 2 символов) и / или сжать его. JQuery использует эти методы; серийный выпуск составляет 19 тыс., а разрабатываемый выпуск - 120 тыс. - экономия более 80%.

Answer 3

Также посмотрите, какие у вас изображения. Обычно я вижу разные фоновые изображения для навигации - одно изображение говорит «Дом», другое - «О нас» и т. Д.

Вы можете объединить их в одно пустое фоновое изображение и написать текст сверху.

Answer 4

Вы можете нарезать свой CSS-файл на разные файлы, чтобы получить не так много изображений. То же самое для файлов JavaScript. Вы действительно нуждаетесь в этом 150K javascript на каждой странице? Сформируйте его в разные файлы и включите в него только то, что вам нужно.