Йо-йо! Отличная штука SEO. Никто не знает, что делать наверняка, почему сайт «не в топ» и почему онлайн-бизнес не работает. И в поисках истинной причины владельцы сайтов становятся как сорокалетние тётушки, которые верят всякой ерунде цыганок на рынке. И вот взяв в руки клавиатуру и набрав запрос в поисковике они видят «магический совет» — «100 баллов по google page speed и будет тебе счастье». Ни чего плохого в стремлении ускорить свой сайт нет, только fl и всякие kwork'и пестрят заявками типа «оптимизировать сайт до 100 баллов на page speed», а сами владельцы сайтов не понимают сколько на самом деле может стоить им эта оптимизация.
Сегодня я хочу рассказать почему достичь заветного значения практически невозможно на некоторых решения или это будет весьма затратно. Я разберу некоторые советы page speed и расскажу о них.
В этом совете написано "Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.". Этому совету, по моему мнению, соответствовать тяжелее всего по нескольким причинам.
Для проверки используем caniuse, чтобы узнать поддержку форматов браузерами. На этом сайте мы узнаём, что JPEG 2000 поддерживается только safari (кроме версии для windows), JPEG XR для IE. С WebP всё лучше, но угадайте кто его не поддерживает?!) Правильно! Safari. Таким образом мы узнаём, что нет универсального формата и если вы захотите использовать их у себя то придётся грузить как минимум 2 формата. Это как минимум время, а как максимум вы доплатите дизайнеру, который делает вам баннеры.
Конечно же, доплатить 500 рублей дизайнеру не такая уж большая проблема, но вот разобраться с CMS это не такая простая задача. На данный момент у меня получилось проверить поддержку на 3-х CMS:Wordpress, Bitrix, Joomla. Ни одна из них не поддерживает из «коробки» ни один из перечисленных форматов. На Wordpress есть несколько плагинов которые говорят, что делают webp, но по факту нет ни одного бесплатного плагина для этого. Кроме того, даже в этих случаях загрузить webp в тело статьи не удаётся, при сохранении поста ссылка на файл неподдерживаемого формата удаляется. В Битриксе даже модуля такого нет. Нужно писать самому, что для wordpress, что для битрикса. Это не простые доработки, требующие хороших знаний и достаточного количества времени.
Текст совета: "Оптимизированные изображения загружаются быстрее и расходуют меньше мобильных данных". Это очень хороший совет, но в действительности он будет всегда ругаться на «большие» картинки, даже если на «маскималках» пройтись по своим изображениям в wordpress'е плагином «Winsite Image Optimizer» на который есть ссылка в справке гугла (ссылка на imageoptim.com) то всё равно его недовольство останется.
Что остаётся делать? Лучше всего еще на «стадии фотошопа» сохранять файлы в минимальном качестве и делать это лучше всего через импорт, а не через «сохранить как». Разница в размере бывает колоссальной.
Текст совета: "Некоторые ресурсы препятствуют загрузке контента страницы. Рекомендуем настроить загрузку необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов."
Этот совет крайне простой если работать с самописным сайтом, если вы знаете «что, где, когда». Но если речь идёт о CMS и использования плагинов и модулей то это сделать сложно. Например в Wordpress всё упирается в используемые плагины. Для решения этой проблемы придётся поковырять код плагинов и найти там как они подключают свои скрипты (и jquery в придачу). Далее с помощью wp_deregister_script убираем подключение скриптов из плагина и подгружаем их в нужном месте, где нам заблагорассудится.
Еще одним способом является сжатие скриптов и/или стилей в один файл. Этот способ действительно даёт много баллов по page speed, но по факту может замедлить отрисовку контента, а часть javascript не отработает.
Поэкспериментировав с этим способом, я увидел, что page speed показывает ухудшение параметра «Приблизительное время задержки при вводе», грубо говоря сайт на мобильных начинает тормозить. И чем больше сжать (слить в один файл / слить в один файл и минифицировать) файлы тем хуже эти параметры. То есть смартфону приходиться напрячься, чтобы это прочитать и исполнить.
Простой, как мне кажется совет, но не всегда зависит от web-программиста. Пройдитесь профилировщиком по вашему сайту и найдите тот код, который тормозит. Иногда бывает такое, что один и тот же код вызывается по несколько раз в одном и том же файле. Запишите результат исполнения в переменную и используйте её если это уместно. Используйте кэширование. Я стараюсь использовать memched, за него плачу своему хостеру от 30 до 120 рублей в месяц в зависимости от проекта. Думаю что это поможет вам.
Тест рекомендации "Чтобы уменьшить время до начала взаимодействия, рекомендуем использовать принцип lazy loading для скрытых изображений после того, как все важные ресурсы будут загружены".
Думаю что сделать это довольно просто и в интернете есть множество примеров как это сделать. Например есть хорошая статья на CSS-tricks. Для работы его кода, главное изменить атрибуты изображения. Это довольно просто. Lazy load — это хорошо, но +1 javascript файл.
В начале статьи я рассказал о довольно противоречивых советах, а к кончу перешёл к действенным. Да, конечно оптимизация кода это хорошо, но владельцы сайтов думают о прибыли и что данные преобразования приведут к увеличению прибыли через SEO.
Нужно понимать, что оптимизация кода сайта это только первый шаг в продвижении, а само поисковое продвижение эффективно только тех сайтов, где на продукт есть сформированный спрос.
Не будьте параноиками, знайте, что для продвижения сайта по SEO должен быть сформированный спрос, удовлетворяйте потребности своих клиентов и тогда ваш сайт будет в ТОП.
Сегодня я хочу рассказать почему достичь заветного значения практически невозможно на некоторых решения или это будет весьма затратно. Я разберу некоторые советы page speed и расскажу о них.
Используйте современные форматы изображений
В этом совете написано "Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.". Этому совету, по моему мнению, соответствовать тяжелее всего по нескольким причинам.
Поддержка браузерами форматов JPEG 2000, JPEG XR и WebP
Для проверки используем caniuse, чтобы узнать поддержку форматов браузерами. На этом сайте мы узнаём, что JPEG 2000 поддерживается только safari (кроме версии для windows), JPEG XR для IE. С WebP всё лучше, но угадайте кто его не поддерживает?!) Правильно! Safari. Таким образом мы узнаём, что нет универсального формата и если вы захотите использовать их у себя то придётся грузить как минимум 2 формата. Это как минимум время, а как максимум вы доплатите дизайнеру, который делает вам баннеры.
Поддержка CMS
Конечно же, доплатить 500 рублей дизайнеру не такая уж большая проблема, но вот разобраться с CMS это не такая простая задача. На данный момент у меня получилось проверить поддержку на 3-х CMS:Wordpress, Bitrix, Joomla. Ни одна из них не поддерживает из «коробки» ни один из перечисленных форматов. На Wordpress есть несколько плагинов которые говорят, что делают webp, но по факту нет ни одного бесплатного плагина для этого. Кроме того, даже в этих случаях загрузить webp в тело статьи не удаётся, при сохранении поста ссылка на файл неподдерживаемого формата удаляется. В Битриксе даже модуля такого нет. Нужно писать самому, что для wordpress, что для битрикса. Это не простые доработки, требующие хороших знаний и достаточного количества времени.
Настройте эффективную кодировку изображений
Текст совета: "Оптимизированные изображения загружаются быстрее и расходуют меньше мобильных данных". Это очень хороший совет, но в действительности он будет всегда ругаться на «большие» картинки, даже если на «маскималках» пройтись по своим изображениям в wordpress'е плагином «Winsite Image Optimizer» на который есть ссылка в справке гугла (ссылка на imageoptim.com) то всё равно его недовольство останется.
Что остаётся делать? Лучше всего еще на «стадии фотошопа» сохранять файлы в минимальном качестве и делать это лучше всего через импорт, а не через «сохранить как». Разница в размере бывает колоссальной.
Устраните ресурсы, блокирующие отображение
Текст совета: "Некоторые ресурсы препятствуют загрузке контента страницы. Рекомендуем настроить загрузку необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов."
Этот совет крайне простой если работать с самописным сайтом, если вы знаете «что, где, когда». Но если речь идёт о CMS и использования плагинов и модулей то это сделать сложно. Например в Wordpress всё упирается в используемые плагины. Для решения этой проблемы придётся поковырять код плагинов и найти там как они подключают свои скрипты (и jquery в придачу). Далее с помощью wp_deregister_script убираем подключение скриптов из плагина и подгружаем их в нужном месте, где нам заблагорассудится.
Еще одним способом является сжатие скриптов и/или стилей в один файл. Этот способ действительно даёт много баллов по page speed, но по факту может замедлить отрисовку контента, а часть javascript не отработает.
Поэкспериментировав с этим способом, я увидел, что page speed показывает ухудшение параметра «Приблизительное время задержки при вводе», грубо говоря сайт на мобильных начинает тормозить. И чем больше сжать (слить в один файл / слить в один файл и минифицировать) файлы тем хуже эти параметры. То есть смартфону приходиться напрячься, чтобы это прочитать и исполнить.
Сократите время ответа сервера
Простой, как мне кажется совет, но не всегда зависит от web-программиста. Пройдитесь профилировщиком по вашему сайту и найдите тот код, который тормозит. Иногда бывает такое, что один и тот же код вызывается по несколько раз в одном и том же файле. Запишите результат исполнения в переменную и используйте её если это уместно. Используйте кэширование. Я стараюсь использовать memched, за него плачу своему хостеру от 30 до 120 рублей в месяц в зависимости от проекта. Думаю что это поможет вам.
Отложите загрузку скрытых изображений
Тест рекомендации "Чтобы уменьшить время до начала взаимодействия, рекомендуем использовать принцип lazy loading для скрытых изображений после того, как все важные ресурсы будут загружены".
Думаю что сделать это довольно просто и в интернете есть множество примеров как это сделать. Например есть хорошая статья на CSS-tricks. Для работы его кода, главное изменить атрибуты изображения. Это довольно просто. Lazy load — это хорошо, но +1 javascript файл.
В начале статьи я рассказал о довольно противоречивых советах, а к кончу перешёл к действенным. Да, конечно оптимизация кода это хорошо, но владельцы сайтов думают о прибыли и что данные преобразования приведут к увеличению прибыли через SEO.
Нужно понимать, что оптимизация кода сайта это только первый шаг в продвижении, а само поисковое продвижение эффективно только тех сайтов, где на продукт есть сформированный спрос.
P.S.
Не будьте параноиками, знайте, что для продвижения сайта по SEO должен быть сформированный спрос, удовлетворяйте потребности своих клиентов и тогда ваш сайт будет в ТОП.
