Что я могу сделать, чтобы уменьшить время загрузки HTML-страниц?

Примечание. Это должно быть публикация wiki сообщества.

Чтобы максимально эффективно использовать пользовательский интерфейс, что я могу сделать, чтобы повысить эффективность моих HTML-страниц?

ОТВЕТЫ

Ответ 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 означает, что браузер не должен обмениваться данными с сервером, чтобы захватить файлы, которые не существуют. В зависимости от того, где находится сервер и сколько файлов отсутствует, это может привести к замедлению загрузки страниц.

Ответ 3

Чтобы начать, вы должны использовать такой инструмент, как YSlow (доступны Firefox и Chrome) или Googe Page Speed ​​Online. Есть и другие, я уверен. Эти инструменты оценят производительность ваших сайтов в разных областях и предоставят советы о том, как вы можете их улучшить.

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

Вы также можете посмотреть загрузчики async script для ваших файлов JavaScript. Популярным является head.js. Поиск в Google должен дать вам больше статей о более глубоких методах, таких как это.

Ответ 5

используйте функцию флеша PHP после тега заголовка

<html>
<head>
</head>
<?php flush(); ?>
<body>
</body>
<html>

Ответ 6

HTML5-шаблон позволит вам далеко ходить без пота.