$
57.39 руб.
67.76 руб.
Каталог услуг
Мы в социальных сетях
Наши паблики

Google PageSpeed Insights: как получить 100 баллов, часть 2

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

Google PageSpeed Insights: как получить 100 баллов, часть 2

Распространенные проблемы при загрузке сайта:

  • Ответ сервера слишком медленный — есть проблема с используемым софтом или самим сервером. Проверить это достаточно просто. В случае, когда загрузка отдельного php-файла происходит быстро, а основного сайта — медленно, причиной является «неповоротливость» скриптов движка. Именно от использования CMS зависит вероятность замедления — чем «тяжелее» использование, тем выше эта вероятность. Также очень часто причина может скрываться в использовании малоизвестных или некачественных плагинов, а не в самом движке. Попробуйте отключить плагины, и тогда, со стандартным шаблоном, еще раз протестируйте сайт.
  • Проблемы кэширования — любой передаваемый файл должен иметь период, когда он не будет запрашиваться повторно из Интернета — так называемый «срок жизни». Он хранится в кэше, откуда и подгружается. Для исправления ошибки, в случае использования Apache, нужно изменить файл htaccess и включить на сервере модули expires и deflate.
  • Большие изображения — очень часто именно подгрузка картинок, которые тяжелее, чем обычные, вызывает замедление загрузки сайта. Мало кто придает этой проблеме значение, но, когда Google анализирует страницу, он автоматически определяет сжатие изображений и возможность их оптимизации. При помощи специальной программы (optiPNG или любая другая) вы можете сами почистить свой сайт, не дожидаясь проверки PageSpeed Insights и выявления множества проблем.
  • Громоздкость javascript — чтобы поисковик больше не считал скрипты перегруженными, веб-мастеру следует изменить код. Откройте скрипт в любом текстовом редакторе и очистите все лишнее (табуляцию, комментарии, переносы и прочее). Теперь код точно будет менее загруженным.
  • Подключенные скрипты и стили — это помеха для загрузки основного контента. Ели есть возможность перенести скрипты и CSS в конец страницы, то непременно это сделайте. Поисковая система считает, что именно там им и место, ведь в начале должен находиться основной контент сайта и код, который выполняется перед самой загрузкой. Исключение — это библиотека jQuery. Одно из условий ее использования — расположение перед любым элементом javascript.
    Перенос CSS в конец не очень рекомендуется, если подключение стилей происходит в <head>. Тогда выходом из ситуации может послужить разделение одного большого css-файла на несколько небольших (в среднем около 100 Кб). Если есть возможность, то браузеру лучше указать, чтобы загрузка дополнительных файлов проходила асинхронно.

Для мобильной версии рекомендации похожие, но все же имеют некоторые нюансы. Если сайт адаптирован к возможности использования портативных девайсов, то мобильная оценка, безусловно, повысится. Когда Вы исправите все проблемы, выявленные инструментом PageSpeed Insights, то можете добиться наивысшей оценки. Для этого вам следует знать о существовании нескольких несложных трюков.

Веб-мастеру выдают самую быструю страницу, и в это же время подгружают остальные (для загрузки css и js можно использовать javascript). Далее используется следующий алгоритм:

  • Для верхней части страницы создается отдельный css-файл, и в него добавляются все стили, относящиеся к первому экрану, который выводится пользователю.
  • Все скрипты делятся на части, среди которых будет и ваш недавно созданный css-файл.
  • В <head> подключается скомпилированная сетка (например, на Bootstrap) при помощи тега <style>. Теперь страница, которая еще даже не загрузилась, будет иметь свою структуру.
  • Все стили из созданного CSS-файла указываются после сетки. Скрипт, загружающий шрифты, будет работать с внутренним хранилищем.
  • Другие скрипты подключаются под последним тегом </body> (не забудьте также подключить все остальные элементы, входящие в основу сайта).
  • Создается и подключается файл стилей min.css, после чего все стили, которые не поместились в созданный CSS-файл, перемещаются в него.
Читайте еще
Поведенческие факторы — это важный критерий оценки сайта поисковой системой. При этом учитывается поведение посетителей интернет-ресурса во время просмотра результатов поиска и при посещении веб-страниц »
Популярная поисковая система Google классифицирует сайты, исходя из самых разных параметров: полезность информации, которую содержит сайт; наличие спама, угроз и другой вредоносной информации »
В попытках добиться хороших результатов посещаемости и рейтинга своих сайтов оптимизаторы прибегают к большому количеству различных приемов, и одним из наиболее эффективных инструментов стало использование гостевых постов »
В природе не существует такого продавца, который не хотел бы продавать еще больше. Существует несколько рабочих инструментов, которые помогают увеличивать средний чек онлайн-торговца. Сегодня мы поговорим о семи из них »
Разделы сайта