Как стать автором
Обновить

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

Сократить bootstrap.css оставив только нужные элементы.

А не использовать бутстап?

Вы предлагаете переписать сайт без bootstrap'а на этапе оптимизации?

А что там на бутстрапе завязано? сетка? Сетку можно отельно подключить вне остальных стилей.

"Там" — это где? Существуют тысячи тем, которые можно купить, и еще несколько вагонов самописных, в которых так или иначе используется bootstrap.
Во многих случаях "убрать boostrap" очень близко к "переписать тему с нуля". Вот я и уточняю, какой смысл-то в этом?

в примере из статьи, можете пример привести тему одну из тысячи с сильно переписанным бутстрапом? Он как бы совершенно не предрасполагает к кастомизации, и делать это сложно. А то что он предоставляет типа переменных — это глупости, а не кастомизация. Его подключают только ради слайдеров и сеток.

Плюс в скрине перед глазами подгружается сразу две версии Jquery, как-то обошли 1.12 явно лишняя.

Да и код подмены слайдера автор должен был на чистом js сделать. Моветон jQ использовать, он полностью поглощен современным js.

Переписывание bootstrap'а вроде нигде не упоминалось. Откуда вы это взяли? У bootstrap'а множество компонентов, каждый из которых может быть использован в теме. Автор предлагает исключить неиспользуемые компоненты и мне это представляется это грамотным подходом. Вы предлагаете тему переписать, исключив bootstrap. На мой взгляд, это абсолютно бессмысленное занятие, потому что выгоды от этого никакой, а усилий будет потрачено много. Может быть я что-то не так понял? Пожалуйста, разверните тогда свою мысль подробнее.


Плюс у вас в скрине перед глазами подгружается сразу две версии Jquery, вы это как-то обошли 1.12 явно лишняя.

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


/* Use latest verion of JQuery */
if (!is_admin()) {
    wp_deregister_script("jquery"); 
    wp_register_script("jquery", "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js", [], "3.5.1", true); 
    wp_enqueue_script("jquery");
}
За 1 час можно выяснить что из компонентов бутстрапа используется на сайте прямо по классам. Скорее всего верстальщик не умеет в js и сделал слайдер через бутстрап. Скорее всего он притащил для этого весь js бандл, как и притащил для сеток весь остальной css. Как я помню, для этого можно галочками собрать себе на сайте бутсрапа новый но сокращенный бандл.

Я нашел одну либу, которая поглощает массу задач ну разве что маску для телефона в не делает. Попапы, галереи, слайдеры, лайтбоксы

github.com/biati-digital/glightbox

Она конечно своеобразная, в том плане, что с непривычки могут быть проблемы с интеграцией. У меня были недопонимания после какой нибудб FancyBox. Главное, она весит 11kb в гзипе и кастомизируется как надо. Без зависимостей. Уникальный набор, я аналогов так и не нашел.
Не надо ни Jq для слайдеров, галерей ни бутстрапов.
Как я помню, для этого можно галочками собрать себе на сайте бутсрапа новый но сокращенный бандл.

Ну это и предлагает автор. Плюс, дополнительно, перенести код, необходимый для сеток в inline css.


Я нашел одну либу, которая поглощает массу задач ну разве что маску для телефона в не делает. Попапы, галереи, слайдеры, лайтбоксы

Чем эта либа лучше Bootstrap? Какая выгода от замены bootstrap'а (правильно собранного) на эту либу?


Ну и да, переубедить мейнтейнеров перейти на scss с post-css не удалось. Сложно перевозить проект если он у тебя уже на scss

Какая разница, на чём написана либа? В итоге вы всё равно имеете собранный css, который можно использовать. Это никак не мешает свой проект писать на scss

Нет оверхеда для совместимости с jQuery.
У бутстрапа очень не удобная кастомизация, логика которой уже заложена. он не живет вне своей жесткой разметки, которая всегда конфликтует с логикой верстки основного сайта. Хочешь компонент формы? Тащи эти class=«form-label» class=«form-control» а если что не так визуально, то перекрывай или правь исходнички.
23kb ядро + кб js от плагинов.
Хочешь компонент формы? Тащи эти class=«form-label» class=«form-control» а если что не так визуально, то перекрывай или правь исходнички.

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


На мой взгляд эти "преимущества" не стоят даже того чтобы заводить разговор о смене библиотеки, в случае если сайт уже использует bootstrap.

Если уже использует то ок
Бутстрап фигня! Некий условный верстальщик под вордпресс с упорством, достойным лучшего применения, тащит в проект плагин Easy FancyBox, подключающий фэнсибокс якобы ко всем картинкам, на самом деле нет и используемый для всплытия одной специализированной формы на одной странице, при этом код js+css тянется на все страницы, тащит в проект плагин сниппетов и шорткодов Intense, используя из всего комбайна вывод на странице записей определенной категории, плагин также тащит на все страницы свои корявые js+css, что еще — ах да, плагин Popup Maker — так как плагин Easy FancyBox не удалось подключить к формам CF7. Общий файл css похудел с 350кб до 32кб!, скриптов было 4мб, стало 200кб! Заказчик попадаются разные, но ощущение, что тот самый верстальщик-прогер один и тот же)))
Поэтому я использую только glightbox, он и для popup и для фоток( немного геморно, в том плане что если вы перечислите в нем все селекторы для всплывания, то он открыв любой разрешит слайдить все, нужно на каждый попап свой объект объявлять)

Кроме сетки, например:


  • стили сообщений, кнопок, таблиц
  • управление видимостью элементов при различных размерах экрана (резиновая/мобильная верстка)
  • стили для меню (навигации)
  • удобное управление (шорткаты) частыми CSS-свойствами display, margin, padding

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


То же самое относится и к jQuery.


Если надо, чтобы потом любой верстальщик Вася мог поддерживать этот сайт, и задача "добавить на сайт такой-то компонент" не стоила 100.000р из-за трудностей отладки и не разваливала вдруг сайт на 5-м iPhone — надо использовать распространенные и отлаженные компоненты.


Оптимизировать их надо, но очень аккуратно.

У вас из 4 пунктов 3 стили, один относится к сетке. Не нужны эти стили для сайта из-за жесткой семантики бутстрапа. Их и так писать нечего и без бутстрапа. Его удобство только в том что есть с ним уже есть опыт. Для админки он норм. для публичных интерфейсов ну не знаю для чего. Я давно бросил его так как возьни при кастомизации куда больше.

можете показать пример вашей вёрстки с вашими стилями? любопытно сравнить..

ничего особенного, вместо сеток бутстрапа у меня миксин
@mixin media($px) {
    @media (max-width: #{$px}px) {
        @content;
    }
} 

ну и десктоп ферст контент. Мне так проще от сложного к упрощению. Дубли брейкпоинтов собираются сами в один брейкпоинт group-media-query для галпа.
Самый гибкий вариант, можно менять абсолютно любые параметры без борьбы c какой либо предустановленной структурой. Страх множества брейкпоинтов оказался на практике только страхом.
На 5 айфоне не запустится добрая половина современного js, начиная с бaнaльного
let
Как вариант, действительно сss бустрапа весит примерно столько же как и весь остальной сss месте взятый, но взять и отказаться от него будет турдоемкой задачей, в рамках этой задачи оптимизации решили обойтись без этого.
можно пробежаться по разметке и посмотреть что из него используется. Можно подготовить новый бандл через сайт бутстрапа, но обрезанный.
«После этого может возникнуть проблема с отображением ресурса в первые секунды загрузки, для этого нужно критично важный css отображать выше. В нашем случае мы просто отключим подключение bootstrap.css в теме проекта и добавим его в соответствующее окно настроек.» — для этого лучше будет использовать часть bootstrapa отвечающую за сетку, чтобы первый запрос не превышал 17кб, и сетки будет достаточно для постройки структуры страницы и отрисовки первых 1000 пикселей.
Да вы правы, я кстати так и сделал, но в статье забыл про это указать. Исправил

Хорошая статья. Я тоже активно использую WordPress. Сейчас пришел к тому, что полностью отказался от Bootstrap и большинства других библиотек. На старых проектах ещё используется jQuery. На новых — только PhotoSwipe (библиотека для lightbox).


Смешно, что все скрипты и стили теперь "весят" меньше, чем одна только Google Analytics и Яндекс.Метрика.


Сайты, кстати, реально быстрые и плотно так сидят в зелёной зоне. И "лишнего" функционала, как у это бывает у большинства платных тем, у меня нет.

Тоже смотрел на photoSwipe но выбрал glightbox

О, спасибо. Не знал о таком. А там есть возможность увеличить картинку двумя пальцами? На демо не вижу такого.


Я б заюзал для нового проекта.


UPD: есть такое. Но конкретно на моем устройстве как-то уж очень нестабильно работает. Через раз.

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

Спасибо. Я разобрался. Просто как-то не очень стабильно работает. Надо то ли четко одновременно пальцы на экран ставить, или ещё чего. Хотя может это просто с моего устройства так.

Обычное браузерное API. Можно зарепортить видео.

Посмотрел на этом сайте каталог… страница весит… тадам! 11 Мб!


JPEG-и из каталога ужимаются минимум вдвое без потери качества — сравнил на первой же попавшейся фотке, получилось 62К вместо 154К при качестве 70 в Ps Save for Web.


Грузится какой-то cdn.carrotquest.io/api.min.js на 514К! Facebook SDK for JavaScript — ещё 200К. Это ж жесть, товарищи...


Или там пока не применили эту оптимизацию?


Да до прода оптимизация пока не дошла, можно посмотреть ее на dev версии сайта frank-meisler.egodev2.info

Там сильно лучше, но два момента бросаются в глаза:


1) большой баннер растягивается сильно шире, чем физический размер (1024 точки расягивается на 1570 у меня). При этом он весит 340К, потому что в PNG. А мог бы быть в JPG, и весил бы в 5-6 раз меньше — килобайт 60. То есть если в картинке прозрачности нет, и "сохранить тонкие линии" не нужно, то и смысла держать её в PNG нет.


качество недопустимо теряется

2) В CSS грузится куча шрифтов: Lato:100,300,400,700,900 и Oranienbaum. При этом вес 100 не используется нигде, хотя грузится, а 500 в трёх местах и 600 в одном, хотя в загрузке их нет. Как интерпретируются указанные bolder и lighter — даже не знаю.


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


Такие вещи отследить просто так невозможно, нужно очень хорошо тестировать скриншотами. А "объединение стилей" на моём опыте ни разу не дало хорошего эффекта ни на одном более-менее сложном дизайне. И всегда ведёт к куче багов и ручной работы по их поиску и устранению.


Учитывая, что один баннер на главной, конвертнутый в JPG, сэкономит столько же, сколько вся возня с CSS, я бы и не связывался с этим утомительным процессом.


Стили слетели

Не то чтобы я отрицал вышенаписанное, но обращу Ваше внимание на один момент:


Загрузка 500 килобайт стилей в разы сильнее влияет на скорость работы сайта, чем те же 500 килобайт в виде картинки.


Поэтому, последний абзац в Вашем комментарии стоило бы сформулировать немного по-другому.

Почему так мало о CDN, об отдаче в несколько потоков с разных доменов?
Тот же Cloudflare + Fastestcache в паре хорошо и бесплатно работают + защищают от dDOS на минимальном уровне.

Defer в скриптах, .svg и .webm

Почему так мало о CDN, об отдаче в несколько потоков с разных доменов?
С появлением HTTP/2 необходимость вертикального шардинга отпала сама собой.
А Super Cash не пробовали? Проверял на www.webpagetest.org с ним показатель ttfb на 10% лучше в одном проекте был. Плюс в панельке веста есть готовый конфиг nginx, с его включением и этим плагином примерно на 2 пункта быстрее в PageSpeed

Согласно моему опыту CloudFlare зачастую довольно негативно влияет на скорость загрузки сайтов. Ну и часть IP у них заблокированы.


Но все равно использую. Уж очень много у них приятных плюшек.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.