Анализ сайта резака – как оценивать верстку.

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

Так или иначе, решил взять сайт, далекий от компьютеров и интернета и показать на реальном примере, что можно улучшить. Причем, сделать это может практически любой мало-мальски грамотный человек. Ну или поручить кому-то, стоить такая работа будет недорого.
Итак, выбор пал на сайт компании  «полиграфмаркет», которая занимается полиграфическим оборудованием. Это не просто сайт-визитка, а интернет-магазин, написанный на битриксе (будет видно дальше), т.е. люди вложились в проект, привлекли специалистов (битриск абы кто не поставит), все настроили.. но все ли?

Для анализа не стоит брать главную страницу, она обычно стоит особняком и часто использует отдельные шаблоны. Возьмем страницу роликовых резаков для бумаги роликовых резаков для бумаги</a> в качестве основного шаблона, и посмотрим, что там внутри.
Итак, заходим на страницу, открываем исходный код (Ctrl+U кто не знает), и смотрим, что внутри.

Смотрим на скрин и на цифры.
1.    Сразу видно, что сайт делался давно, сейчас практически все сайты делаются на HTML5. Он более гибок, функционален  и удобен.
2.    Довольно много Явоскриптов подключается в шапке. Наверняка часть можно перенести вниз страницы, чтоб они не тормозили загрузку самой страницы, как это рекомендует Google.
3.    Писать скрипты прямо в html коде считается дурным тоном. Небольшие куски еще можно, но большие очень нежелательно.

Смотрим далее:

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

На этом скрине видно, что во-первых спамная конструкция ключевых слов. Их должно быть немного. Оптимально 3-5-7 ключевых запросов на страницу (и у каждой они свои обязательно).
На цифрах 2 и 3 явно видно, что опять куски кода вставлены.. Вообще, оптимально все это собрать в один файл и вынести отдельно…


Далее, мы видим куски закомментированного кода. Его тоже оставлять нельзя. Комментирование кода – это просто отключение его для пользователя. Но он есть на сайте, он загружается системой, его знают поисковики. Поэтому, если какие-то элементы Вам не нужны – удаляйте их со страницы, а не комментируйте… Они  увеличивают вес страницы.
Под цифрой два мы видим отдельные куски стилей. Причем их довольно много… прямо огромные куски и экраны… И так далее по всей странице… куски явасктиптов, куски стилей вперемешку с кодом…
Это называется грязный код…
Кроме чистого кода и его уменьшения, чем еще хорош вариант с вынесением в отдельный файл? Дело в том, что скрипты и стили кешируются. И при обновлении страницы, зигружаются из кеша. Если же они вписаны в страницу, то каждый раз загружаются заново вместе с самой страницей. Если оценить объем контента и объем кода, то получиться, что скорость загрузки можно как минимум удвоить…
Рекомендую обращать внимание на такие вот нюансы…