Ответ 1
При работе с производительностью страниц существует несколько важных способов ускорить время загрузки страницы.
Организация CSS
Попробуйте минимизировать встроенные стили CSS и совместно использовать общие правила CSS во внешних таблицах стилей. Это помогает сохранить многоразовые стили позже, а отсутствие атрибутов стиля ускоряет загрузку HTML-страницы.
минификация
Так как ваши CSS и Javascript включены, вы должны быть загружены с вашего сервера клиенту, меньше всегда лучше. У Yahoo есть отличный инструмент под названием YUI Compressor, который можно использовать для уменьшения размера вашего CSS и JavaScript. В популярных библиотеках, таких как JQuery, также будут доступны как мини-версии, так и версии их библиотек. Не забудьте сохранить копию неминифицированной версии для целей отладки!
Сжатие изображения
Возможно, вы захотите рассмотреть возможность сжатия изображений. Для файлов JPG попробуйте настроить сжатие на 80% и посмотреть, как выглядит результат. Вы можете играть с уровнями, пока не получите достойный результат. Для файлов PNG вы можете посмотреть некоторые из доступных инструментов сжатия PNG.
CSS Sprites
Интересной тактикой в сохранении HTTP-запросов является использование CSS Sprites. Базовая теория вместо загрузки нескольких изображений просто загружает одно большое изображение со всеми вашими изображениями, содержащимися в нем. Это означает, что вместо непрерывных запросов к файлам изображений браузер просто должен сделать один запрос. Учебник CSS Sprites: что они, почему Theyre Cool и как их использовать содержит некоторую полезную информацию о процессе, в том числе о том, как конвертировать из существующий макет с несколькими изображениями.
Заказ ресурсов
Когда дело доходит до заказа CSS и Javascript, вы хотите, чтобы ваш CSS был первым. Причина в том, что поток рендеринга имеет всю информацию о стиле, необходимую для отображения страницы. Если включить Javascript, сначала нужно обработать Javascript, прежде чем перейти к следующему набору ресурсов. Это означает, что поток рендеринга не может полностью показать страницу, так как он не имеет всех стилей, в которых он нуждается. Вот пример:
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
<script type="text/javascript" src="/js/formvalidation.js"></script>
Отслеживание/партнерская связь Script Местоположение
Многие сайты используют отслеживание и/или партнерские скрипты. Если с удаленным хостом возникла проблема, и скрипты включены в тег <head>, браузер должен дождаться загрузки, прежде чем двигаться дальше. Хотя такие вещи приятно иметь, они не должны замедлять работу пользователя. Рекомендуется переместить такие скрипты в нижней части страницы непосредственно перед тегом </body>:
<!-- HTML Here -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
Отсутствующие активы
Отсутствие файлов CSS и javascript означает, что браузер не должен обмениваться данными с сервером, чтобы захватить файлы, которые не существуют. В зависимости от того, где находится сервер и сколько файлов отсутствует, это может привести к замедлению загрузки страниц.