УрокУменьшаем количество исходного кода на странице при помощи javascript
Не секрет, что большинство поисковых систем обращают внимание на соотношение количества нормального текста к количеству html и javascript кода на странице. И чем меньше "лишнего" на странице, тем лояльнее к сайту относится эта система. Поэтому надо каким-то образом этот код урезать. Но что же делать, если, например, дизайн не позволяет? Ну вот нарисовал дизайнер закруглённые уголки в комментариях - а это как минимум 4 ( а в худшем случае и все 8 ) лишних классов для каждого коммента! Представьте, что на странице 100 комментариев. Это 400 (800) лишних классов только для уголков!!
Я предлагаю абсолютно нехитрый способ решения этой проблемы: пару строк кода на Jquery - и поисковик, а вместе с ним и Вы, будете счастливы.
Предположим, у нас шаблон комментария comment.tpl.php выглядит таким образом:
<div class="comment <?php print $comment_classes; ?>"> <!-- вывод переменных, html разметка и прочее --> </div>
Очевидно, что класс comment повторяется для всех комментариев. Так давайте же просто подключим скрипт, который в этот класс добавляет 4 класса для представления уголков:
$(document).ready(function() { $(".comment").wrapInner('<div class = "tl"><div class = "tr"><div class = "bl"><div class = "br"></div></div></div></div>'); });
В примере я обернул содержимое коммента в 4 дополнительных класса. С той же лёгкостью вы можете добавить туда любое количество классов.
Далее, как обычно, в css файле укажите этим классам картинки фона:
.comment .tl { background: url(images/comment_tl.png) no-repeat top left; } .comment .tr { background: url(images/comment_tr.png) no-repeat top right; } .comment .bl { background: url(images/comment_bl.png) no-repeat bottom left; } .comment .br { background: url(images/comment_br.png) no-repeat bottom right; padding: 10px; /* отступы не помешают ;) */ }
Что получается в итоге? А то, что благодаря трём строчкам кода, на странице с большим количеством комментариев вы сэкономите не один десяток килобайт при загрузке страницы.
Я показал всё на примере комментариев. Этот пример вы можете использовать для своего решения. Таким же образом можно сэкономить на закруглённых уголках для нод или для блоков. Отдельные сео-маньяки вообще могут минимизировать количество исходного кода, загружая классы при помощи скриптов чуть ли не для каждого элемента (кто ж запретит-то?).
Более того, можно пойти дальше - и при помощи аякса подгружать контент, который вы по каким-либо причинам не хотите индексировать на данной странице. В общем, разгуляться действительно есть где. А по поводу функций Jquery, которые вам могут пригодиться - можно много полезного найти тут (спасибо Соколику за ссылку)
- Spleshka
- 17.02.2011
- 15623
Комментарии
Даешь border-radius в массы! Что, в прочем, не сильно уменьшает актуальность данной техники :)
border-radius, конечно, хорошо. Но, к сожалению, далеко не все пользователи используют современные браузеры :(
далеко не все пользователи вообще пользуются браузерами,это не поводвообще не писать код ;)
Код писать нужно. Но почему бы не написать код для всех пользователей, если есть возможность? Это ведь не сложно, не надо изобретать велосипед или писать огромные приложения. Пару строк кода - и пользователи всех браузеров довольны
А как же насчет нагрузки на браузер при применении данной javascript функции?
Минимальна. В качестве доказательства посмотри страницу http://drupalace.ru/zadat-vopros?page=1 - там 50 комментов, и закруглены уголки именно так, как в примере. Я очень удивлюсь если ты почувствуешь какую-либо дополнительную нагрузку :)
благодаря трём строчкам кода, на странице с большим количеством комментариев вы сэкономите не один десяток килобайт при загрузке страницы.
и на порядок увеличите время рендеринга страницы на слабых компьютерах ;)
Насколько слабый должен быть компьютер, чтобы увеличить время ? Такими компьютерами пользуются отсилы 5% пользователей. А подавляющим меньшенством, как правило, пренебрегают
ну попробуйте закруглить уголки у тыщи комментов и вопрос о целесообразности отпадёт сам ;) к тому же дёрганье экрана после загрузки dom тоже достаточно раздражает, плюс вы смешали логику и представление. можете почитать статейку на webo.in и ужаснуться своему методу ;)
смешивания никакого тут нет.
оформление 1000 комментариев - имхо js - неплохой способ для этого, если нельзя использовать border-radius и т.п. другое дело что не помешало бы сделать финт ушами и комментариям в css поставить display: none;. позже, по событию $(document).ready добавить уголки и красиво показать комментарии. не будет дерганья и на современных компьютерах ждать долго не придется. зато сэкономите трафик на "мусорных" элементах.
Для одного магазина я вообще таким образом делал вывод товаров. через json получал масив с инфой, и js-ом выводил список. со страницы экономил от 150Кб и выше на одной лишь разметке. на моём стареньком cel 1.8 выводилось всё почти мгновенно.
правда не знаю как к этому отнесутся поисковые системы и люди с отключенным js :-)
Я бы поставил комментам display: none, но, как вы правильно заметили - отношение поисковиков и людей с отключенным js будет далеко не самым приятным :)
а в Вашем случае я бы использовал border-radius + -moz-border-radius + -webkit-border-radius + behavior:url(border-radius.htc) (последнее ясно для любимого IE)
htc скачать и прочитать про него можно тут: http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
скажу честно, не проверял как работает, но судя по комментам - вроде около дела...
ибо js конечно хорошо, но злоупотреблять не стоит :WINKING:
так я ж чуть чуть =)
> js - неплохой способ для этого
js это жуасный способ для этого
> в css поставить display: none;. позже, по событию $(document).ready добавить уголки и красиво показать комментарии
а например хочу читать пока страница грузится, а не видеть белый лист неизвестно сколько
Ну кто-то хочет видеть сразу красиво загруженную страницу, которая не будет прыгать перед глазами. А кто-то хочет читать пока страница грузится. Всем не угодишь
Большое спасибо за статью. Узнал JS со стороны производительности
"Не секрет, что большинство поисковых систем обращают внимание на соотношение количества нормального текста к количеству html и javascript кода на странице. И чем меньше "лишнего" на странице, тем лояльнее к сайту относится эта система."
JS выносится в отдельные файлы. HTML пофиг или верстальщик переверстывает. Все нормально. А вот парить из-за этого JQuery - бред.
Не стоит забывать, что некоторые разработчики умудряются пихать стили и скрипты прямо в html код.
На самом деле плевать на тех кто пользуется старым браузером. Их остается меньше и меньше. Тем более браузеры часто сами предлагают обновления. Ну а тот кто не в силах перейти с ИЕ 6 на что-то более новое, тот не способен ни купить товар, ни написать что-то дельное. Так что нужно избавляться от этого комплекса и нормально использовать CSS3 - на полную катушку.
Комментировать