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

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

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


Для анализа не стоит брать главную страницу, она обычно стоит особняком и часто использует отдельные шаблоны. Возьмем страницу роликовых резаков для бумаги роликовых резаков для бумаги</a> в качестве основного шаблона, и посмотрим, что там внутри.
Итак, заходим на страницу, открываем исходный код (Ctrl+U кто не знает), и смотрим, что внутри.
Пример верстки резака
Смотрим на скрин и на цифры.
1.    Сразу видно, что сайт делался давно, сейчас практически все сайты делаются на HTML5. Он более гибок, функционален  и удобен.
2.    Довольно много Явоскриптов подключается в шапке. Наверняка часть можно перенести вниз страницы, чтоб они не тормозили загрузку самой страницы, как это рекомендует Google.
3.    Писать скрипты прямо в html коде считается дурным тоном. Небольшие куски еще можно, но большие очень нежелательно.

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


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

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

Голосов пока нет

Продажа рекламы на собственном сайте

Одним из многих видов бизнеса в интернете является продажа на собственном сайте рекламные ролики. Эта идея не только доходная, но и простая в исполнении.

Как правильно выбирать программы учета в ЕГАИС

Не так давно мы писали про сложности выбора между десктопной и он-лайн системой ведения бухгалтерии. Но на этом проблемы с выбором не заканчиваются.

От помощника продавца до независимого человека.

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