Здравствуйте! Может не в ту тему написала, прошу меня за это прoстить, но сегодня вбивала свой сайт в PageSpeed и он показал ужасные результаты. Решила спасать ситуацию. Page Speed пишет, что для оптимизации изображений стоит использовать "Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика." Подскажите, кто пользовался, стоит ли это делать и с помощью чего конвертировать?
Цитата: justmary31 от 04-03-2020, 13:48:13Подскажите, кто пользовался, стоит ли это делать
Возьмите и проверьте на одной странице.
Цитата: justmary31 от 04-03-2020, 13:48:13Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика
Эти форматы поддерживаются не всеми браузерами. Соответственно, надо сначала определить браузер клиента, а потом отдавать ему поддерживаемый формат. Гораздо эффективнее и проще настроить кэширование (на сервере/с помощью модулей или плагинов вашего движка), перенести к себе скрипты/стили/шрифты грузящиеся со сторонних ресурсов, убрать из секции head скрипты, которые блокируют загрузку страницы (чаще всего это счетчики метрики и аналитики). Можно в head подключить критический css, но в будущем могут быть проблемы при разработке, я от этого отказался, да и не особо это отражается на скорости. Чаще всего, перечисленного достаточно, чтобы оказаться в зеленой зоне по Google page speed, естественно при условии быстрого хостинга. Если хотите поиграться с изображениями, то выгрузите их на компьютер и сожмите их чем-нибудь типа fileOptimizer
Цитата: justmary31 от 04-03-2020, 13:48:13Форматы JPEG 2000, JPEG XR и WebP
Из трех представленных форматов первый (jpeg 2000) полностью поддерживается только Сафари (картинки в этом формате увидят только владельцы макбуков, айфонов/айпадов и аймаков), второй (JPEG XR) - разработка мелкософта, но поддерживается только в ослике 11-ом (IE11). На сегодняшний день microsoft перестала осуществлять поддержку формата в своем "флагманском" браузере ёж (edge), но если у вас установлен windows 10, вы можете увидеть в списке установленных программ модуль поддержки webp.
Получается, на сегодняшний день webp - формат, поддерживаемый всеми мобильными браузерами и десктопными. Исключение составляют Сафари и IE11. Ослик в 10-ой винде от глаз рядового пользователя спрятан (многие и не знают, что он есть), а яблочники отказались выпускать Сафари для Windows (предполагается близкая смерть продукта). Поэтому можно без вопросов конвертировать свои картинки в webp. Гарантированно, 99% пользователей их увидят :)
Цитата: justmary31 от 04-03-2020, 13:48:13стоит ли это делать
На моё ИМХО, да.
Вот здесь (http://www.sbup.com/seo-forum/optimizaciya_stranic_saita/vliyanie_razmera_obema_kartinok_na_prodvizenie/msg735801/#msg735801) я приводил в пример две картинки. Учтите, что в webp картинка пожата с параметром качества по умолчанию (80%, по-моему), а результат получается - прим.300 килобайт для 16 мега пиксельного изображения.
Один момент.
Если у вас сайт на голом html - проблем вообще никаких. Почитайте только изначально про picture и srcset, прежде, чем за изменения браться (это для подстрaховки, вдруг кто-то с айфона на ваш сайт зайдет).
А если CMS... Тогда придется искать плагины. Например, под ВордПресс плагинов куча. Но все монстроподобные, на мой взгляд.
Цитата: justmary31 от 04-03-2020, 13:48:13с помощью чего конвертировать
Софта всевозможного множество, включая онлайн конвертеры. Из устанавливаемого под винду точно знаю, что можно конвертить в XnView, ImageMagick. Есть плагин для Фотошопа. Лично мне милее оригинальная гугловая утилита cwebp (консольная).
Есть пакет gulp-webp. Это если пользуетесь gulp...
Да чё там :) php-gd с getimagesize или imagewebp (это если версия php на сервере, где сайт, ниже чем 7.1).
В общем, вариантов
"с помощью чего" множество.
WebP лучше не делать, его не все браузеры нормально воспринимают, поэтому на джепегах, сжатых через Оптимизиллу, вполне можно остановиться. на 30-50% режь качество - глазу не заметно, а по весу под 80% упадёт.
Относительно поддержки webp: лучше сами посмотрите (https://caniuse.com/#search=Webp), кто что поддерживает. А советы пожать жипеги с 50% лучше игнорируйте, ибо на результат без слез не взглянешь
Всем спасибо за советы!
Оптимизация под Page speed относительная. Лучше потестите загрузку самого сайта, на сколько он быстро загружается на таких сервисах как: ГТметрикс или вебпейджспид.
Ох уж этот раздутый speed test. Лучше сравните выдачу сайтов по вашим запросам. Если есть в выдаче (а они есть наверняка) сайт, с более худшими показателями, то не обращайте на этот показатель внимание. Копайте в другом месте ;)
А насколько ужасные показатели? Можно цифры?
Если есть реклама на сайте, то попробует отключить ее и проверить сайт еще раз. У меня реклама отнимает половину баллов. Так что возможно дело и не сайте-то вовсе.
Цитата: <seo>Алексей</seo> от 18-03-2020, 09:05:07
Ох уж этот раздутый speed test. Лучше сравните выдачу сайтов по вашим запросам. Если есть в выдаче (а они есть наверняка) сайт, с более худшими показателями, то не обращайте на этот показатель внимание. Копайте в другом месте ;)
Копать нужно только в одном месте, так как лопата только одна. Или переспaм убираем, или функционал сайта улучшаем, или тайтлы правим или ссылки покупаем или скорость загрузки оптимизируем. ;D
Цитата: Ruby BOOM от 18-03-2020, 09:35:35Если есть реклама на сайте, то попробует отключить ее и проверить сайт еще раз. У меня реклама отнимает половину баллов. Так что возможно дело и не сайте-то вовсе.
Так вывод какой? Если реклама отнимает часть балов, то оптимизировать время загрузки страниц не нужно?
WebP сжимает очень хорошо причем без потери качества, и сайт начинает открываться гораздо быстрее. Сейчас его поддерживают все кроме яблок.
Это легко решить тегом picture
(Могу ускорить ваш сайт до 1 сек в десктопе и 4 сек в мобилке - ДОРОГО)
Просмотрев все сообщения хочу ответить на два тезиса, авторы которых используют устаревшую информацию.
1) Перенести все скрипты, шрифты и файлы на свой сайт.
Относительно js и css файлов согласен. Это значительно ускоряет загрузку страницы. Особенно если они объединяются с помощью плагина, минимизируются и поддаются gzip сжатию. Переносить их нужно, даже основной файл библиотеки js. Это хорошо прибавит в скорости.
Но по поводу шрифтов ситуация обратная. По крайне мере, если речь идет о гугл шрифтах. Буквально пару дней назад делал тесты на нескольких своих сайтах. Шрифты были встроены через гугл. Скачал их, внедрил на сайты локально. Как результат скорость загрузки страницы упала на 10%. Вернул обратно как было и скорость возросла обратно.
2) Результаты PageSpeed Insights условные и притянутые за уши.
Возможно год назад и ранее это было так. Но алгоритмы тестера от гугла постоянно модернизируются и если обращать внимание на их советы, то они стали гораздо адекватней.
К тому же в Google Search консоль появился пункт "Скорость загрузки". Пока как экспериментальный. Но данные он берет как раз таки из своего инструмента PageSpeed Insights. И этот параметр скорости загрузки в ближайшее время будет влиять на ранжирование. Если уже не влияет. Так что оптимизация именно под тестер от Гугла становится как никогда актуальной.
Цитата: Alines от 18-03-2020, 13:09:45Но по поводу шрифтов ситуация обратная. По крайне мере, если речь идет о гугл шрифтах. Буквально пару дней назад делал тесты на нескольких своих сайтах. Шрифты были встроены через гугл. Скачал их, внедрил на сайты локально. Как результат скорость загрузки страницы упала на 10%. Вернул обратно как было и скорость возросла обратно.
Вероятно, вы просто как то неправильно их поставили. Перенос шрифтов к себе на сайт позволяет значительно прибавить в скорости. Это даже визуально должно быть заметно. Как минимум снижения быть не должно на нормальном сервере. Давайте сайт, на котором скорость после переноса упала, вечером посмотрю, скачаю ваши шрифты и напишу css. Я сотни две сайтов на ВП оптимизировал по скорости и не было такого, что скорость после переноса упала бы. И мы говорим про оптимизацию под google page speed, а не про оптимизацию скорости. Это немного разные вещи. Например, гугл дает дополнительные "очки" за то, что шрифты подключены со свойством font-display: swap; хотя на скорости это не отражается
Цитата: alexakap от 18-03-2020, 13:38:21
Вероятно, вы просто как то неправильно их поставили. Перенос шрифтов к себе на сайт позволяет значительно прибавить в скорости. Это даже визуально должно быть заметно. Как минимум снижения быть не должно на нормальном сервере. Давайте сайт, на котором скорость после переноса упала, вечером посмотрю, скачаю ваши шрифты и напишу css. Я сотни две сайтов на ВП оптимизировал по скорости и не было такого, что скорость после переноса упала бы. И мы говорим про оптимизацию под google page speed, а не про оптимизацию скорости. Это немного разные вещи. Например, гугл дает дополнительные "очки" за то, что шрифты подключены со свойством font-display: swap; хотя на скорости это не отражается
Пожалуйста. Шрифты были внедрены с помощью:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}Сайт: alimshake.com
На данный момент шрифты внедряются через гугл.
Цитата: Alines от 18-03-2020, 13:44:24
Пожалуйста. Шрифты были внедрены с помощью:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Сайт: alimshake.com
На данный момент шрифты внедряются через гугл.
У вас используется noto sans. Это специальный шрифт, который выглядит одинаково на разных языках. Все шрифты суммарно весят вроде 12 МБ. У вас на сайте какие языки используются? Только английский?
Добавлено: 18-03-2020, 15:09:41
Цитата: Alines от 18-03-2020, 13:44:24
Пожалуйста. Шрифты были внедрены с помощью:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Сайт: alimshake.com
На данный момент шрифты внедряются через гугл.
Собственно, сейчас скорость загрузки фиксируем 74/98
Файлы шрифтов по ссылке https://yadi.sk/d/YEVk9VFuzLK2hQ
В корне сайта создаете папку fonts, заливаете туда шрифты
В начало css файла или хэдер сайта добавляете
@font-face {
font-family: "Noto Sans";
url("/fonts/noto-sans-v9-latin-ext_latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Noto Sans";
url("/fonts/noto-sans-v9-latin-ext_latin-700.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
Цитата: alexakap от 18-03-2020, 14:56:19
У вас используется noto sans. Это специальный шрифт, который выглядит одинаково на разных языках. Все шрифты суммарно весят вроде 12 МБ. У вас на сайте какие языки используются? Только английский
Да, только английский.
Цитата: alexakap от 18-03-2020, 14:56:19
В корне сайта создаете папку fonts, заливаете туда шрифты
В начало css файла или хэдер сайта добавляете
Посмотрел ваш код. Вспомнил, что что-то подобное уже пробовал тоже. Но попробую еще раз с вашими файлами. Спасибо.
Добавлено: 18-03-2020, 15:42:39
Цитата: alexakap от 18-03-2020, 14:56:19
@font-face {
font-family: "Noto Sans";
url("/fonts/noto-sans-v9-latin-ext_latin-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Noto Sans";
url("/fonts/noto-sans-v9-latin-ext_latin-700.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
Только что обратил внимание, что вы только woff2 поставили. А как же другие форматы? То, что вы передали через яндекс диск у меня есть. Только к тому же еще все остальные форматы шрифтов.
Цитата: Alines от 18-03-2020, 13:09:45
Но по поводу шрифтов ситуация обратная. По крайне мере, если речь идет о гугл шрифтах.
Ну, мы же с вами (надеюсь) в России жевем... Или вы уже забыли, как телеграм блoкировали?
Я готов пожертвовать 5% скорости загрузки моего любимого Montserrat. Ибо РКН у нас полномочий не лишили. К тому же, суверенный интернет наступает...
Цитата: Alines от 18-03-2020, 15:36:26Только что обратил внимание, что вы только woff2 поставили. А как же другие форматы? То, что вы передали через яндекс диск у меня есть. Только к тому же еще все остальные форматы шрифтов.
Откройте код сайта и перейдите по ссылке, по которой у вас подключаются шрифты
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
У вас подлючаются все возможные языки в формате .woff2
Вам нужен только латинский с font-weight 400 и 700, поэтому вам надо только 2 файла
Я не против, можете подключить все. Но зачем, если они не используются
на системе Prestashop 1.7.6.4
и на настроенном веб-сервере
CentOS 7.7 (nginx 1.16 + php 7.3 + mysql 5.7)
можно с стандартными jpg изображениями (quality 80% 72dpi) вполне легко добиться "зелёного" GooglePageSpeed практически для всех страниц
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fnasosvdom.com.ua%2F
https://clip2net.com/clip/m363771/0a7bb-clip-41kb.png?nocache=1
Цитата: alexakap от 18-03-2020, 16:37:24
Откройте код сайта и перейдите по ссылке, по которой у вас подключаются шрифты
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
У вас подлючаются все возможные языки в формате .woff2
Вам нужен только латинский с font-weight 400 и 700, поэтому вам надо только 2 файла
Я не против, можете подключить все. Но зачем, если они не используются
Возможно, что падение скорости у меня было из за того, что я все файлы подключал на два типа шрифта? Потому что speed insight у меня как раз на эти файлы и ругался и их размер.
Буквально сейчас сами этим занимаемся и перепробовали различные методы.
Естественно картинки нужно делать те, как рекомендует PageSpeed Insights.
Также не маловажным будет применить Laizy Load к страницам, от которых требуется высокая скорость загрузки. Также необходимо подключать более легкие библиотеки. Это нам дало примерно 5% к приросту скорости. Ну и как вариант - делить js на чанки.
главное не используйте data-src для img, ужасно раздражает такой подход по замену стандартного тега, лучше просто для хрома loading="lazy".
Цитата: lalmazl от 20-03-2020, 01:36:24
главное не используйте data-src для img, ужасно раздражает такой подход по замену стандартного тега, лучше просто для хрома loading="lazy".
Насчет loading="lazy". Пробовал эту фишку. Нифига не работает. Может что-то делаю не так? Прописываю тэгу img вот так: <img src="/images/image.jpg" loading="lazy"/>
Цитата: Alines от 20-03-2020, 12:10:56
Насчет loading="lazy". Пробовал эту фишку. Нифига не работает. Может что-то делаю не так? Прописываю тэгу img вот так: <img src="/images/image.jpg" loading="lazy"/>
Там несколько моментов...
1. Не надо закрывать img. У вас все-таки html5
2. Работает эта фенечка тока в хромообразных, исключая сафари. В огнелисе работать не будет
3. С самим атрибутом, вроде как, рекомендуют использовать указанные в теге img ширину и высоту
4. Говорят, что есть проблемы с зазорами. Ну, то есть, картинка должна появляться при скролле. Если картинок много и все разной размерности, хром не может правильно рассчитать момент появления для каждой из них
5. Если желаете использовать картинки для разных брейкпоинтов, то атрибут надо применять только к основному изображению:
picture - > source + img
Источники, как и положено, по брейкпоинтам, а в имг - атрибут...
Цитата: Val_Ery от 20-03-2020, 12:54:16
Там несколько моментов...
1. Не надо закрывать img. У вас все-таки html5
2. Работает эта фенечка тока в хромообразных, исключая сафари. В огнелисе работать не будет
3. С самим атрибутом, вроде как, рекомендуют использовать указанные в теге img ширину и высоту
4. Говорят, что есть проблемы с зазорами. Ну, то есть, картинка должна появляться при скролле. Если картинок много и все разной размерности, хром не может правильно рассчитать момент появления для каждой из них
5. Если желаете использовать картинки для разных брейкпоинтов, то атрибут надо применять только к основному изображению:
picture - > source + img
Источники, как и положено, по брейкпоинтам, а в имг - атрибут...
Спасибо за разъяснения. Но что-то слишком много нюансов. Пока буду и дальше на jquery использовать.
Цитата: Alines от 20-03-2020, 13:24:02
Но что-то слишком много нюансов. Пока буду и дальше на jquery использовать.
Там один Самый Главный нюанс: оно работает только в хромообразных. И я совсем не уверен, что будет работать в мобильном хроме.
P. S. Сам такого никогда не использовал. Потому что пользуюсь Огнелисом, а там это - не работает.
P. P. S. Если жикверю приходится ставить только ради ленивой загрузки, посмотрите, как это реализовано на Javascript (там совсем не сложно, описаний множество и... не надо подгружать jQuery).
Цитата: Alines от 18-03-2020, 13:09:45
Но по поводу шрифтов ситуация обратная. По крайне мере, если речь идет о гугл шрифтах. Буквально пару дней назад делал тесты на нескольких своих сайтах. Шрифты были встроены через гугл. Скачал их, внедрил на сайты локально. Как результат скорость загрузки страницы упала на 10%. Вернул обратно как было и скорость возросла обратно.
Вопрос: а как именно вы их мерили? Локально со своего компьютера или через сервисы типа PageSpeed и GTmetrix?
Дело в том, что тут еще географическое положение серверов влияет. Сервера GTMetrix и PageSpeed расположены в Америке. И, если ваш хостинг находится в России, качать шрифты с него им будет дольше, чем с CDN Google, который тоже находится в Америке. А вот для пользователей окажется все наоборот: скачать шрифты с географически более близкого сервера быстрее (если у хостинга канал нормальный), чем с CDN из Америки или Европы.
ЦитироватьОтносительно js и css файлов согласен. Это значительно ускоряет загрузку страницы. Особенно если они объединяются с помощью плагина, минимизируются и поддаются gzip сжатию. Переносить их нужно, даже основной файл библиотеки js. Это хорошо прибавит в скорости.
Недавно пришел к выводу, что склеивать файлы в один имеет смысл только в том случае, если не используется HTTP/2. В случае, если на сервере есть поддержка HTTP/2, достаточно просто обеспечить асинхронную загрузку для всех CSS, кроме основного (который обычно style.css называется) и отложенную (с атрибутом defer) загрузку JavaScript. В этом случае не будет задержки отображения до момента, когда прогрузится и обработается весь огромный склеенный CSS-файл, а только до момента загрузки основного.
Добавлено: 23-03-2020, 02:15:34
По поводу WebP: если на сервере стоит Apache, то его поддержка добавляется очень просто. В .htaccess можно добавить проверку на то, поддерживает ли броузер формат WebP (это передается в заголовке Accept) и если да, выдавать его вместо JPEG:
AddType image/webp .webp
<IfModule mod_rewrite.c>
RewriteEngine On
# Check if browser support WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{dоcument_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
Соответственно, файлы WebP должны быть с теми же именами и по тем же путям, что и JPEG, но с расширением .webp.
Если на сервере установлен ImageMagick и есть SSH-доступ, то можно конвертацию можно сделать автоматически:
mogrify -format webp *.jpgЕдинственный минус — может вырасти нагрузка на ввод/вывод из-за необходимости при каждом обращении проверять существование файла.
Цитата: 4X_Pro от 23-03-2020, 02:01:48
Недавно пришел к выводу, что склеивать файлы в один имеет смысл только в том случае, если не используется HTTP/2. В случае, если на сервере есть поддержка HTTP/2, достаточно просто обеспечить асинхронную загрузку для всех CSS, кроме основного (который обычно style.css называется) и отложенную (с атрибутом defer) загрузку JavaScript. В этом случае не будет задержки отображения до момента, когда прогрузится и обработается весь огромный склеенный CSS-файл, а только до момента загрузки основного.
Может я что-то не понимаю, но сколько не пытался использовать defer или async, перестает работать тот или иной скрипт вообще. У меня используется HTTP/2. Я объединил все CSS в один файл и все JS в один файл, минимизировал и сжал. Скорость выросла на 10-15%. Разница ощутима.
Если PageSpeed рекомендует переход на JPEG 2000 или WebP, это стоит учитывать. Для конвертации можно использовать такие инструменты, как Squoosh или онлайн-сервисы вроде TinyPNG. Это не только ускорит загрузку, но и снизит потребление трафика.