Как правильно предварительно загрузить изображения, JS и CSS файлы?

Question

Я создаю веб-сайт с нуля, и я действительно заинтересовался этим в конце 90-х, но с тех пор сеть сильно изменилась! И я в большей степени дизайнер, поэтому, когда я начал собирать этот сайт, я сделал систему php-включений, чтобы сделать сайт более «динамичным»

При первом посещении сайта вы увидите экран входа в систему, если вы еще не вошли в систему (файлы cookie). Если вы не вошли в систему, появится страница с именем access.php. Я думал, что предварительно загружу самые тяжелые изображения на этом этапе. Так что, когда пользователь завершает вход в систему, изображения уже кэшируются. И это работает, как я хочу. Но я все еще замечаю, что самое большое изображение все равно не отображается сразу. Так что это кажется бессмысленным.

Все это заставило меня переосмыслить структуру сайта и загрузить скрипты и CSS-файлы. Используя FireBug и YSlow с Firefox, я вижу несколько указателей, таких как заголовки expires и уменьшение размера каждого скрипта. Но действительно ли это виновник?

Например, было бы действительно глупо в основном index.php? Весь сайт в основном структурирован так

<?php
require("dbconnect.php");
?>

<?php
include ("head.php");
?>

И ниже это в основном только тело и содержание сайта. Однако Head.php состоит из doctype, частей head, связывания двух таблиц стилей CSS, библиотеки jQuery, механизма проверки jQuery, файла шрифтов Cufon и Cufon, а затем небольшого фрагмента Cufon.Replace.

Остальная часть тела поставляется с файлом index.php, но в нижней части этого раздела снова содержится файл с именем "footer.php", который в основном состоит из загрузки нескольких сценариев jsLoader и слайдпанели и тогда функция JS. Все это делает исходный код конечной страницы похожим на типичную полную веб-страницу, но мне интересно, может ли кто-нибудь из вас сразу увидеть, что «это действительно очень глупо» и «не делайте этого, делайте это вместо этого» и т. Д. ) Есть ли плохой путь?

Этот сайт также довольно интенсивно использует изображения, и я, вероятно, могу немного оптимизировать его. Но я не думаю, что это основной виновник. YSlow дает мне отчет о том, что занимает больше всего места:

doc(1) - 5.8K
js(5) - 198.7K
css(2) - 5.6K
cssimage(8) - 634.7K
image(6) - 110.8K

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

Answer 1

Чтобы немного ускорить процесс, вы можете собрать все свои изображения в одном спрайте изображений, чтобы у вас был только 1 запрос на загрузку всех изображений. Но это требует от вас точной настройки CSS, чтобы позволить отображать только небольшое подмножество вашего изображения. Чтобы получить лучшее объяснение, посмотрите: http://css -tricks.com / css-sprites /

Еще один ответ, который может показаться немного глупым, но мне нравится думать об этом, когда я создаю веб-сайт: «Просто будь проще». Я имею в виду, что все ваши JS добавляют реальную ценность, все ли эти изображения в порядке, вы могли бы показать меньше, сделать более легкий дизайн? Я вообще не критикую вашу работу, просто предлагаю вам ...

Answer 2

Я использовал следующий подход в проекте экстрасети:

Используя jQuery и массив имен файлов, я добавляю ajax во все изображения, файлы .js и .css, чтобы они предварительно загружались в кэш. Выполняя итерацию по массиву, я обновляю индикатор прогресса на экране, который указывает, что сайт загружается - очень похоже на флеш-загрузчик.

Хорошо сработало.

Answer 3

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

Комбинация файлов может быть ключом к быстрому веб-сайту, каждый дополнительный файл будет увеличивать время загрузки, в худшем случае из-за задержки сети и сервера вы можете добавить до второго дополнительного для каждого отдельного файла. Чаще всего это будет около 100 - 200 миллисекунд на файл.

Если вы еще не минимизированы, сверните сценарии и поместите их в один и тот же файл, просто не забывайте соблюдать порядок. Понятия не имею, почему Иво Сабев не включил jQuery.

То же самое с файлами CSS.

Сколько вы сделали для тестирования сжатия изображений? В действительности можно получить выгоду от опробования различных настроек сжатия и сравнения размера и качества. Для изображений PNG IrfanView с PNGOUT часто может сделать файлы на 25% меньше, чем другие программы, кроме того, очень большое уменьшение размера может быть достигнуто за счет уменьшения изображения до 8-битного цвета с большим количеством графических элементов, которые вы можете просто не говорите разницу. Прямо здесь, в Stack Overflow, есть отличный пример хорошо сжатых и сложенных изображений в кнопках управления редактора: http://sstatic.net/so/Img/wmd-buttons.png

Answer 4

Что я сделаю, так это покажу по умолчанию страницу загрузки с чистым CSS и HTML, затем дождусь, пока jQuery загрузит и предварительно загрузит изображения с помощью ImageLoader . Как только вы закончите, перенаправьте на обычный веб-сайт, так как изображения будут уже в кеше, они больше не будут загружаться.

Другая оптимизация, которую вы можете сделать, - минимизировать все файлы JS и объединить все, кроме jquery.js. Поместите jquery.js первым в ваш HTML, чтобы он загружался первым. Также поместите теги SCRIPT внизу HTML.