Seo Форум

Поисковая оптимизация => Базовая поисковая оптимизация => Тема начата: justmary31 от 04-03-2020, 14:48:13

Название: Оптимизация под Page Speed
Отправлено: justmary31 от 04-03-2020, 14:48:13
Здравствуйте! Может не в ту тему написала, прошу меня за это прoстить, но сегодня вбивала свой сайт в PageSpeed и он показал ужасные результаты. Решила спасать ситуацию. Page Speed пишет, что для оптимизации изображений стоит использовать "Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика." Подскажите, кто пользовался, стоит ли это делать и с помощью чего конвертировать?
Название: Re: Оптимизация под Page Speed
Отправлено: vold57 от 04-03-2020, 19:29:41
Подскажите, кто пользовался, стоит ли это делать
Возьмите и проверьте на одной странице.

Название: Re: Оптимизация под Page Speed
Отправлено: alexakap от 04-03-2020, 20:50:24
Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика

Эти форматы поддерживаются не всеми браузерами. Соответственно, надо сначала определить браузер клиента, а потом отдавать ему поддерживаемый формат. Гораздо эффективнее и проще настроить кэширование (на сервере/с помощью модулей или плагинов вашего движка), перенести к себе скрипты/стили/шрифты грузящиеся со сторонних ресурсов, убрать из секции head скрипты, которые блокируют загрузку страницы (чаще всего это счетчики метрики и аналитики). Можно в head подключить критический css, но в будущем могут быть проблемы при разработке, я от этого отказался, да и не особо это отражается на скорости. Чаще всего, перечисленного достаточно, чтобы оказаться в зеленой зоне по Google page speed, естественно при условии быстрого хостинга. Если хотите поиграться с изображениями, то выгрузите их на компьютер и сожмите их чем-нибудь типа fileOptimizer
Название: Re: Оптимизация под Page Speed
Отправлено: Val_Ery от 04-03-2020, 22:03:20
Форматы JPEG 2000, JPEG XR и WebP

Из трех представленных форматов первый (jpeg 2000) полностью поддерживается только Сафари (картинки в этом формате увидят только владельцы макбуков, айфонов/айпадов и аймаков), второй (JPEG XR) - разработка мелкософта, но поддерживается только в ослике 11-ом (IE11). На сегодняшний день microsoft перестала осуществлять поддержку формата в своем "флагманском" браузере ёж (edge), но если у вас установлен windows 10, вы можете увидеть в списке установленных программ модуль поддержки webp.

Получается, на сегодняшний день webp - формат, поддерживаемый всеми мобильными браузерами и десктопными. Исключение составляют Сафари и IE11. Ослик в 10-ой винде от глаз рядового пользователя спрятан (многие и не знают, что он есть), а яблочники отказались выпускать Сафари для Windows (предполагается близкая смерть продукта). Поэтому можно без вопросов конвертировать свои картинки в webp. Гарантированно, 99% пользователей их увидят :)

стоит ли это делать

На моё ИМХО, да.
Вот здесь (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... Тогда придется искать плагины. Например, под ВордПресс плагинов куча. Но все монстроподобные, на мой взгляд.

с помощью чего конвертировать

Софта всевозможного множество, включая онлайн конвертеры. Из устанавливаемого под винду точно знаю, что можно конвертить в XnView, ImageMagick. Есть плагин для Фотошопа. Лично мне милее оригинальная гугловая утилита cwebp (консольная).
Есть пакет gulp-webp. Это если пользуетесь gulp...
Да чё там :) php-gd с getimagesize или imagewebp (это если версия php на сервере, где сайт, ниже чем 7.1).

В общем, вариантов "с помощью чего" множество.
Название: Re: Оптимизация под Page Speed
Отправлено: KEBUH от 04-03-2020, 22:44:25
WebP  лучше не делать, его не все браузеры нормально воспринимают, поэтому на джепегах, сжатых через Оптимизиллу, вполне можно остановиться. на 30-50% режь качество - глазу не заметно, а по весу под 80% упадёт.
Название: Re: Оптимизация под Page Speed
Отправлено: Val_Ery от 05-03-2020, 06:21:19
Относительно поддержки webp: лучше сами  посмотрите (https://caniuse.com/#search=Webp), кто что поддерживает. А советы пожать жипеги с 50% лучше игнорируйте, ибо на результат без слез не взглянешь
Название: Re: Оптимизация под Page Speed
Отправлено: justmary31 от 05-03-2020, 10:06:11
Всем спасибо за советы!
Название: Re: Оптимизация под Page Speed
Отправлено: TipTopSeo от 07-03-2020, 16:57:23
Оптимизация под Page speed относительная. Лучше потестите загрузку самого сайта, на сколько он быстро загружается на таких сервисах как: ГТметрикс или вебпейджспид.
Название: Re: Оптимизация под Page Speed
Отправлено: <seo>Алексей</seo> от 18-03-2020, 10:05:07
 Ох уж этот раздутый speed test. Лучше сравните выдачу сайтов по вашим запросам. Если есть в выдаче (а они есть наверняка) сайт, с более худшими показателями, то не обращайте на этот показатель внимание. Копайте в другом месте ;)
Название: Re: Оптимизация под Page Speed
Отправлено: Ruby BOOM от 18-03-2020, 10:35:35
А насколько ужасные показатели? Можно цифры?
Если есть реклама на сайте, то попробует отключить ее и проверить сайт еще раз. У меня реклама отнимает половину баллов. Так что возможно дело и не сайте-то вовсе.
Название: Re: Оптимизация под Page Speed
Отправлено: vold57 от 18-03-2020, 12:40:41
Ох уж этот раздутый speed test. Лучше сравните выдачу сайтов по вашим запросам. Если есть в выдаче (а они есть наверняка) сайт, с более худшими показателями, то не обращайте на этот показатель внимание. Копайте в другом месте ;)

Копать нужно только в одном месте, так как лопата только одна. Или переспам убираем, или функционал сайта улучшаем, или тайтлы правим или ссылки покупаем или скорость загрузки оптимизируем.  ;D   

Если есть реклама на сайте, то попробует отключить ее и проверить сайт еще раз. У меня реклама отнимает половину баллов. Так что возможно дело и не сайте-то вовсе.

Так вывод какой? Если реклама отнимает часть балов, то оптимизировать время загрузки страниц не нужно?
Название: Re: Оптимизация под Page Speed
Отправлено: dionisvl от 18-03-2020, 13:06:45
WebP сжимает очень хорошо причем без потери качества, и сайт начинает открываться гораздо быстрее. Сейчас его поддерживают все кроме яблок.
Это легко решить тегом picture
(Могу ускорить ваш сайт до 1 сек в десктопе и 4 сек в мобилке - ДОРОГО)
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 18-03-2020, 14:09:45
Просмотрев все сообщения хочу ответить на два тезиса, авторы которых используют устаревшую информацию.

1) Перенести все скрипты, шрифты и файлы на свой сайт.

Относительно js и css файлов согласен. Это значительно ускоряет загрузку страницы. Особенно если они объединяются с помощью плагина, минимизируются и поддаются gzip сжатию. Переносить их нужно, даже основной файл библиотеки js. Это хорошо прибавит в скорости. 

Но по поводу шрифтов ситуация обратная. По крайне мере, если  речь идет о гугл шрифтах. Буквально пару дней назад делал тесты на нескольких своих сайтах. Шрифты были встроены через гугл. Скачал их, внедрил на сайты локально. Как результат скорость загрузки страницы упала на 10%. Вернул обратно как было и скорость возросла обратно.

2) Результаты PageSpeed Insights условные и притянутые за уши.

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

К тому же в Google Search консоль появился пункт "Скорость загрузки". Пока как экспериментальный. Но данные он берет как раз таки из своего инструмента PageSpeed Insights. И этот параметр скорости загрузки в ближайшее время будет влиять на ранжирование. Если уже не влияет. Так что оптимизация именно под тестер от Гугла становится как никогда актуальной.
Название: Re: Оптимизация под Page Speed
Отправлено: alexakap от 18-03-2020, 14:38:21
Но по поводу шрифтов ситуация обратная. По крайне мере, если  речь идет о гугл шрифтах. Буквально пару дней назад делал тесты на нескольких своих сайтах. Шрифты были встроены через гугл. Скачал их, внедрил на сайты локально. Как результат скорость загрузки страницы упала на 10%. Вернул обратно как было и скорость возросла обратно.

Вероятно, вы просто как то неправильно их поставили. Перенос шрифтов к себе на сайт позволяет значительно прибавить в скорости. Это даже визуально должно быть заметно. Как минимум снижения быть не должно на нормальном сервере. Давайте сайт, на котором скорость после переноса упала, вечером посмотрю, скачаю ваши шрифты и напишу css. Я сотни две сайтов на ВП оптимизировал по скорости и не было такого, что скорость после переноса упала бы. И мы говорим про оптимизацию под google page speed, а не про оптимизацию скорости. Это немного разные вещи. Например, гугл дает дополнительные "очки" за то, что шрифты подключены со свойством font-display: swap; хотя на скорости это не отражается
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 18-03-2020, 14:44:24
Вероятно, вы просто как то неправильно их поставили. Перенос шрифтов к себе на сайт позволяет значительно прибавить в скорости. Это даже визуально должно быть заметно. Как минимум снижения быть не должно на нормальном сервере. Давайте сайт, на котором скорость после переноса упала, вечером посмотрю, скачаю ваши шрифты и напишу css. Я сотни две сайтов на ВП оптимизировал по скорости и не было такого, что скорость после переноса упала бы. И мы говорим про оптимизацию под google page speed, а не про оптимизацию скорости. Это немного разные вещи. Например, гугл дает дополнительные "очки" за то, что шрифты подключены со свойством font-display: swap; хотя на скорости это не отражается

Пожалуйста. Шрифты были внедрены с помощью:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Сайт: alimshake.com

На данный момент шрифты внедряются через гугл.
Название: Re: Оптимизация под Page Speed
Отправлено: alexakap от 18-03-2020, 15:56:19
Пожалуйста. Шрифты были внедрены с помощью:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Сайт: alimshake.com

На данный момент шрифты внедряются через гугл.

У вас используется noto sans. Это специальный шрифт, который выглядит одинаково на разных языках. Все шрифты суммарно весят вроде 12 МБ. У вас на сайте какие языки используются? Только английский?

Добавлено: 18-03-2020, 16:09:41

Пожалуйста. Шрифты были внедрены с помощью:

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Сайт: alimshake.com

На данный момент шрифты внедряются через гугл.

Собственно, сейчас скорость загрузки фиксируем 74/98
Файлы шрифтов по ссылке https://yadi.sk/d/YEVk9VFuzLK2hQ
В корне сайта создаете папку fonts, заливаете туда шрифты
В начало css файла или хэдер сайта добавляете

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 18-03-2020, 16:36:26
У вас используется noto sans. Это специальный шрифт, который выглядит одинаково на разных языках. Все шрифты суммарно весят вроде 12 МБ. У вас на сайте какие языки используются? Только английский

Да, только английский.

В корне сайта создаете папку fonts, заливаете туда шрифты
В начало css файла или хэдер сайта добавляете

Посмотрел ваш код. Вспомнил, что что-то подобное уже пробовал тоже. Но попробую еще раз с вашими файлами. Спасибо.

Добавлено: 18-03-2020, 16:42:39

Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Только что обратил внимание, что вы только woff2 поставили. А как же другие форматы? То, что вы передали через яндекс диск у меня есть. Только к тому же еще все остальные форматы шрифтов.
Название: Re: Оптимизация под Page Speed
Отправлено: Val_Ery от 18-03-2020, 17:26:49
Но по поводу шрифтов ситуация обратная. По крайне мере, если  речь идет о гугл шрифтах.
Ну, мы же с вами (надеюсь) в России жевем... Или вы уже забыли, как телеграм блoкировали?

Я готов пожертвовать 5% скорости загрузки моего любимого Montserrat. Ибо РКН у нас полномочий не лишили. К тому же, суверенный интернет наступает...
Название: Re: Оптимизация под Page Speed
Отправлено: alexakap от 18-03-2020, 17:37:24
Только что обратил внимание, что вы только woff2 поставили. А как же другие форматы? То, что вы передали через яндекс диск у меня есть. Только к тому же еще все остальные форматы шрифтов.

Откройте код сайта и перейдите по ссылке, по которой у вас подключаются шрифты
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
У вас подлючаются все возможные языки в формате .woff2
Вам нужен только латинский с font-weight 400 и 700, поэтому вам надо только 2 файла
Я не против, можете подключить все. Но зачем, если они не используются
Название: Re: Оптимизация под Page Speed
Отправлено: webPC от 18-03-2020, 17:56:56
на системе 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
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 18-03-2020, 18:04:14
Откройте код сайта и перейдите по ссылке, по которой у вас подключаются шрифты
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap" rel="stylesheet">
У вас подлючаются все возможные языки в формате .woff2
Вам нужен только латинский с font-weight 400 и 700, поэтому вам надо только 2 файла
Я не против, можете подключить все. Но зачем, если они не используются

Возможно, что падение скорости у меня было из за того, что я все файлы подключал на два типа шрифта? Потому что speed insight у меня как раз на эти файлы и ругался и их размер.
Название: Re: Оптимизация под Page Speed
Отправлено: pihovkin от 18-03-2020, 18:09:43
Буквально сейчас сами этим занимаемся и перепробовали различные методы.
Естественно картинки нужно делать те, как рекомендует PageSpeed Insights.
Также не маловажным будет применить Laizy Load к страницам, от которых требуется высокая скорость загрузки. Также необходимо подключать более легкие библиотеки. Это нам дало примерно 5% к приросту скорости. Ну и как вариант - делить js на чанки.
Название: Re: Оптимизация под Page Speed
Отправлено: lalmazl от 20-03-2020, 02:36:24
главное не используйте data-src для img, ужасно раздражает такой подход по замену стандартного тега, лучше просто для хрома loading="lazy".
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 20-03-2020, 13:10:56
главное не используйте data-src для img, ужасно раздражает такой подход по замену стандартного тега, лучше просто для хрома loading="lazy".

Насчет loading="lazy". Пробовал эту фишку. Нифига не работает. Может что-то делаю не так? Прописываю тэгу img вот так: <img src="/images/image.jpg" loading="lazy"/>
Название: Re: Оптимизация под Page Speed
Отправлено: Val_Ery от 20-03-2020, 13:54:16
Насчет loading="lazy". Пробовал эту фишку. Нифига не работает. Может что-то делаю не так? Прописываю тэгу img вот так: <img src="/images/image.jpg" loading="lazy"/>
Там несколько моментов...
1. Не надо закрывать  img. У вас все-таки html5
2. Работает эта фенечка тока в хромообразных, исключая сафари. В огнелисе работать не будет
3. С самим атрибутом, вроде как, рекомендуют использовать указанные в теге img ширину и высоту
4. Говорят, что есть проблемы с зазорами. Ну, то есть, картинка должна появляться при скролле. Если картинок много и все разной размерности, хром не может правильно рассчитать момент появления для каждой из них
5. Если желаете использовать картинки для разных брейкпоинтов, то атрибут надо применять только к основному изображению:
picture - > source + img
Источники, как и положено, по брейкпоинтам, а в имг - атрибут...
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 20-03-2020, 14:24:02
Там несколько моментов...
1. Не надо закрывать  img. У вас все-таки html5
2. Работает эта фенечка тока в хромообразных, исключая сафари. В огнелисе работать не будет
3. С самим атрибутом, вроде как, рекомендуют использовать указанные в теге img ширину и высоту
4. Говорят, что есть проблемы с зазорами. Ну, то есть, картинка должна появляться при скролле. Если картинок много и все разной размерности, хром не может правильно рассчитать момент появления для каждой из них
5. Если желаете использовать картинки для разных брейкпоинтов, то атрибут надо применять только к основному изображению:
picture - > source + img
Источники, как и положено, по брейкпоинтам, а в имг - атрибут...

Спасибо за разъяснения. Но что-то слишком много нюансов. Пока буду и дальше на jquery использовать.
Название: Re: Оптимизация под Page Speed
Отправлено: Val_Ery от 20-03-2020, 15:17:37
Но что-то слишком много нюансов. Пока буду и дальше на jquery использовать.
Там один Самый Главный нюанс: оно работает только в хромообразных. И я совсем не уверен, что будет работать в мобильном хроме.

P. S. Сам такого никогда не использовал. Потому что пользуюсь Огнелисом, а там это - не работает.
P. P. S. Если жикверю приходится ставить только ради ленивой загрузки, посмотрите, как это реализовано на Javascript (там совсем не сложно, описаний множество и... не надо подгружать jQuery).
Название: Re: Оптимизация под Page Speed
Отправлено: 4X_Pro от 23-03-2020, 03:01:48
Но по поводу шрифтов ситуация обратная. По крайне мере, если  речь идет о гугл шрифтах. Буквально пару дней назад делал тесты на нескольких своих сайтах. Шрифты были встроены через гугл. Скачал их, внедрил на сайты локально. Как результат скорость загрузки страницы упала на 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, 03:15:34

По поводу WebP: если на сервере стоит Apache, то его поддержка добавляется очень просто. В .htaccess можно добавить проверку на то, поддерживает ли броузер формат WebP (это передается в заголовке Accept) и если да, выдавать его вместо JPEG:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Соответственно, файлы WebP должны быть с теми же именами и по тем же путям, что и JPEG, но с расширением .webp.
Если на сервере установлен ImageMagick и есть SSH-доступ, то можно конвертацию можно сделать автоматически:
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.Единственный минус — может вырасти нагрузка на ввод/вывод из-за необходимости при каждом обращении проверять существование файла.
Название: Re: Оптимизация под Page Speed
Отправлено: Alines от 23-03-2020, 13:28:05
Недавно пришел к выводу, что склеивать файлы в один имеет смысл только в том случае, если не используется HTTP/2. В случае, если на сервере есть поддержка HTTP/2, достаточно просто обеспечить асинхронную загрузку для всех CSS, кроме основного (который обычно style.css называется) и отложенную (с атрибутом defer) загрузку JavaScript. В этом случае не будет задержки отображения до момента, когда прогрузится и обработается весь огромный склеенный CSS-файл, а только до момента загрузки основного.

Может я что-то не понимаю, но сколько не пытался использовать defer или async, перестает работать тот или иной скрипт вообще. У меня используется HTTP/2. Я объединил все CSS в один файл и все JS в один файл, минимизировал и сжал. Скорость выросла на 10-15%. Разница ощутима.