Кэширование вывода HTML - PullRequest
2 голосов
/ 26 июля 2011

Я почти уверен, что уже знаю ответ на этот вопрос, но мне интересно посмотреть, есть ли у кого-нибудь другие идеи. Мы работаем над веб-сайтом, чтобы включить крупный редизайн с мега-меню. Одна из моих главных целей в редизайне - максимально сократить время загрузки страницы. Все мои изображения, CSS и Javascript кэшируются, и это хорошо. Тем не менее, часть, которую я пытаюсь проработать, это html-кодирование меню, и если есть способ локально кешировать это в пределах разумного.

В качестве примечания, я хотел бы сделать все как можно более чистым CSS (для SEO), и это включало бы вывод мега-меню непосредственно на HTML-страницу. Но в то же время я знаю, что если странице потребуется несколько секунд, чтобы загрузить html-контент вверху, ну, тогда, вероятно, у нас тоже будут некоторые клиенты. Возможно, лучше всего было бы, чтобы JavaScript выводил меню, но затем вы столкнетесь с парой клиентов, у которых не включен Javascript.

Сейчас на страницах меню около 30 КБ, и я ожидаю, что это удвоение и, возможно, больше, когда мы сделаем редизайн.

Есть ли у вас какие-либо мысли по этому вопросу? Что бы вы назвали лучшим способом решения этой проблемы?

Спасибо !!

JMax

Ответы [ 2 ]

2 голосов
/ 26 июля 2011

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

У меня есть подобное приложение с меню, которое сейчас, вероятно, вдвое больше ... позвольте мне добавить, это не по выбору, это то, что я унаследовал и должен поддерживать в настоящее время.Меню выводится просто в неупорядоченном списке, а затем я использую Superfish и CSS, чтобы выполнить стилизацию по мере необходимости.Первоначальный хит есть, но после этого начинается кэширование, и мы готовы к работе.Несмотря на сумасшествие, нагрузка не слишком высока.Навигация по нему, однако, беспорядок.Я настоятельно рекомендую не путать чертовски многообещающий выбор вашего пользователя, особенно в мегаменю, которое может стать препятствием для пользовательского интерфейса для инвалидов и пожилых пользователей.Когда вы сводите это к минимуму, вся основа «движения Web 2.0» (я ненавижу этот термин) состоит в том, чтобы минимизировать или скрыть сложность.

Если вы действительно обеспокоены производительностью, начните с того, что выперегрузка.Ограничьте свой Javascript, комбинируя файлы, особенно те небольшие файлы Jquery, которые имеют тенденцию складываться.HTTP-запросы могут серьезно повлиять на сайт, тем более что они изначально монополизируют нагрузки.Точно так же объединяйте небольшие CSS-файлы и оптимизируйте все остальное с помощью онлайн-инструмента . Чтобы уменьшить загрузку изображений, создайте спрайты для своей графики, чтобы вы загружали один файл вместо многих. Вот параграф о спрайтах , и простой поиск в Google предоставит вам десятки сайтов, которые будут автоматически создавать спрайты и CSS.Загрузите все, что вы можете из CDN, например, Jquery, Prototype и т. Д. (Надеюсь, только один фреймворк на сайт, потому что два или более не нужны)

Если вы все еще не справились, посмотрите на свою графику еще развремя.Не могли бы вы воспользоваться чистым CSS или повторением изображений через CSS для дальнейшего снижения нагрузки?Вы оптимизировали всю графику?Не могли бы вы настроить дизайн, чтобы воспользоваться этими приемами?

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

1 голос
/ 26 июля 2011

Вы можете установить HTTP-кэширование для файла кода javascript, который генерирует меню, или использовать ajax для вставки предварительно сгенерированного меню HTML из другого файла (снова с длинной датой истечения, установленной в кеше).

Оба эти решения требуют Javascript до конца.Я не могу придумать другой способ удаления меню из HTTP-трафика, кроме IFRAME (чёрт).

30k - это большой объем для простого HTML, хотя - вам ДЕЙСТВИТЕЛЬНО нужна такая огромная структура навигации?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...