Скорость работы лендинга на WP

simatic007
(@simatic007)

5 лет, 7 месяцев назад

Добрый день.
Указанный в топике url — это адрес лендинга, который планируется «посадить» на cms wordpress для удобства правок контента.
Лендинг ужасно огромен: вес страницы — 50 Мб, содержит 193 изображения и грузится в зависимости от скорости интернета до нескольких минут. Логично было бы разнести его на отдельные страницы, чтобы облегчить вес страниц, но владелец сайта непременно хочет видеть сайт одностраничником. Но при этом хочет и повысить скорость его работы.
Основная проблема в ускорении — это большое число картинок(картинки все оптимизированы).
Мне решением проблемы видится использование lazy load для поднятия скорости сайта.
Вопрос: какие приемы используют для ускорения работы лендинга на wp и что можно применить в данном частном случае?
Спасибо.

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 11 ответов — с 1 по 11 (всего 11)

Flector
(@flector)

5 лет, 7 месяцев назад

картинки все оптимизированы

это шутка?
там пара десятков картинок от 1mb до 2mb — это абсолютно не оптимизированые картинки.

Автор simatic007
(@simatic007)

5 лет, 7 месяцев назад

Под словами оптимизированные картинки я имею в виду, что они сжаты сервисом optimizilla. А большое разрешение и как следствие приличный вес используются при просмотре картинок-можно нажать на лупу и рассмотреть все детали сруба.

Модератор Yui
(@fierevere)

永子

5 лет, 7 месяцев назад

во всяком случае у вас хотя бы быстрый сервер, способный отдать 190 мбит скорости, а вот что делать тем у кого гораздо более медленная скорость подключения я не знаю )

Попробуйте lazy load, однако имейте ввиду что он не всегда дает желаемый результат и часто картинки могут просто не загрузиться совсем, зависит от вашей темы и того плагина, который вам дает ленивую загрузку

Flector
(@flector)

5 лет, 7 месяцев назад

разрешение 3753×2956 — вы правда думаете, что кому-нибудь надо разглядывать трещины в бревнах?

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

Автор simatic007
(@simatic007)

5 лет, 7 месяцев назад

Да, наверно вы правы, нужно ограничить максимальное разрешение картинок 1920х1280-это в разы уменьшит их размер. Ну и превьюшки поделать.
Flector
(@flector)

5 лет, 7 месяцев назад
Ну и превьюшки поделать.

угу.
```
<li><a class="fancybox" data-fancybox="gallery11" href="img/etap11/7-main.jpeg" title="Этапы строительства" rel="certificate">
<div class="abslt_opas_loopa">
<div class="cntr">
<p>Этапы строительства</p>
</div>
</div><img src="img/etap11/7-main.jpeg" alt="Этапы строительства">
</a></li>
```
вот нижняя картинка должна быть миниатюрой.
в этом случае ваш лэндинг похудеет мегабайт на 30 сразу же.
- Ответ изменён 5 лет, 7 месяцев назад пользователем Flector.
- Ответ изменён 5 лет, 7 месяцев назад пользователем Flector.
Автор simatic007
(@simatic007)

5 лет, 7 месяцев назад

Интересно, что сделав миниатюры и сократив размер загружаемого контента с 50Мб до 7Мб тест скорости гугла вообще никак не отреагировал. Как был показатель 20/25, так и остался.

tuxfighter
(@tuxfighter)

5 лет, 7 месяцев назад

тест скорости гугла

это фейк, который ни значит вообще ничего.
https://gtmetrix.com/
https://tools.pingdom.com/

Flector
(@flector)

5 лет, 7 месяцев назад

Интересно, что сделав миниатюры и сократив размер загружаемого контента с 50Мб до 7Мб тест скорости гугла вообще никак не отреагировал. Как был показатель 20/25, так и остался.

ну так остальное то все хреново.
одни только шрифты на 2.5mb, да без браузерного кэширования чего стоят.
не люблю я гугловскую оценку, так как гугл сам на своих сайтах плевать хотел на свои же рекомендации, но в данном случае он более-менее прав.
Автор simatic007
(@simatic007)

5 лет, 7 месяцев назад
одни только шрифты на 2.5mb, да без браузерного кэширования чего стоят.

Да шрифты подключаются локально, но тут ничего не поделать. Кэширование шрифтов добавил
```
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
```
Но только в отчете все равно указано, что шрифты не кэшируются.

ну так остальное то все хреново.

Это наверное про js, который 15 секунд обрабатывается?
- Ответ изменён 5 лет, 7 месяцев назад пользователем simatic007.
Модератор Yui
(@fierevere)

永子

5 лет, 7 месяцев назад
AddOutputFilterByType DEFLATE

это поддержка сжатия, но не кеширование
```
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 days"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/plain "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 week"
    ExpiresByType application/x-icon "access plus 1 year"
</IfModule>
```
вот для кеширования статики, MIME для шрифтов сами добавьте по аналогии, однако, если шрифты располагаются не у вас, а на CDN Google например, то ваши директивы на их кеширования никакого влияния иметь не будут