Хороший сайт. Несколько слов о качестве кода

Распространение различных CMS (wordpress, Joomla и так далее) привело к тому, что очень многие веб дизайнеры не анализируют исходный код страницы. Если кто не знает, для того, чтобы его увидеть нужно нажать Ctrl-u. И, если от большинства синтаксических ошибок CMS позволяет застраховаться, то оптимальность кода все таки остается достаточно больным вопросом. Если Вы еще не просматривали код своих сайтов, рекомендую это сделать. В первую очередь, Вы, скорее всего, увидите много мусора в виде неработающих <span style....>. Для их подчистки существуют инструменты. Вы с легкостью их найдете.

Здесь поговорим об эффективности кода. Для примера рассмотрим мой сайт Каталог слуховых аппаратов в Польше http://sluchowe-aparaty.com/. Он создан на базе CMS Joomla базовый шаблон Beez5. Но при этом отключены mootools, используется минимум Java скриптов. Практически все реализовано с помощью HTML кода.

Посмотрим примеры:

Пример 1 На всех основных страницах присутствует интерактивная карта Польши со ссылками по Воеводствам (аналог наших областей) и по основным городам.

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

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

Пример 2. Раскрывающееся окно. На сайтах воеводств для упрощения поиска по каталогу были введены раскрывающиеся окна со списком городов по повятам (аналог наших районов). Вот как это выглядит на примере одного из повятов одного из воеводств Польши http://sluchowe-aparaty.com/aparaty-sluchowe-zachodniopomorskie#Czlopa

При закрытом окне

Пример 1

При открытом окне

Пример 2

Естественно, что в чем, так это в возможностях реализации всплывающих окон для Jommla недостатка нет. Но каждый такой вариант тянет за собой подгружаемые файла вполне приличных размеров. Тут же все было реализовано с помощью HTML с созданием легкого CSS

<td class="woj_powiat" onclick="this.innerHTML = '<table class="powiat"><tbody><tr><td class="powiat_pad">Aparaty słuchowe w miastach powiatu wałeckiego<br><a title=Aparaty_słuchowe_Człopa href=#Czlopa>Człopa</a> <a title=Aparaty_słuchowe_Tuczno href=#Tuczno>Tuczno</a> <a title=Aparaty_słuchowe_Wałcz href=#Walcz>Wałcz</a></td></tr></tbody></table>'"><span class="wind_powiat">powiat wałecki</span></td>

Наколько велики потери в визуализации и юзабилити, можете оценить сами.

Что же в итоге мы приобрели?

Первое. Минимизировали размеры и соответственно время загрузки основных продвигаемых страниц сайта. Сейчас показатель 85. В итоге, получили от Google, а именно Google интересует прежде всего приличный бонус в ранжировании. Чтобы не быть голословным, сейчас по запросу "слуховые аппараты Варшава" на польском языке с варшавской локализацией - 2 позиция. Это при том, что в Варшаве более 80 компаний занимаются реализацией слуховых аппаратов, а также при том, что насыщение внешней ссылочной массой еще в самом разгаре.

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

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

Вступите в группу, и вы сможете просматривать изображения в полном размере

		Это интересно 0	Как всё будет выглядеть в блоге: Хороший сайт. Несколько слов о качестве кода Распространение различных CMS (wordpress, Joomla и так далее) привело к тому, что очень многие веб дизайнеры не анализируют исходный код страницы Скопируйте код для блога: <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/horoshij-turisticheskij-sajt-kak-ego-sdelat-i-zastavit-rabotat/10101197/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;"> Хороший сайт. Несколько слов о качестве кода </a> <div class="insert-intro" style="font-family:trebuchet MS;">   Распространение различных CMS (wordpress, Joomla и так далее) привело к тому, что очень многие веб дизайнеры не анализируют исходный код страницы </div> </div> Хороший сайт. Несколько слов о качестве кода <div style="border:1px solid #E8E8E8;margin:10px auto;padding:10px 15px;"> <a href="https://subscribe.ru/" style="display:block;"><img src="https://subscribe.ru/img/logokanal.png" style="margin:0;border: 0;" alt=""/></a> <a href="https://subscribe.ru/group/horoshij-turisticheskij-sajt-kak-ego-sdelat-i-zastavit-rabotat/10101197/" style="border-color:#E8E8E8;border-style:solid;border-width:1px 0;color:#555555;display:block;font-family:trebuchet MS;font-size:1.2em; font-weight:bold;margin:5px 0;padding:5px 0;text-decoration:none;">Хороший сайт. Несколько слов о качестве кода</a> <div style="font-family:trebuchet MS;"> Распространение различных CMS (wordpress, Joomla и так далее) привело к тому, что очень многие веб дизайнеры не анализируют исходный код страницы </div> </div>

alexdz

21.10.2015

В избранное Пожаловаться Просмотров: 717

Комментарии ⁰

Хороший туристический сайт. Как его сделать и заставить работать 21881

Последние откомментированные темы:

Хороший сайт. Несколько слов о качестве кода

Комментарии временно отключены

Открытая группа
23 участника