УрокУменьшаем количество исходного кода на странице при помощи 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, которые вам могут пригодиться - можно много полезного найти тут (спасибо Соколику за ссылку)

Комментарии

Аватар пользователя unic
unic написал:

Даешь border-radius в массы! Что, в прочем, не сильно уменьшает актуальность данной техники :)

17.02.2011 16:30
Аватар пользователя Spleshka
Spleshka написал:

border-radius, конечно, хорошо. Но, к сожалению, далеко не все пользователи используют современные браузеры :(

17.02.2011 18:13
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

далеко не все пользователи вообще пользуются браузерами,это не поводвообще не писать код ;)

19.02.2011 19:17
Аватар пользователя Spleshka
Spleshka написал:

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

19.02.2011 22:41
Аватар пользователя semasping
semasping написал:

А как же насчет нагрузки на браузер при применении данной javascript функции?

17.02.2011 23:52
Аватар пользователя Spleshka
Spleshka написал:

Минимальна. В качестве доказательства посмотри страницу http://drupalace.ru/zadat-vopros?page=1 - там 50 комментов, и закруглены уголки именно так, как в примере. Я очень удивлюсь если ты почувствуешь какую-либо дополнительную нагрузку :)

17.02.2011 23:55
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

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

и на порядок увеличите время рендеринга страницы на слабых компьютерах ;)

19.02.2011 19:15
Аватар пользователя Spleshka
Spleshka написал:

Насколько слабый должен быть компьютер, чтобы увеличить время ? Такими компьютерами пользуются отсилы 5% пользователей. А подавляющим меньшенством, как правило, пренебрегают

19.02.2011 22:40
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

ну попробуйте закруглить уголки у тыщи комментов и вопрос о целесообразности отпадёт сам ;) к тому же дёрганье экрана после загрузки dom тоже достаточно раздражает, плюс вы смешали логику и представление. можете почитать статейку на webo.in и ужаснуться своему методу ;)

21.02.2011 17:20
Аватар пользователя raf
raf написал:

смешивания никакого тут нет.
оформление 1000 комментариев - имхо js - неплохой способ для этого, если нельзя использовать border-radius и т.п. другое дело что не помешало бы сделать финт ушами и комментариям в css поставить display: none;. позже, по событию $(document).ready добавить уголки и красиво показать комментарии. не будет дерганья и на современных компьютерах ждать долго не придется. зато сэкономите трафик на "мусорных" элементах.
Для одного магазина я вообще таким образом делал вывод товаров. через json получал масив с инфой, и js-ом выводил список. со страницы экономил от 150Кб и выше на одной лишь разметке. на моём стареньком cel 1.8 выводилось всё почти мгновенно.
правда не знаю как к этому отнесутся поисковые системы и люди с отключенным js :-)

03.03.2011 19:31
Аватар пользователя Spleshka
Spleshka написал:

Я бы поставил комментам display: none, но, как вы правильно заметили - отношение поисковиков и людей с отключенным js будет далеко не самым приятным :)

03.03.2011 23:27
Аватар пользователя raf
raf написал:

а в Вашем случае я бы использовал 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
скажу честно, не проверял как работает, но судя по комментам - вроде около дела...

04.03.2011 01:10
Аватар пользователя raf
raf написал:

ибо js конечно хорошо, но злоупотреблять не стоит :WINKING:

04.03.2011 01:13
Аватар пользователя Spleshka
Spleshka написал:

так я ж чуть чуть =)

04.03.2011 11:31
Аватар пользователя Тайный поклонник
Тайный поклонник написал:

> js - неплохой способ для этого

js это жуасный способ для этого

> в css поставить display: none;. позже, по событию $(document).ready добавить уголки и красиво показать комментарии

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

13.03.2011 19:43
Аватар пользователя Spleshka
Spleshka написал:

Ну кто-то хочет видеть сразу красиво загруженную страницу, которая не будет прыгать перед глазами. А кто-то хочет читать пока страница грузится. Всем не угодишь

13.03.2011 20:30
Аватар пользователя Spleshka
Spleshka написал:

Большое спасибо за статью. Узнал JS со стороны производительности

03.03.2011 23:28
Аватар пользователя Bot
Bot написал:

"Не секрет, что большинство поисковых систем обращают внимание на соотношение количества нормального текста к количеству html и javascript кода на странице. И чем меньше "лишнего" на странице, тем лояльнее к сайту относится эта система."

JS выносится в отдельные файлы. HTML пофиг или верстальщик переверстывает. Все нормально. А вот парить из-за этого JQuery - бред.

25.05.2012 17:31
Аватар пользователя Spleshka
Spleshka написал:

Не стоит забывать, что некоторые разработчики умудряются пихать стили и скрипты прямо в html код.

25.05.2012 22:41
Аватар пользователя Gorlum
Gorlum написал:

На самом деле плевать на тех кто пользуется старым браузером. Их остается меньше и меньше. Тем более браузеры часто сами предлагают обновления. Ну а тот кто не в силах перейти с ИЕ 6 на что-то более новое, тот не способен ни купить товар, ни написать что-то дельное. Так что нужно избавляться от этого комплекса и нормально использовать CSS3 - на полную катушку.

20.01.2013 13:45

Комментировать