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


#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. Могу отдельно рассказать, что хотелось бы увидеть в админ панели :)


#2

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

....

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

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

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


#3

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

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

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

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

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

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

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

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