Удаляем из верха страницы JavaScript и CSS по рекомендации PageSpeed Insights

Дата: / Автор поста:


Доброго времени суток с вами я Лифанов Валентин и блог wpsovet.ru. Я продолжаю цикл статей посвященных требованиям сервиса PageSpeed Insights, сегодня разберем грубейшее нарушение по мнению этого ресурса, оно звучит так «Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение», далее вы поймете почему оно одно из важных. Я продолжаю анализировать блог ruletov.net, и вот скриншот, который подтверждает ошибки.

Для начала немного теории.

Для оптимизации очень важна такая штука, как скорость загрузки, не буду хвалиться, но она у меня 100%. А самый важное из этого требования, отклик сайта при заходе на него и начальное формирование, а точнее то время за которое все это происходит, и чем оно меньше тем лучше. А теперь смотрите, нам важен быстрый отклик сайта, а как он быстро отзовется если в самом начале грузятся всякие js скрипты, стили всяких плагинов и тому подобное. Я зашел в код страницы и сразу увидел, глядите снимок (я только две строчки снял под ними, еще больше всего).

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

Данное правило срабатывает если, у вас в разделе <header>и<body> идут загрузки скриптов js. С этим надо бороться, но руками я ничего хорошего не добился, вроде все делал грамотно, перемещал все загрузки в раздел<footer>, перечитал множество статей и мануалов, одно делаешь, другое перестает работать. Пришел к выводу, либо я дурак, либо лыжи не едут.

Решение проблемы.

А разгадку я нашел, как ни прискорбно, в плагине Autoptimize, очень долго я сопротивлялся, но делать не чего. Ставиться он стандартно, я лично через поиск в самой административной панели. Я выяснил, что многие его ставят, чтобы не запариваться, да и нагрузка от него почти никакая. Поставив его я очень удивился, все стало работать как надо, и PageSpeed не ругается. Теперь собственно переходим к разбору плагина, потому как могут произойти проблемы в настройках. Заходим в настройки плагина и начинаем разбор.

Перед началом, сразу же включите расширенный режим, нажатием кнопки "Show Advansed Settings".

Параметры HTML, обязательно включаем, при этом всё будет перестроено, в самой теме вы ничего не обнаружите, но зайдя в исходный код, увидите там «месиво», просто плагин по максимуму сжимает содержимое, убирая лишние пробелов и переносы. Насчет «Сохранять комментарии», тут на ваше усмотрение, просто у вас в исходнике останутся все пометки в коде, я оставил пусть будет.

  1. Оптимизировать код JavaScript? Здесь ставим галочку. Маленько поясню, оптимизация сводиться к тому, что плагин, компонует js файлы меж собой и отправляет их прямиком в подвал сайта.
  2. Force JavaScript in <head>? Спорный, если у вас очень много jquerry, то при их перемещении в футер, они могут перестать работать.Но тогда я не совсем понимаю, для этого и ставиться Autoptimize, чтобы все переместить вниз, а тут вот такое, но в любом случае я не включаю, нет смысла, тем более jquery элементов, у меня только один.
  3. Look for scripts only in <head>?(deprecated)Переводиться как искать скрипты только в разделе head, и в скобочках, почему-то, не рекомендуется. Опять не понимаю, почему нельзя, именно этого нам и надо, чтобы всё из головы уходило в подвал, в любом случае отмечаем.
  4. Exclude scripts from Autoptimize. Этот пункт мне очень нравится, если у вас что-то перестало работать в результате работы этого плагина, то сюда просто прописываете название скрипта, и он затронут не будет, клевое решение.
  5. Add try-catch wrapping? Я не ставил здесь, она добавит к нерабочим скриптам свой тег, что предотвратит их использование, и помех для других. Во-первых, у меня нет нерабочих, во-вторых, мне не нужны какие-то теги в теле сайта, поисковики могут не так понять. Лучше сами проверьте работоспособность всего на блоге.

  1. Оптимизировать код CSS? Включаем чек бокс однозначно. Плагин все сделает сам, удалит лишние строчки в коде стилей, и поместит их на нужное место.
  2. Generate data: URIs for images?, Look for styles only in <head>?(deprecated), Inline and Defer CSS?Все эти вещи не включаем, они будут делать только хуже, описывать не буду.
  3. Inline all CSS? На скриншоте показано что галочка стоит, но пока ее выключил. Смысл в том что, когда он активен, почти весь файл стилей переносится в страницу. С одной стороны не идет загрузка стилей, а с другой код  становится громадным, что тоже дает нагрузку. Решайте сами, я пока окончательного вердикта вынести не могу.
  4. Exclude CSS from Autoptimize. То же самое что и в прошлом случае, список исключаемых, только уже css, которые плагин трогать не будет.

В самом конце включаем чек бокс и сохраняем все настройки, и на этом все сделано. Мы одним выстрелом, убили трех зайцев, сжали и оптимизировали html составляющую, js теперь загружаются правильно, а css максимально сбавило свой вес и нашло свое место.

P.S. А вам статья понравилась? Если честно не думал что получиться так все длинно, но зато все подробно.

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(18 голосов, в среднем: 4.6 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Олег

    Полезный и нужный совет по удалению из верха страницы JavaScript и CSS . Спасибо за информацию.

  • Петр

    Мне не особо это мешает. Но тем людям, которым не нравится полезно будет почитать данную статью.

  • Дмитрий

    Дано искал информацию по удалению из верха страницы JavaScript и CSS. На других ресурсах толком ничего не писали.

  • Дмитрий Донской

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

  • Олеся

    А я все голову ломала, где же мне найти такую информацию по удалению верха страницы JavaScript. Нашла.

  • Валерий

    ведь помню где то у вас видел это совсем забыл про рубрику оптиускорение.

    • Лифанов Валентин

      Вообще скоро все разобью на подразделы, чтобы понятнее где что лежит, а то ив рпавду не очень понятно. Валер как вам новая адаптация?

  • Валерий

    Да адаптация работает пару рекомендаций каких то, что в роботе нужно прописать а что?

  • Валерий

    Мне почему то не помогло

    • Лифанов Валентин

      Так подождите маленько, пока плагин сделает кэш.

  • Валерий

    Уже достаточно прошло времени, думаю все же менять нужно шаблон много там ненужного у меня думаю.

    • Лифанов Валентин

      Попробуйте в разделе оптимизации javascript оставить только первый пункт, остальные отключить, Css и Html не трогайте.

  • Валерий

    Поумнело, но до идеала еще далеко конечно.

    • Лифанов Валентин

      Надо смотреть изнутри.

  • Андрей

    Применил, спасибо.

    • Лифанов Валентин

      Пожалуйста Андрей, с новым годом.

  • Игорь Черноморец

    Привет Валентин! А я все не решаюсь оптимизировать скрипты вверху страницы. Может быть уже пора бы? :)

    А бекап не стоит ли сделать перед использованием плагина?

    • Лифанов Валентин

      Давно пора, проверьте через гугл! Бэкап в обязательном порядке надо.

      • Игорь Черноморец

        А ты не слышал о плагине Better WordPress Minify?

        Говорят, что он получше Autoptimize.

        Что скажешь?

        • Лифанов Валентин

          Заинтриговал, проверю результаты, отпишусь, сам им пользовался?

          • Игорь Черноморец

            Нет, сам не пользовался. Как проверишь, поделись результатами

          • Лифанов Валентин

            Хорошо, уже посмотрел его, настроек маловато, но сейчас протестирую.

  • Анна

    Установила Autoptimize, но показатели не изменились. Это означает, что плагин отказывается работать на моем блоге? :x

    • Лифанов Валентин

      Не может быть, все пункты как я написал сделали? После установки autoptimiza, очичстите кеш в плагине кеширования.

      • Анна

        Да, всё так сделала. Единственное отличие — в моей версии нет пункта Look for scripts only in ?(deprecated), на его месте стоит Also aggregate inline JS?

        • Лифанов Валентин

          Попробуйте оставить только галочки в главных пунктах, а подпункты не трогать.

          • Анна

            Пробовала разные варианты, ничего не помогает! Может конфликтует с каким плагином

          • Лифанов Валентин

            Ань пришли мне список плагинов на почту.

  • Светлана

    Здорово написано, а главное все разжевано, остается только проглотить. Обязательно займусь установкой плагина. Спасибо за статью. Мне вас сам бог послал. Теперь вы у меня в закладках и я думаю, ох как надолго. :smile:

    • Лифанов Валентин

      Аааааааааа, очень приятно.

      • Светлана

        Установила, блог летать стал. Есть еще конечно с чем бороться, но уже продвижение. Кстати, вы молодец, по ускорению и оптимизации так много и подробно написали. Все живу у вас.

        • Лифанов Валентин

          Только не в моей квартире :) Но я сейчас проверил, адаптивку делать надо, а то печалька.

          • Светлана

            Ага, печалька :cry:

          • Лифанов Валентин

            Я могу помочь в этом вопросе, адаптивный дизайн сделать, пока что бесплатно. Если что обращайтесь, копаться с кодах мне нравится.

  • Светлана

    А тему свою вы сами адаптировали или взяли уже готовый шаблон?

    • Лифанов Валентин

      Я и тему сам писал, а когда с адаптацией познакомился, то и так же сам сделал. В общем все с нуля, код чистейший, а css3 вообще без ошибок.

      • Светлана

        А у меня не получается что-то. Шаблон наверное проще поменять, хотя хочется самой все это дело добить. Для галочки.

        • Лифанов Валентин

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

          • Светлана

            Это я уже поняла, но сдаваться не хочу. Пока...

          • Лифанов Валентин

            Если что, знаете к кому обратиться.

  • Светлана

    Ну тогда я теперь от вас не отстану :twisted:

    • Лифанов Валентин

      Ради бога, я только рад. :)

  • Андрей

    `Generate data: URIs for images` все же лучше включить — эта опция по идее должна маленькие изображения стилей встраивать в файл стилей, что уменьшает количество запросов к серверу и значительно ускоряет скорость загрузки страницы, но сам css от этого увеличивается.

    Переносить css из `head` тега в низ страницы не рекомендуется хоть это и оптимизирует скорость однако ломает верстку во время загрузки.

    И еще инлайнить css в страницу — от этого намного больше вреда чем пользы.

    • Лифанов Валентин

      Хорошие советы, спасибо Андрей, но тут надо тестировать. На многих сайтах пробовал и видел что и css в подвале и инлайн используют, все хорошо, никто ни начто не ругается. Насчет ломает верстку, ничего подобного не видел, хотя может быть.

  • Александр

    Попробую себе поставить данный плагин. :arrow:

    • Лифанов Валентин

      Пробуйте, если что спрашивайте.

      • Александр

        Установил данный плагин, но он помог мне сделать сайт более оптимизирован только на 2 процента. Кстати а какая версия в статье описана. У меня совсем другие настройки, есть только четыре пункта:

        1Оптимизировать код HTML?

        2Сохранять комментарии HTML?

        3Оптимизировать код JavaScript?

        4Оптимизировать код CSS?

        Я поставил везде галочки, кроме комментариев. Пробовал и с комментариями, картина не меняется. :sad:

        • Лифанов Валентин

          А там есть скрытая кнопочка «hide advanced settings», в статье же написано, и все пункты как на ладони будут.

          • Александр

            А нашёл. Я думал эта кнопка не активная. Тут даже больше пунктов. Но всё равно эффекта никакого. Может это зависит от темы, которая установлена на сайте?

          • Лифанов Валентин

            Все может быть. Тут надо лезть во внутрь. Кстате если стоит плагин кеширования, то его надо очистить, а то эффекта не получите, потому что страниуцы будут идти из кеша плагина, вот как. Когда очистите плагин кеширвания ждите как минимум 20 минут когда создадуться новые копии страниц.

      • Артем

        Установил плагин но результаты те же, что не так?

        • Лифанов Валентин

          Надо смотреть.

  • Александр

    Валентин, привет! Посмотрел на сегодня в PageSpeed Insights ваш блог вот такая картинка:

    96 / 100 Рекомендации

    Исправьте по возможности:

    Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

    тоже самое и в мобильной версии...

    Вопрос? Так получается у вас плагин вкл. или нет? Как то не понятно? Хотя результаты очень даже приличные по скорости загрузки!

    • Лифанов Валентин

      Привет, с этими штуками ничего сделать не смогу, потому что там грузятся файлы с метрики и аналитикса, до их установки было все по 100%. Это не смертельно :)

  • Александр

    А вот теперь понятно стало, окей! Да к сожалению метрика и аналитика нужен!

    • Лифанов Валентин

      Их по-любому никак не закешируешь, конечно можно, но тогда статистика будет собираться только 2 раза в день :)

  • Виктор

    Что то не помогло

    • Лифанов Валентин

      А и не поможет, потому что все скрипты у вас грузятся с другого сервера, к примеру в контакте виджет и тому подобное, с этим ничего не поделаешь. Либо играйтесь с плагином.

  • Виктор

    Используйте кеш браузера

    Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

    Количество блокирующих скриптов на странице: 1. Количество блокирующих ресурсов CSS на странице: 1. Они замедляют отображение контента.

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

    Удалите код JavaScript, препятствующий отображению:

    news1biz.ru/…mize_15bdcbd3f23f3336719eaebfc385bdd9.js

    Оптимизируйте работу CSS на следующих ресурсах:

    stg.odnoklassniki.ru/share/odkl_share.css Как решить?

    • Лифанов Валентин

      Могу вам предложить свою помощь, если дадите мне свои данные для входа в админку и по фтп. Я попробую поковыряться и посмотреть.

  • Александр

    Здравствуйте. Установил плагин, сделал все как написали- ничего не поменялось. Оставил галки на первых пунктах- тоже все по-прежнему. В чем может быть причина?

    • Лифанов Валентин

      Приветствую, а теперь сделайте как в статье на других пунктах.

  • Василий

    Не помогло. Все как было.

    • Лифанов Валентин

      Ждите как минимум 2 часа.

  • Сергей

    установил плагин. попробовал разные настройки ставить, но ничего не помогло (((

    • Лифанов Валентин

      Надо подождать пока программа сделает свой кэш.

  • Илья

    Здравствуйте Валентин, установил плагин, правда версия уже более новая, о результатах отпишусь ;-)

    • Лифанов Валентин

      Приветствую, буду ждать.

      • Илья

        Может за одно и посоветуете что то, по оптимизации

        • Лифанов Валентин

          Присылайте вход для админки, я посмотрю что можно сделать.

  • Илья

    Большую часть жаво скриптов убрало, но некоторые отсались, так и должно?

    developers.google.com/spe...%2Famwomen.ru%2F

    Может сможете посмотреть мои настройки? может что не так сделал?

    • Лифанов Валентин

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

      • Илья

        Отправил, спасибо! ;-)

        • Лифанов Валентин

          Пока не за что :) Вечером посмотрю.

          • Илья

            Спасибо помог на УРА! ;-) :o

  • Артем

    Валентин! Можете взглянуть на сайт доступ к админу дам уже голову сломал с этими плагинами, не могу в толк взять что к чему перестали работать кнопки «условия доставки», «задать вопрос» и «условия оплаты»?

    • Лифанов Валентин

      Присылайте на почту, посмотрю, что к чему. Почта есть в контактах.

  • Валентин

    Спасибо огромное! Правда проблему решило не полностью, остались несколько css и js файлов, но в целом замечательно.

    • Лифанов Валентин

      Пожалуйста, наверное остались те которые с других сайтов грузятся.

  • Руслан

    Спасибо за инструкцию. Вроде работает, НО как было 90%, так и осталось, хотя во вкладке «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы» осталось всего 3 пункта (два из них — аналитика гугл, а третий — css самого плагина).

    Но совершенно случайно обнаружил интересную вещь:

    У меня был установлен скрипт кеширования. Так вот, при деактивации этого скрипта забыл стереть строчку my_cache_end (); , которая располагалась в конце файла index.php. В итоге гугл показал 96%, но одновременно выдал ошибку 500. Стираю эту строчку — ошибка пропадает, но на выходе имеем всё те же 90%.

    Валентин, у Вас есть мысли, как мне получить заветные 96% без ошибки?

    • Лифанов Валентин

      Какой плагин-скрипт кеширования используете?

    • Лифанов Валентин

      Установите плагин гиперкеш и все будет нормально статья в этой же рубрике есть. :)

      • Руслан

        Гипер Кэш конечно же установлен.

        С этим скриптом просто эксперементировал centavrus-opti.ru

        • Лифанов Валентин

          Есть плагины, и гипер кеш самый самый и бесплатный, я сам убедился посмотрите на мои показатели, если бы не метрика и аналитикс было бы 100 100 100

          • Руслан

            Я же говорю, Гипер Кэш у меня установлен)

            Но всё равно 90%.

            Кстати, при активации Autoptimize перестаёт работать Lightbox. Как с этим быть?

            А чтобы PageSpeed не ругался на метрику, я уже давно перенёс её в футер — всё в порядке.

            Т.е. по идее у меня должно быть даже больше 96%.

          • Лифанов Валентин

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

  • Камаз

    Менюшка поменялась в новом обновлённом плагине Autoptimize, немного упростилось все то, что было ранее. Но плагин поддерживается разработчиками, респект :cool: :cool:

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.