Виталий Першин

На скорую рука как-то так:


- Чтобы кнопка стала внизу, помещаем её в контейнер равный двум строкам, а саму кнопку делаем в одну строку
- Чтобы верхняя строка не перекрывалась контейнером используем shape-outside с помощью которого обрезаем высоту верхней строки у самого контейнера
- Чтобы контейнер стал обтекаемым используем float

dop_img:hover {z-index: -1}

Как вариант с добавлением/удалением класса, который отвечает за анимацию:

В данном случае переменная --vh это альтернатива 1vh только в пикселях, а на 100 умножается, чтобы получить 100% высоту. Наверное они так решили вопрос поддержки, если хотите использовать только эффект noise можете убрать эту калькуляцию и оставить только height: 100vh, а еще лучше:

position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;

Я не понимаю как js высчитывает значение

Определяет высоту экрана и делит на 100

Нет. IMDBOptimizer кеширует только sql-запросы, а Jet Cache помимо sql запросов, кеширует страницы сайта и sitemap, объеденяет и минифицирует css/js с гибкой настройкой, оптимизирует изображения, позволяет делать отложенную загрузку js скриптов и много чего еще.

if (/iPad/i.test(navigator.userAgent)) {
// Тут инициализируем слайдер для iPad
} else{
// Тут инициализируем слайдер для всех остальных устройств
}

А состояние в горизонтальном или вертикальном положении вы можете менять через брейкпоинты

Fancybox.bind("[data-fancybox]", {
  groupAll : true, // Group all items
});

Используйте breakpoints

let swiper = new Swiper(".swiper__info", {
    loop: true,
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    pagination: {
        clickable: true,
        el: ".swiper-pagination",
    },
    allowTouchMove: false,
    breakpoints: {
        // when window width is >= 1024
        1024: {
            allowTouchMove: true,
        },
    },
});

Если надо следить за window, то resize вполне подходящий вариант, а чтобы слишком часто не выполнять сложные вычисления, отложить выполнение функции через setTimeout примерно так:

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

Красных ошибок нет

Как же нет, если есть?

Обратите внимание на смещение макета при загрузке:

Когда сайт загружается, даже если картинка уже в кеше на её отображение требуется время, поэтому в первом экране на месте где должна быть картинка у вас пустота и height равен 0 затем картинка загружается и height становится определенного размера и смещает все что находится ниже этой картинки. Это обязательно надо исправить. А подсказка находится прямо внизу первым же сообщении, задать размеры картинкам. Либо как вариант добавить обертку с необходимым размером, тут уже как хотите выкручивайтесь, но ваша задача на первом экране сделать так чтобы все было на своих местах максимально рано поэтому необходимо сделать базовые размеры под ваш контент. Это то что сейчас бросается в глаза.

Но page speed не столько информативен как lighthouse в браузере хром, поэтому если ваша задача сео оптимизация и ускорение, то открываем хром и начинаем устранять как можно больше важных пунктов:


Для подгрузки видео желательно использовать отложенную загрузку. Вот тут я описал проблему и для себя написал подходящий скрипт, так же есть отличная библиотека LazyLoad с помощью которой можно творить чудеса ленивой загрузки.

Ну подытожить это все дело можно критическим css, то есть вставить инлайново базовую разметку для оптимального отображения, кроме того можно отложить загрузку каких либо скриптов, до момент когда пользователь начнет взаимодействие с сайтом, это ускорит показатель Time to Interactive

примерно так:

Помимо своих костылей и современного апи, есть еще библиотека clipboard.js

Оба варианта приемлемы.
Второй вариант почти всегда подходит. Я обычно делаю отдельного logo и у меня стили с картинками для лого лежат в отдельной папке logo, а там уже либо в зависимости от контекста делаю микс header__logo footer__logo, либо модификатор, например для уменьшенной копии можно сделать logo_size_small
А в случае если лого относится только к конкретному блоку, то можно без проблем сделать его элементом, одно другому в таком случае не помешает никак.

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

Поместите свою карточку slider-card внутрь слайда и делайте с ней все что хотите , а сам слайд swiper-slide не трогайте

А вам принципиально использовать древний swiper? С новым все нормально работает:

Например так: