Лого www.SiteHere.ru

PageSpeed Insights на 100% — Часть 1

Для тех, кто еще не знает об этом сервисе: Google PageSpeed Insights это сервис, который анализирует содержимое страницы сайта, а затем предлагает способы решения определенных проблем. На первый взгляд, это прекрасный сервис, который всё раскладывает по полочкам и пишет что необходимо исправить. Но почему тогда возникает столько трудностей при исправлении проблем, которые предлагает сервис PageSpeed Insights.

В основном трудности возникают из-за того, что большинство используют различные CMS. А это не HTML страница с 3-мя папками (CSS, IMG, JS) где всё легко найти. На CMS установлено очень много плагинов, которые находятся в отдельных папках. Также сама тема (шаблон) для новичка кажется просто ужасно сложной и он боится вносить любые изменения, чтобы ни в коем случае не навредить сайту.

Прежде чем приступать к основной части статьи, я хочу порекомендовать Вам следующие статьи по оптимизации:

На что влияет скорость загрузки страниц сайта?

Прежде чем начинать оптимизировать давайте посмотрим на что же влияет загрузка страниц и стоит ли вообще заниматься оптимизацией:

  • 1. Потеря потенциальных клиентов — все мы постоянно торопимся и не хотим ждать даже лишнюю секунду, потому что информации в интернете достаточно и можно найти другой сайт, который загрузиться намного быстрее.
  • 2. Ухудшение поведенческих факторов — из первого пункта вытекает то, что человек не дожидаясь полной загрузки страницы покидает ее, а это поисковой системой считается как отказ. Чем больше процент отказов, тем, по мнению поисковой системы, менее полезным считается контент и сайт понижается в поисковой выдаче.
  • 3. Проблемы с мобильным трафиком — сейчас большинство для поиска информации в интернете используют мобильные устройства. Скорость интернета в мобильных гаджетах оставляет желать лучшего. Но никто не хочет терять дополнительный трафик на сайт, поэтому необходимо выжать максимум из оптимизации сайта для мобильных устройств как по скорости загрузки, так и по удобству просмотра.
  • 4. Алгоритм mobile-friendly — который Google официально объявил весной 2015 года. Согласно ему страницы, которые корректно отображаются на мобильных устройствах будут ранжироваться выше в результатах мобильного поиска.

Ссылка на сервис — Google PageSpeed Insights

Ускорил ли я свой сайт на 100 баллов по меркам Google PageSpeed Insights?

Google PageSpeed Insights 100 баллов

На изображении выше Вы можете видеть результат. Да, я смог даже из сайта на CMS выжать 100 баллов. Сейчас Вы можете проверить и начать писать в комментариях о том, что у меня нету 100, а лишь 98 баллов. И говорить о том, что плох параметр «Время ответа от сервера». Но в данном цикле статей Вы получите рекомендации как выжать максимум и получить 100 баллов. Главное выполняйте все рекомендации, которые я буду давать в статьях и на видео.

Для каких сайтов и CMS я буду давать решения?

Рекомендации, которые Вы получите по решению той или иной проблемы можно применить абсолютно на любом сайте: будет ли это лендинг на чистом HTML или сайт под управлением CMS.

Также конкретные рекомендации получат пользователи сайтов под CMS WordPress. Здесь я буду также говорить о плагинах, которые позволяют помочь в решении отдельной проблемы.

Практика

Предварительно сделайте резервную копию Вашей темы (шаблоны), если Вы используете CMS или резервную копию Вашего лендинга.

Начнем мы с самых простых методов оптимизации и будем двигаться к более сложным. Вам лишь необходимо успевать внедрять мои рекомендации.

1 Проблема

Сегодня мы рассмотрим сразу 2 пункта: "Оптимизируйте Javascript" и "Оптимизируйте CSS".

2 Решение

Смотрите видео, чтобы узнать о том, как оптимизировать Javascript и CSS, а также какие нюансы при использовании CMS бывают.

Оптимизация файлов индивидуальна для каждого отдельного сайта, поэтому внимательно изучите то, о чем я рассказываю на видео и сделайте по аналогии для своего сайта.

Список сервисов для оптимизации JS файлов:

  • Javascript Minifier
  • Online Javascript Compression Tool
  • Minify Javascript

Список сервисов для оптимизации CSS файлов:

  • CSS Compressor
  • CSS Minifier
  • Minify CSS

Вывод

Просто чтение статьи не поможет ускорить Ваш сайт. Поэтому сразу после просмотра видео делайте то, о чем я там рассказал.

Если Вы хотите, чтобы я показывал процесс решения проблем с оптимизацией на примере Вашего сайта — тогда свяжитесь со мной с помощью данной формы — Задать вопрос. Тогда в следующих видео я буду рассказывать на примере Вашего сайта способы решения проблем, которые рекомендует сервис Google PageSpeed Insights.

Если Вы хотите узнать как ускорить именно Ваш сайт и получить индивидуальные рекомендации: тогда Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!

Успехов!

С Уважением, Юрий Немец

PageSpeed Insights на 100% — Часть 1 5.00/5 (100.00%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

20 комментариев к записи
  • Алексей

    Юрий, подскажите, как можно закешировать внешние ресурсы, метрику и аналитикс? Все рекомендации выполнил, но 100% не получить не закешировав эти ресурсы.

     
    • Юрий

      Алексей, обо всём расскажу в последующих статьях.

       
  • Алексей

    По поводу минификации css, js, html, все-таки лучше использовать сборщик Grunt или Gulp

     
    • Юрий

      Сомневаюсь что новичку под силу установить Node.js, а затем всё скрипты собрать и оптимизировать с помощью данных сборщиков.

       
      • Алексей

        По поводу новичка согласен, но как использовать Critical Css без Node.js

         
  • Егор

    Привет, Юра,  у меня отлично отрабатывает плагин Autoptimize WordPress. Не нужно плясать вокруг скриптов и стилей.  92 и 83 скорость.  Ну а так, в лендах стили, которые не влияют на формирование страницы конечно лучше в футер запихать.

     

    Кстати, посмотрел, гугл оптимизирует картинки неправильно. У меня стоит размер 100% на картинке. А он мне впихивает уменьшенную. Получается, когда разрешение монитора 750px к примеру, у меня блок и картинка растягивается на весь экран. А когда большой монитор, то у меня картинка, к примеру 350p. А подгружаю я оригинал 750px под все размеры. Это нужно приготавливать для  точек прерывания разные по размеру картинки, или хотя-бы пару-тройку картинок.  Мутно как-то это все.

     
  • ЯнеЛена

    Оптимизация java и css, интересно конечно, но  по сути любой нормальный верстальщик должен осознавать что это " полная шляпа". Просто ручками убираем лишние пробелы. коменты, ссылки и всякий "мусорок". С основным телом кодом сделать ничего нельзя, это ясно как день. И никакой сервис в этом не поможет.  И лучше чем руками это не сделать, это тоже все, кто в "адеквате" отлично понимают.

    Ну, если, грузится страница с "торомозком" при установке скрипта. Почистил код, но не помогло… Не ставь этот скрипт, или другой скрипт подбирай. Главное, если сайт адаптивный, посмотри как он грузится на мобиле и сравни время загрузки с другими сайтами. Это можно сделать просто, используйте инструмент — глаза.

     
  • Галина Нагорная

    Для новичка это сделать нереально!
    " …Вырезать стили у плагина…"
     

     
    • Sergei Ivanzov

      Я новичек, но сделал. Еще код Unicorn — Совмещенный валидатор W3C сделал чистым.

      https://developers.google.com/

      https://validator.w3.org/

       

       
  • Андрей Зимин

    Впервые вижу, чтобы сайт был ускорен на все сто баллов по Гуглу, обычно доходят до 85 — 90. Вам повезло.

     
    • Юрий

      Здравствуйте, Андрей!

      В технической части говорить о везении не стоит. Здесь все логично: делаешь определенные действия — получаешь закономерный результат.

       
  • Андрей Зимин

    Добрый день, Юрий. А как вы относитесь к плагину кеширования и сжатия Rocket?

     
    • Юрий

      Здравствуйте, Андрей. С плагинами кэширования не очень люблю работать вообще, так как постоянно работаю над улучшением шаблона своего сайта.

       

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

       
  • Андрей Зимин

    Понятно, это плагин Ракета, довольно раскрученный и расхваленный. Но я особой скорости не заметил. Наоборот, он тратит 30% от времени загрузки остальных плагинов. В таком случае воспользуюсь другим, например WP — Cache. На его загрузку уходит всего 4% времени от остальных плагинов, а как уверяют многие, по производительности практически не уступает.

     
  • Алексей

    спасибо за то, что показали как перенести css в футер) нигде такого еще не видел

     
  • Андрей Зимин

    Добрый день, Юрий. А как вы относитесь к сертификатам безопасности. У вас смотрю, его пока нет?

     
    • Юрий Немец

      Добрый день, Андрей!

      Пока еще многие, кто купил сертификаты, сделали ошибку при выборе сервиса сертификатов, и сделали для своих сайтов не лучше.

      На мой взгляд, когда только только Google или Яндекс вводит новую фишку, не спешить ее применять, а немного подождать и посмотреть какие нюансы есть при внедрении, но это не всегда следует сделать, так как есть разные ситуации.

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

       
      • Андрей Зимин

        Понятно, спасибо!

         
  • Александр

    Юрий, а как правильно сохранять картинки СРАЗУ? Чтобы этот инструмент гугла сразу же видел их как оптимизированные?

    Лично я всю жизнь пользуюсь CTRL+SHIFT+S (сохранить для веб и устройств), прогрессивный jpg, качество — 60. 

    Если делаю , например 50, то уже заметна потеря качества и картинка явно неприглядная. Как мне сразу делать все картинки правильно?

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *