Главное Свежее   Проекты
Рекомендуем
Хотите больше продаж
по всей России?
Подключите красивый номер 8-800 за 1 рубль
Перейти
Продвинуть свой проект
Выбор редакции:
Как руководителю успевать все?

Как угоняют аккаунты в Instagram ?

Аккаутинг в социальных сетях

Как использовать Instagram-визитку?

Почему хорошие люди создают плохой сервис

Трудно начать, еще сложнее закончить дело

Выходные с пользой: 5 фильмов о маркетинге, которые вы вряд ли смотрели

Как предприниматель из Элисты потерял два бизнеса, но открыл четыре новых

Соцсеть VK презентовала инновационный формат историй

6 секретов из патентов Google, которые помогут продвинуть ваш сайт

21 986 26 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Как получить 100/100 в Google Page Speed Test Tool

Скорость загрузки страниц во многом определяет, насколько удобной и комфортной будет работа с сайтом. Кроме того, она является одним из факторов, влияющих на ранжирование в поисковых системах. Статистика показывает, что на сегодняшний день пользователи готовы ждать полной загрузки страницы не более 5 секунд. Если сайт будет загружаться дольше, то потенциальный клиент просто закроет страницу.

50% интернет-трафика уже сейчас приходится на долю мобильных устройств, и их пользователи ожидают, что страницы сайта будут загружаться практически мгновенно. Поэтому в этой статье мы рассмотрим, как при проверке скорости загрузки страниц бесплатным инструментом Google PageSpeed Insights Tool получить 100/100 баллов как для мобильной, так и для десктопной версии сайта.

Как увеличить скорость загрузки страниц

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

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

Шаг #1: Оптимизируем изображения

lhyAb0mKmp5aPP8XkyMlLhHHTKbMURRWciyzWOeM

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

  • Для начала, сожмите все изображениями инструментами типа Compressor.io или TinyPNG. Оба инструменты бесплатны, но крайне эффективны. В некоторых случаях они сжимают картинки на 80% без потери качества.
  • Уменьшите размер изображений до минимально возможного. Допустим, вы хотите, чтоб размер отображаемой на сайте картинки составлял 150x150px. В таком случае фактический размер изображения, хранящегося на вашем сервере, не должен превышать размеров отображаемого изображения, то есть он также должен составлять 150x150px. Не стоит подгонять размер картинки с помощью CSS или HTML кода.

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

Google предложит сразу загрузить оптимизированные изображения на сайт.

Шаг #2: Максимально сократите CSS и JavaScript код

Jx0tpLCXrENgH1FJ-rGL_t0lA1IzMZ_KATNuSJiw

Google может попросить вас сократить JavaScript и CSS код.

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

Например, код в документе, приведенном ниже,

3TaxMR3WaJjlByzESo6hO1FT65ZWD8BUfExWGpH1

может быть сокращен до:

Cf02oz7-5rKEFmSUJB4SrKaDDfhMocAVgKbQoRUZ

Чтобы быстро решить эту задачу можно установить на свой сервер инструмент, который называется Gulpjs. На основе вашего файла он автоматически создает новый CSS файл, в котором удалены все ненужные пробелы. Фактически, этот инструмент может помочь сократить размер файла в два раза. Еще больше информации о том, как удалить лишние элементы кода, можно почерпнуть в официальном справочном руководстве Google.

А для сайтов на Wordpress рекомендуется установить плагин Autoptimize.

Шаг #3: Используйте кэш браузера

_T-5CIADwmap_A8EoAvgUm07z6qXX17q9rcVHn3j

Для многих сайтов пункт об использовании кэша браузера - настоящее испытание. Для решения этой проблемы можно использовать сеть CDN.

CDN - это сокращение от content delivery network, то есть “сеть доставки контента”. Чаще всего это множество серверов со специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю. С её помощью можно кэшировать и сохранять многие элементы сайта, такие как изображения, CSS и JavaScript файлы. CDN хранит копии содержимого сайта на серверах. Если пользователь заходит на сайт, контент для него загружается с ближайшего к нему сервера.

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

Как результат, сайт загружается значительно быстрее.

Если вы переместите все изображения, файлы JavaScript и CSS на сеть CDN, то ваши удаленные пользователи сразу заметят ощутимое увеличение скорости загрузки страниц. Но даже использование CDN не гарантирует, что вы пройдете тест Google. Google также обращает внимание на все внешние ресурсы, которые вы используете на своем сайте.

-QtxReg-QXJ4wGEz_8J1BydkLAMzsPvIy_HBbdqt

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

Если ваш сайт интегрирован с Google Analytics и вы не хотите отказываться от интеграции, то решение проблемы может потребовать дополнительных усилий.

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

Если скрипт обнаружит изменения, то новая версия автоматически скачается и сохранится в вашей сети CDN.

Та же самая операция будет повторяться каждый раз, когда происходит обновление кода. Новая версия скачивается и сохраняется на CDN. Этот же скрипт можно использовать и для других сторонних ресурсов.

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

yg-2HcJJmFYRkXmeaDXOHJpdPLH1NDPd75qFiylQ

Удаление кода, блокирующего отображение верхней части страницы - один из самых сложных моментов при оптимизации скорости загрузки страницы, поскольку требует глубоких технических знаний. Обратите внимание, что код JavaScript следует всегда размещать в конце файла.

Если ваш сайт на Wordpress, то решить задачу вам может помочь тот же самый плагин Autoptimize. Зайдите в настройки, уберите галочку возле “Force JavaScript in Head” и поставьте рядом с “Inline all CSS.”

Шаг #5: Включите сжатие

_vBJHGRwaF9MI8M2fxdvbgaexSLSfwXbzO5bSkDR

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

Шаг #6: Оптимизируйте сайт для мобильных устройств

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

vYDPyti8-3XD9RH89CIyZWLZL5RHMpW8LAND_9Mp

Google Chrome позволяет проверить, как ваш сайт будет отображаться при просмотре на разных мобильных устройствах. Нажмите на контекстное меню в правом верхнем углу, после этого выберите пункт “Дополнительные инструменты”, а затем “Инструменты разработчика”. В выпадающем меню вы можете выбрать тип устройства и проверить, как выглядит ваша страница при просмотре с каждого из них.

Заключение

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

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

  1. Используйте сеть CDN (content delivery network).
  2. Удалите код, блокирующий отображение верхней части страницы. (Не размещайте JavaScript в середине файла. Код JavaScript должен находиться в конце документа).
  3. Оптимизируйте размер изображений и сожмите их.

Ставили ли вы перед собой задачу оптимизировать скорость работы сайта? Если да, то какие шаги вы предпринимали?

(перевод и адаптация статьи Felix Tarcomnicu How to Achieve 100/100 with the Google Page Speed Test Tool)

-1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Первые Новые Популярные
Михаил Великий
Вы не указали, что это перевод.
Ответить
Топвизор
Сервис поисковой аналитики!
Александра Васильева
Поправили, спасибо.
Ответить
Дормал - общежития для рабочих
Общежития для сотрудников в Санкт-Петербурге
Никита Мотыль
Спасибо за статью. Шел читать больше всего из-за технических аспектов реазизации вот этого пункта:
Шаг #4: Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

Про это можно подробнее, пожалуйста?
Ответить
Виталий Белокрылов
Определить что из CSS и JS нужно для отображения верхней части сайта.
Вынести это в инлайновые стили и скрипты (внедрить прямо в html код).
Всё остальное подключать файлами внизу сайта.

Реализацию посмотреть можно тут:
https://divamebel.com
Ответить
Александр Коротков
а как ускорить загрузку сайт на wix?)) там код не поменяешь... Может кто знает?
Ответить
WebResidentTeam
Онлайн–команда №1 по разраработке максимально эффективных сайтов
Сергей Иванов
можно просто не пользоваться WIX
Ответить
Иван Малышев
Я бы даже сказал -НУЖНО не использовать wix и иже с ними
Ответить
Иван Петрович
Скажем так, статья для полных ламеров. Советы настолько капитанские, что слов нет, все это известно уже не пару дней/месяцев, а срок в годах измеряется.
Ответить
Топвизор
Сервис поисковой аналитики!
Денис Пустовойт
Новичкам будет полезно.
Ответить
Вячеслав Хрусталёв
Эм... С таким руководством 100/100 не получишь в Page Speed Insight.
Шаг #5 - включить сжатие, обратиться к админу. Ну т.е. CDN он может настроить, а добавить пару строк в .htaccess нет?)
Ответить
Sergey Chystiakov
Что это за чушь? Gulp это таск-раннер, но ничего не умеет без плагинов. Да и ставится он не на сервер. Не говоря уже о том, что 100/100 получить вряд ли получится. На ранжирование это не влияет практически. Статья для маркетологов короч.
Ответить
Бекназар Бактыбек
так и не понял насчет этого, как исправить счетчики ???
Ответить
Бекназар Бактыбек
можно подробнее
Ответить
Cimpie
Organize and manage your team, projects, and processes with Cimpie.
Александр Мазько
Шаг #6: Оптимизируйте сайт для мобильных устройств

Топвизор! Так оптимизируйте уже наконец-то.
Ответить
Топвизор
Сервис поисковой аналитики!
Денис Пустовойт
Мы уже начали, первые ласточки

Подбор слов https://topvisor.ru/keyword-research/
Проверка позиций сайта https://topvisor.ru/rank-tracker/
Ответить
Александр
Готово, сайт seovedenie 100 из 100
Ответить
CourseBurg
Сервис для выбора оффлайн курсов по расположению, отзывам и цене
Александр Альхов
Спасибо, хорошая статья, постоянно забываем у себя поправить пару вещей.

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

Если у вас больше знаний напишите другой материал на тему "Как на самом деле сократить время загрузки?". И мы все вам скажем дружно спасибо.
Ответить
Иван Петрович
Зачем делать то что уже известно и написано много-много раз? Просто чтобы поработать? Ну тут это для пиара - так что все понятно и имеет свою цель:)
Ответить
CourseBurg
Сервис для выбора оффлайн курсов по расположению, отзывам и цене
Александр Альхов
Знать не равно использовать. Что теперь книг не писать только потому что сюжетных линий всего 12 и любая новая книга или фильм это заимствование других историй?
Ответить
Евгений Ерко
ни кто не обращал на то что, гугл просит увеличить время кеша для гугл аналитик (и тому подобное)

P.s. можно юзать клоакинг
пример на пыхе
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Speed Insights' ) === false) {
// скрывает от инспектора

}
Ответить
RemontZakaz
Так вот решил все 100% получил. Яндекс метрику и Rambler топ 100 оптимизировал + в Unicorn - Совмещенный валидатор W3C сделал без ошибок.
Ответить
CourseBurg
Сервис для выбора оффлайн курсов по расположению, отзывам и цене
Александр Альхов
я думал это фантастика)
Ответить
Сергей Новиков
WIX с июня 2017 года открыл доступ к коду, но то, что они используют с 2015 года CDN и скорость сайта не более 4-5 секунд, что вполне достаточно по мнению директоров того же Google - показатель существенный. Дело не в скорости сайта, а в провайдерах интернета и их скорости. У каждого провайдера она разная. Для информационного сайта-визитки 4-5 секунд вполне адекватная скорость загрузки, а вот для посадочных лендингов, которые выполняют роль рекламы и их цель привлечь потенциального клиента сразу, скорость существенно выше в два раза примерно. Не путайте, пожалуйста, эти два показателя. Даже у самого Google и Яндекс через Google Page Speed нет 100% из 100 в показателях. Это не показатель, а лишь небольшая рекомендация. У меня мнение, что тут половина "чайников", которые гонятся за показателями, тем самым еще больше замедляя работу своих сайтов и делая их косыми или кривыми в итоге ))

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

На счет того, что конструкторы рухнут... спорное мнение, т.к. тот же WIX обладает очень замечательными дизайнами, которые в России делать так и не научились по сути, если быть честными. Плюс ко всему, сайты на конструкторах нормально продвигаются, если уметь это делать. Также хорошо они ранжируются поисковиками, а система Ajax одна из будущих, что признал тот же Google в США на конференции IT-разработчиков. Не зря же тот же Яндекс стали сотрудничать с WIX, Ukoz и другими. Если бы это была утопия, то смысл?...

Теперь по поводу оптимизации, дело не только в коде, но и в контенте. Иногда используют не три шрифта, а все семь, что тоже утяжеляет сайт. Помимо этого всего, нужно еще понимать для чего делается сайт. Привлечь быстрым способом клиентов, либо их информировать и рассказать о себе. Если хотите, чтобы сайт был оптимальным, то придерживайтесь 4-5 секунд загрузки, именно это время пользователь обычно ждет загрузки. И не упускайте важный момент, у каждого пользователя скорость интернета разная и от этого многое зависит, как бы вы не улучшали загрузку и скорость ваших сайтов. Если инет работает медленно, то и ваш сайт будет грузится как черепаха при всех усилиях ))
Ответить
Сергей Новиков
Кстати, система Ajax, используемая в равной мере с HTML 5 на WIX, это система прогрузки всего сайта сразу, а не отдельной верхней части страницы. Именно в этом и преимущество. ))

Спасибо, что удалили мой коммент, видимо... уважаемый владелец сайта, Вам правда глаза колит )))
Ответить
Денис Фруктоед
Всем здравия. ПОКАЗАТЕЛИ В GOOGLE SPEED МОЕГО САЙТА 100/100 http://sibvaleogroup.ru

Недуги и болезни одолевали сайт по Здоровью и правильному питанию! Не так давно занялся тестированием и ускорением загрузки. До этого был небольшой опыт.



Какие только методы и приемы не применял, долгие пробы и ошибки и приятный результат в виде бонуса ;). Грамотный подход и конечно огромное количество времени, потому что начинал с почти нулевыми знаниями и умениями. Тематика сайта очень востребована: Как начать бизнес? И Профилактика и лечение заболеваний! Натуральный ЭКО продукт! Добро пожаловать на просмотр показателей!  Кстати последнее с чем пришлось потрудится это кеширование

Если что обращайтесь, чем смогу помогу, только учтите, я всего лишь любитель с большим опытом! Всем респект! заходи если что
Ответить
Показать следующие
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать