как объединить widget webapp framework с SEO-дружественными CSS и JS-файлами

Я пишу веб-приложение, используя Zend framework и систему виджетов homebrew. Каждый виджет имеет контроллер и может выбрать для отображения один из многих видов, если он выбирает. Это действительно помогает нам распределить и перенастроить и использовать виджеты в любом месте на сайте.

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

несколько решений что я смог придумать:

  1. разделите CSS и JS каждого представления каждого виджета в свой собственный файл - это имеет серьезные недостатки Для времени загрузки (многие другие ресурсы должны быть загружены отдельно), и это делает Кодирование очень сложным, так как теперь вам нужно открыть 3-4 файла для редактирования виджета.

  2. объединить все виджеты CSS в один файл (то же самое с JS) - также приведет к огромной нагрузке, когда кто-то входит на сайт, смешивает CSS и JS для всех виджетов, поэтому сложнее отслеживать их и другие проблемы, которые, я уверен, вы можете придумать.

  3. Создайте систему, которая использует метод 1 (отдельные CSS и JS для каждого виджета), при доставке страницы сшивает все CSS и JS вместе. Этот очевидно, что требуется больше времени на обработку и, конечно же, создание такой системы и т. д.

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

Спасибо, ребята,

Али

3 ответов


Я бы определенно пошел на третий метод. Вы получаете гибкость разделения, описанную в первом методе, но вы получаете возможность finetune производительности вашего приложения (как указано Pointy ..).

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

Styles::add_sheet('widget_1.css');

кроме того, вы можете добавить триггер (метод) в этот класс, чтобы код, который обрабатывает кэширование можно отслеживать, нужно ли перестраивать объединенную таблицу стилей.

if (Styles::cache_needs_update()) {
  // rebuild (concatenate) stylesheet and save in cache
}

чтобы пойти еще дальше, можно также объединить таблицы стилей модуль или какой-то другой критерий группировки. Когда есть много таблиц стилей (или JS-файлов), эти объединенные группы таблиц стилей могут быть кэшированы отдельно.

приведенные выше примеры кода станут чем-то вроде

Styles::add_sheet('widget_1.css','group_name');

if (Styles::cache_needs_update('group_name')) {
  // rebuild (concatenate) stylesheet for this 'group_name' and save in cache
}

с помощью метода 2 Вы сможете воспользоваться кэшированием браузера. При необходимости, если на сайте есть страница входа "входная дверь"с nav и т. д. и нет необходимости в библиотеке виджетов, вы можете предварительно загрузить CSS и JS для других страниц после в целевая страница.

Если вы запускаете свой JS через что-то вроде YUICompressor, а затем убедитесь, что сервер gzips JS и CSS-файлы, вы действительно не говорите об этом, если вы не код действительно дряблый. Если вы используете библиотеку, размещенную на надежном сайте, таком как репозиторий API Google, тогда вы, вероятно, можете сохранить свой собственный код меньше. (Я ничего не знаю о Zend, так что это может быть или не быть актуальным.)


Не уверен, что это возможно в PHP, но если вы можете отложить передачу страницы до тех пор, пока страница не будет обработана;

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