Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

Оптимизация Верстки Или Версия 5.0 Rate Topic   - - - - -

 
  • Uniq
  • Member
  • Trial users
  • Join Date: 08-Jul 17
  • 33 posts

Posted 03 December 2017 - 11:49 AM #1

Здравствуйте, коллеги.

 

Озадачился просмотром кода и его анализом, чтобы понимать структуру.

Пока мой сайт находится в разработке, я посмотрел demo.cs-cart.com.

 

Прогнав его через Google Page Speed, был удивлен следующими моментами.

В первый раз мобильный показал 62/100, дектоп - 54/100, все в красной зоне, я удивился, ведь заявлены совсем другие показатели.

Сделав тоже самое, еще раз через 2 дня, получил другие результаты.

Мобильный  84/100 - желтый, дектоп - 92/100 - зеленый.

Интересно, чем это вызвано?

 

Теперь о верстке. Я пока не знаю, что готовит нам мажорная версия 5,0 и когда она выйдет.

На мой скромный взгляд, пользователя знающего HTML/CSS (я не могу себя приравнять к разработчику или кодеру), оптимизация кода требуется большая.

 

Первый момент.

Я взял генерируемый HTML код первой страницы (которая условно пустая) и получил документ 263 КБ. И сделал легкую оптимизацию. Результат 191 КБ, это экономия почти 30%. Это много. Когда таких страниц тысячи, а пользователь просматривает хотя бы 5, а из, пользователей 1000. Это уже 350 Мб в день.

 

В документе дикие пустые пространства, между блоками  по 10-20 строк. Внутри тега куча пробелов между параметрами, например между id и class количество пробелов может быть 50 и более.

 

Я понимаю, что все это кроется в шаблонах, но над этим точно нужно работать.

 

Второй момент - оптимизация блоковой структуры и CSS. Я не сильно вкапывался в код, но несколько случаев увидел. Это так называемая пустое вложение блоков, когда контейнер DIV обернут еще одним DIV без нужды. Да, к внешнему контейнеру применяется какой-то класс, но в консоли разработчика, весь это код не наследуется и не применяется.

По CSS это какие-то длинные названия с двойным подчеркиванием "__". В коде встречается часто, а смысл в этом есть?

 

Третий момент - семантическая верстка. Если еще в 2012 и даже 2014 годах шли дискуссии по необходимости применения новых тегов из HTML5, то сейчас в 2017/18 это уже 100% актуально.

 

Для SEO это большой плюс. Для чтения кода разработчиками, кодерами и поисковиками тоже.

Баланс тут тоже нужен, т.к. пустое применение только увеличит код и сделает микро-разметку бесполезной.

Внедрение таких тегов, как header, nav, section article, footer и некоторых других уже дело нужное и важное.

 

Поэтому предлагаю, что мажорная версия 5.0 должна принести нам все прелести HTML5 и CSS3, с существенной оптимизацией кода.

Я понимаю, что вопрос очень сложный, но он нужен.

 

P.S. Могу отдельно рассказать, что хотелось бы увидеть в админ панели :)

 



 
  • zoldat
  • Senior Member
  • Members
  • Join Date: 24-Nov 16
  • 552 posts

Posted 03 December 2017 - 03:20 PM #2

Здравствуйте, коллеги.

 

....

 

P.S. Могу отдельно рассказать, что хотелось бы увидеть в админ панели :)

Приветствую!

Если какие-то конкретные полезные замечания/пожелания есть, высказывайтесь ТУТ, Эту тему разработчики периодически мониторят и реагируют.



 
  • imac
  • CTO
  • CS-Cart Architects
  • Join Date: 22-Nov 05
  • 1,849 posts

Posted 11 December 2017 - 07:24 AM #3

Здравствуйте, коллеги.

 

 

Прогнав его через Google Page Speed, был удивлен следующими моментами.

В первый раз мобильный показал 62/100, дектоп - 54/100, все в красной зоне, я удивился, ведь заявлены совсем другие показатели.

Сделав тоже самое, еще раз через 2 дня, получил другие результаты.

Мобильный  84/100 - желтый, дектоп - 92/100 - зеленый.

Интересно, чем это вызвано?

 

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

Мерить нужно, после того как вы уже открыли один раз страницу.


Ilya Makarov,
CS-Cart Architect Team
Suggest and vote for new features | Report a bug