как объединить платформу веб-приложения виджета с благоприятным для SEO CSS и файлами JS
Я пишу веб-приложение с помощью платформы Зенда и доморощенной системы виджета. Каждый виджет имеет контроллер и может принять решение представить одно из многих представлений, если он выбирает. Это действительно помогает нам построить из модулей и реконфигурировать и снова использовать виджеты где угодно на сайте.
Проблема состоит в том, что представления каждого виджета содержат свой собственный JS и код CSS, который приводит к очень грязному HTML-коду, когда целая страница соединена. Вы получаете очаги тегов style и тегов script везде. Это плохо по большому количеству различных причин, поскольку я уверен, что Вы знаете, но это имеет сильное воздействие на нашу SEO также.
Несколько решений, которые я смог предложить:
Разделите CSS и JS каждого представления каждого виджета в его собственный файл - это имеет серьезные недостатки в течение времени загрузки (намного больше ресурсов должно быть загружено отдельно), и это делает кодирование очень трудным как теперь, у Вас должно быть 3-4 файла, открытые только для редактирования виджета.
объедините весь виджет, который CSS в единственный файл (то же с JS) - также привел бы к крупной загрузке, когда кто-то вводит сайт, перепутывает CSS и JS для всех виджетов, таким образом, более трудно отслеживать их и другие проблемы, что я уверен, что можно думать.
Создайте систему, которая использует метод 1 (разделите CSS и JS для каждого виджета), при поставке страницы, сшивает весь CSS и JS вместе. Этому, очевидно, требуются больше времени обработки и конечно создание такой системы и т.д.
Мой Вопрос - то, что Вы парни думают об этих решениях или если там существуют ранее решения, о которых Вы знаете (или любая технология, которая могла бы помочь), решают эту проблему. Я действительно ценю все Ваши мысли и комментарии!!
Спасибо, ребята,
Ali
3 ответа
Я определенно выбрал бы третий метод. Вы получаете гибкость разделения, описанную в первом методе, но вы получаете возможность тонкой настройки производительности вашего приложения (как указано 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
}
Не уверен, возможно ли это в PHP, но если вы можете отложить передачу страницы до тех пор, пока страница не будет обработана;
- пусть каждый виджет регистрирует свое включение на страницу, используя некоторый статический метод
- поместите в конвейер рендеринга перехватчик, который считывает и объединяет все необходимые ресурсы для включенных виджетов
- , модифицируйте ответ, чтобы включить ресурсы
- , отправьте ответ клиенту
При использовании метода 2 вы сможете воспользоваться преимуществами кэширования браузера. При необходимости, если на сайте есть входная страница с навигацией и т.д. и нет необходимости в библиотеке виджетов, вы можете предварительно загрузить CSS и JS для других страниц после загрузки целевой страницы.
Если вы прогоните ваш JS через что-то вроде YUICompressor, а затем убедитесь, что сервер gzips JS и CSS файлы, вы действительно не говорите о таком количестве вещей, если только ваш код не очень дряблый. Если вы используете библиотеку, размещенную на надежном сайте, таком как API-репозиторий Google, то вы, вероятно, сможете уменьшить размер собственного кода. (Я ничего не знаю о Zend, так что это может быть актуально, а может и нет)
.