[Решено] PageSpeed Insights и Изменение размера изображения + Удаление JS

  • 6 Ответов
  • 1315 Просмотров

0 Пользователей и 1 Гость просматривают эту тему.

*

Оффлайн Artorius

Здравствуйте!

Сейчас запускаем сайт на Joomla 3 http://massagkazan.ru/ и столкнулись с верстальщиком на такие ошибки в PageSpeed Insights:
1)
Цитировать
Изменение размера и сжатие изображения по адресу http://massagkazan.ru/images/interior/interior_05.jpg уменьшит его на 301,5 КБ (97 %).
Изменение размера и сжатие изображения по адресу http://massagkazan.ru/images/interior/interior_02.jpg уменьшит его на 297,2 КБ (96 %).
и т.д. - фото интерьера выводимые слайдером на главной.
Дело не в том что мы не сжали без потерь что-то как например ошибки вида
Если сжать без потерь изображение http://massagkazan.ru/images/headers/icon-vk.png, это уменьшит его размер на 2,5 КБ (75 %).
там все это сделано было, как я понимаю он хочет чтобы на мобильной версии сайта подгружались картинки не 1300*900, а с обрезанным исходником.
Я не пойму как это сделать без изменения ссылки сайта. Есть ли какой-то способ реализовать это или обойти ошибку?
Соответственно для ПК такой ошибки нет т.к. 1300 это нормально для монитора.
2) Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение
Я использовал скрипт мердж и объединил все CSS и js в два отдельных файла и вынес их перед /body (кстати не пойму как этим плагином сделать перед /html)
пару скриптов запретил вручную и вывел перед /html
Но слайдер слетает если вывести jquery.min.js перед /body или /html
Выдает такую ошибку
Цитировать
Удалите код JavaScript, препятствующий отображению:
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Если я убираю этот jquery.min.js и ставлю перед /html то мобильный рейтинг сразу взлетает на 40 пунктов, но слетает слайдер.

Перерыл кучу гайдов но именно на эти два вопроса ответа не нашел, с многими другими ошибками справились.
Заранее благодарю за ответ.
« Последнее редактирование: 20.10.2015, 13:44:06 от b2z »

Здравствуйте! Попробуйте мой плагин. Буду рад, если он поможет решить Вашу проблему!
Ссылка
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

*

Оффлайн Artorius

Здравствуйте! Попробуйте мой плагин. Буду рад, если он поможет решить Вашу проблему!
Ссылка
Слушай, классно! Плагин работает!
Сразу ошибки красные с изображениями ушли!
Но только мультивывод изображений не заработал в автоматическом режиме.
Настройки такие - Автоматический
Включить
_small
В слайдере фото http://massagkazan.ru/images/interior/interior.jpg Также я создал и положил рядом с файлом на хосте http://massagkazan.ru/images/interior/interior_small.jpg
Но не подцепляет вроде. Хотя я может не так проверяю. Я просто сузил окно хрома до 300 точек по ширине и перезагрузил страницу. В просмотре кода элемента стандартная картинка. В PageSpeed Insights ошибок нет, хотя и с отключенным Мультивывод изображени тоже нет. Подгрузка спасает!

Я просто сузил окно хрома до 300 точек по ширине и перезагрузил страницу.

Значение ширины экрана берётся не из CSS свойства width, а из JS свойства window.screen.width, что равноценно CSS свойству device-width, то есть физическим пикселям. Например, iPhone 6 Plus имеет ширину, соответствующую 414 физическим пикселям (device-width). В то время как логических пикселей у данного девайса 980 — значение width = 980px. Так что, проверять надо на девайсах, а не на десктопных браузерах.
« Последнее редактирование: 20.10.2015, 01:17:32 от Филипп Сорокин »
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

*

Оффлайн Artorius

Филипп, спасибо!

Проблему с jquery.min.js я решил топорно как советовали на хабре http://habrahabr.ru/post/266357/
Просто скопировал код скрипта и вставил этот код в хеад.
Думаю это плохо т.к. ботам поисковиков теперь придется очень долго читать HTML пока они дойдут до контентной части и так делать не рекомендуется, но другого решения пока не нашел.

Не за что  ^-^

Кстати, если будете пользоваться данным плагином, не пропустите — сегодня будет очень важное обновление с фиксом бага кэширования изображений в автоматическом режиме мультивывода. А через недельки 2 планирую добавить поддержку Retina (high-density) изображений.
« Последнее редактирование: 20.10.2015, 02:16:38 от Филипп Сорокин »
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг

Обновите версию: я выпустил патч с фиксом.
Ставь лайк, если согласен, и делай репост!

  => мои публикации
    => мои работы
      => спектр моих услуг