Comments 39
Сократить 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");
}Я нашел одну либу, которая поглощает массу задач ну разве что маску для телефона в не делает. Попапы, галереи, слайдеры, лайтбоксы
github.com/biati-digital/glightbox
Она конечно своеобразная, в том плане, что с непривычки могут быть проблемы с интеграцией. У меня были недопонимания после какой нибудб FancyBox. Главное, она весит 11kb в гзипе и кастомизируется как надо. Без зависимостей. Уникальный набор, я аналогов так и не нашел.
Не надо ни Jq для слайдеров, галерей ни бутстрапов.
Как я помню, для этого можно галочками собрать себе на сайте бутсрапа новый но сокращенный бандл.
Ну это и предлагает автор. Плюс, дополнительно, перенести код, необходимый для сеток в inline css.
Я нашел одну либу, которая поглощает массу задач ну разве что маску для телефона в не делает. Попапы, галереи, слайдеры, лайтбоксы
Чем эта либа лучше Bootstrap? Какая выгода от замены bootstrap'а (правильно собранного) на эту либу?
Ну и да, переубедить мейнтейнеров перейти на scss с post-css не удалось. Сложно перевозить проект если он у тебя уже на scss
Какая разница, на чём написана либа? В итоге вы всё равно имеете собранный css, который можно использовать. Это никак не мешает свой проект писать на scss
У бутстрапа очень не удобная кастомизация, логика которой уже заложена. он не живет вне своей жесткой разметки, которая всегда конфликтует с логикой верстки основного сайта. Хочешь компонент формы? Тащи эти class=«form-label» class=«form-control» а если что не так визуально, то перекрывай или правь исходнички.
23kb ядро + кб js от плагинов.
Хочешь компонент формы? Тащи эти class=«form-label» class=«form-control» а если что не так визуально, то перекрывай или правь исходнички.
Никогда у верстальщиков с этим проблем не было, и без правки исходников.
На мой взгляд эти "преимущества" не стоят даже того чтобы заводить разговор о смене библиотеки, в случае если сайт уже использует bootstrap.
Кроме сетки, например:
- стили сообщений, кнопок, таблиц
- управление видимостью элементов при различных размерах экрана (резиновая/мобильная верстка)
- стили для меню (навигации)
- удобное управление (шорткаты) частыми CSS-свойствами display, margin, padding
В общем, либо вы пишете весь этот бойлерплейт сами или пытаетесь найти более экономичные, но редкие аналоги, либо используете всем понятный, проверенный и удобный Bootstrap.
То же самое относится и к jQuery.
Если надо, чтобы потом любой верстальщик Вася мог поддерживать этот сайт, и задача "добавить на сайт такой-то компонент" не стоила 100.000р из-за трудностей отладки и не разваливала вдруг сайт на 5-м iPhone — надо использовать распространенные и отлаженные компоненты.
Оптимизировать их надо, но очень аккуратно.
можете показать пример вашей вёрстки с вашими стилями? любопытно сравнить..
@mixin media($px) {
@media (max-width: #{$px}px) {
@content;
}
} ну и десктоп ферст контент. Мне так проще от сложного к упрощению. Дубли брейкпоинтов собираются сами в один брейкпоинт group-media-query для галпа.
Самый гибкий вариант, можно менять абсолютно любые параметры без борьбы c какой либо предустановленной структурой. Страх множества брейкпоинтов оказался на практике только страхом.
let
Хорошая статья. Я тоже активно использую WordPress. Сейчас пришел к тому, что полностью отказался от Bootstrap и большинства других библиотек. На старых проектах ещё используется jQuery. На новых — только PhotoSwipe (библиотека для lightbox).
Смешно, что все скрипты и стили теперь "весят" меньше, чем одна только Google Analytics и Яндекс.Метрика.
Сайты, кстати, реально быстрые и плотно так сидят в зелёной зоне. И "лишнего" функционала, как у это бывает у большинства платных тем, у меня нет.
О, спасибо. Не знал о таком. А там есть возможность увеличить картинку двумя пальцами? На демо не вижу такого.
Я б заюзал для нового проекта.
UPD: есть такое. Но конкретно на моем устройстве как-то уж очень нестабильно работает. Через раз.
Посмотрел на этом сайте каталог… страница весит… тадам! 11 Мб!
JPEG-и из каталога ужимаются минимум вдвое без потери качества — сравнил на первой же попавшейся фотке, получилось 62К вместо 154К при качестве 70 в Ps Save for Web.
Грузится какой-то cdn.carrotquest.io/api.min.js на 514К! Facebook SDK for JavaScript — ещё 200К. Это ж жесть, товарищи...
Или там пока не применили эту оптимизацию?
Там сильно лучше, но два момента бросаются в глаза:
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, я бы и не связывался с этим утомительным процессом.
Тот же Cloudflare + Fastestcache в паре хорошо и бесплатно работают + защищают от dDOS на минимальном уровне.
Defer в скриптах, .svg и .webm
У нас на тестах Fastestcache никакого прироста не дал + у него бывают проблемы с очищением кэша.
Был заменён Simple Cache'ом (https://en-ca.wordpress.org/plugins/simple-cache/)
Согласно моему опыту CloudFlare зачастую довольно негативно влияет на скорость загрузки сайтов. Ну и часть IP у них заблокированы.
Но все равно использую. Уж очень много у них приятных плюшек.
До cdn и кэширования дело не дошло, хватило базовых оптимизаций для зелёной зоны тогда. По кэшированию есть специализированные wordpress хостиги сейчас по типу https://indystack.com которые из коробки делают чудеса с помощью кэширования их сервера и выводят сайты в зеленую зону только при помощи кеша, даже сделанные на билдерах по типу wpbakery, visualcomposer и другие
Сайт на Wordpress VS PageSpeed Insights