Css выравнивание блока по вертикали. Центрируем элемент по вертикали, используя CSS. Выравнивание с помощью line-height
Скорость загрузки сайта является важнейшей составляющей позитивного user experience, а также одним из факторов ранжирования сайта в поисковой выдаче. Правда такова, что сегодня пользователи не хотят ждать загрузки страницы более 5 секунд. Если ваш сайт загружается недостаточно быстро, вы теряете потенциальных клиентов.
Учитывая то, что 50% онлайн-трафика приходит с мобильных устройств, пользователи ожидают почти мгновенной загрузки сайта и в мобильной версии. В этой статье вы узнаете, как набрать 100 из 100 с инструментом Google PageSpeed Insights для мобильной и десктопной версии вашего сайта.
Мотивация
При проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет – 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.
Значит ли это, что результат 100/100 недостижим?
Как заставить страницы загружаться быстрее
В первую очередь необходимо отметить, что инструмент PageSpeed – это всего лишь руководство для повышения качества веб-сайтов. Инструмент предоставляет рекомендации для оптимизации веб-сайта, которая способствует повышению скорости загрузки страниц, но достижение желаемого результата зависит от настроек сервера.
Некоторые из этих шагов требуют технической экспертизы, другие – нет. Этой инструкции можно следовать в любой Системе управления сайтом.
Шаг первый: Оптимизируйте изображения
Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:
· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.
· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.
Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.
Шаг второй: Сократите объем ресурсов CSS и JavaScript
Размер ресурса можно уменьшить, удалив ненужные байты, например, лишние пробелы, переносы строки и отступы. При создании кодов программисты часто оставляют свободные места и комментарии. Иногда, удалив их, можно уменьшить размеры файлов в два раза.
Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.
Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.
Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.
Шаг третий: Оптимизируйте время ответа сервера
Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.
CDN – это сеть серверов, разбросанных по всему миру, которые позволяют оптимизировать доставку и дистрибуцию контента (изображений, файлов CSS и JavaScript) конечным пользователям в сети Интернет. CDN хранит копии контента вашего веб-сайта на своих серверах. Когда пользователь заходит на ваш сайт, статичный контент загружается с ближайшего к нему сервера.
Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.
Ниже представлена схема функционирования CDN c GTmetrix.
На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.
Шаг четвёртый: Используйте кеш браузера
Использование кеша браузера предполагает, что файлы с вашего веб-сайта – изображения, файлы CSS и JavaScript – загружаются с сервера всего один раз, и браузер сохраняет их на компьютере. В следующий раз при загрузке страниц все необходимые файлы «подтянутся» с компьютера пользователя.
Чтобы использовать кеш браузера, нужно создать файл.htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.
Шаг пятый: Удалите из верхней части страницы ресурсы, блокирующие отображение
Главной проблемой, с которой приходится столкнуться разработчикам в этом случае, является перемещение кода JavaScript из верхней и основной части страницы в нижнюю часть по всему веб-сайту.
Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.
Шаг шестой: Включите сжатие
Включить сжатие можно в настройках вашего сервера. Если вы сомневаетесь в своей компетенции в данном вопросе, попросить вашу техническую поддержку включить сжатие GZIP для вашего сервера.
Шаг седьмой: Оптимизируйте мобильную версию
Адаптивная версия мобильного сайта предполагает использование правильного разрешения изображений, параметров шрифта и хорошей навигационной системы.
Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».
Вывод:
Итак, четыре наиболее важных шага, которые необходимо предпринять, чтобы улучшить качество сайта:
1. Используйте CDN.
2. Используйте кеш браузера.
3. Удалите блокирующие отображение ресурсы из верхней части страницы.
4. Оптимизируйте размер изображений и сожмите их.
PageSpeed, или если быть точнее PageSpeed Insights — это продукт компании Google, при помощи которого можно легко найти недостатки своего сайта. Под недостатками мы понимаем лишь технические моменты, которые сервис предлагает исправить.
Что такое Pagespeed insights и зачем он нужен?
Pagespeed insights — это сервис для оценки качества сайта, а именно: скорости его загрузки на мобильных устройствах и ПК. Самое главное — это бесплатный сервис рекомендаций для разработчиков веб-сайтов по ускорению страницы в браузере клиента. Алгоритмы сервиса постоянно меняются, потому сервис постоянно совершенствуется и следует всем требованиям поисковой систем Google.
По поводу особенностей загрузки страницы при разной скорости интернет-соединения, Pagespeed учитывает только факторы, не зависимые от сети аспекты. Вот что по этому поводу написано в справке :
Так как скорость подключения у разных пользователей различна, PageSpeed Insights рассматривает только независимые от сети аспекты работы страницы: конфигурация сервера, структура HTML, использование внешних ресурсов (изображений, JavaScript и CSS). Применив наши рекомендации, вы сможете оптимизировать относительную скорость загрузки страницы. Абсолютная же скорость загрузки в конечном итоге все равно зависит от скорости подключения к сети.
Pagespeed использует свою систему оценок, которая соответствует разной степени важности:
Важно! Все ошибки, которые находит сервис являются лишь рекомендациями и не являются обязательными. Применив все рекомендации сервиса, можно ускорить относительную скорость загрузки сайта. Это значит, что вы сделали все что от вас зависит, чтобы сайт грузился максимально быстро.
Преимущества и недостатки Гугл Пейдж Спид
У сервиса благая цель — сделать сайты в интернете максимально быстрыми и удобными как на десктопе, так и на пк. Невзирая на это, есть ряд моментов, на которые хочется обратить внимание:
- Не всегда удается найти баланс между скоростью загрузки сайта и красивым внешним видом. Нужно определиться, что мы хотим: быстрый или красивый сайт? И то и другое получить практически невозможно.
- Оценка для мобильных сайтов повторяет ошибки для ПК, добавляя лишь фрагмент о компоновке элементов страницы на маленьких экранах. Это не совсем адекватный показатель, ведь Mobile-friendly является фактором ранжирования . Потому, если хотите подтянуть мобильную версию сайта, нужно использовать отдельный отчёт Google.
- Сервис не показывает ускорение загрузки страниц сайта в абсолютном выражении — секундах или минутах (если все настолько плохо). Он лишь учитывает балы (от 0 до 100), которые не всегда характеризуют реальную скорость загрузки сайта.
- Сервис выдает обширные рекомендации по исправлению и указывает конкретные файлы, которые нуждаются в оптимизации. Кроме того, уже оптимизированные скрипты, стили и картинки можно скачать прям со страницы с результатами для компьютеров.
Как добиться оценки 100/100 на PageSpeed Insights
Все собственники сайтов считают, что если у них будет 100/100 в результатах, их сайт сразу выйдет в топ. На самом деле это не так. Во первых: не только скорость загрузки влияет на позиции сайта. Во вторых: достичь отметки в 100/100 практически невозможно (если вы хотите современный и модный сайт). Оптимальным считается вариант от 85 и выше, но каждый сайт или CMS система являются отдельным случаем и их нужно рассматривать отдельно.
Среди основных препятствий на пути к достижению заветных 100 балов в гугл пейдспид можно выделить:
- некорректное отображение сайта, при перемещении скриптов и стилей в футер;
- отсутствие возможности кешировать ресурсы, загружаемые со сторонних серверов (кнопки социальных сетей, виджеты и многое другое);
- отсутствие возможности минимизировать ресурсы (JS, CSS), загружаемые со сторонних серверов;
- качество сжатие изображений, которые устроят сервис, не очень хорошо выглядят.
О том, как обычному сайту на WordPress набрать 99/100 в PageSpeed Insights написано на хабре . Довольно таки интересная статья, возможно, она будет полезна не только сайтам на , но и на других CMS. Также, можно использовать сторонние плагины, которые сами оптимизируют сайт: либо под пейдспид, либо — под скорость загрузки.
Модуль Google PageSpeed для сайта: что умеет и как пользоваться
Решили поэкспериментировать и добавить на три проекта ускоритель от Гугла. Что из этого получилось — выясняем.
Сайты должны грузиться мгновенно. Ах, нет, сайты ничего никому не должны? Зайдите в троллейбус и сядьте рядом со студентом, который сидит с айфоном. Посмотрите, готов ли он ждать, пока загрузится какой-то интернет-магазин. Скажем так: три секунды — и вкладка закрывается. В ход идет следующий результат из поисковой выдачи.
Кстати, про поисковую выдачу. Скорость загрузки сайта влияет на ранжирование в поисковиках. Пруфы и . «Тормозящие» сайты реже посещаются роботами, а, значит, реже индексируются. От этого страдает место в выдаче и удобство поиска нужной инфы.
Постоянно думайте о том, будет ли ваша страница загружаться медленнее на смартфоне, чем на ПК. И если это так, то мы, скорее всего, понизим ее в выдаче.
— Мэтт Каттс, Google
Гугл потрудился и выпустил свой инструмент для проверки скорости — PageSpeed. Найти тормозящие загрузку элементы просто — заходим сюда и в единственном поле указываем адрес, который хочется протестировать. За минуту будет готов подробный отчет о производительности. Результат будет показан в попугаях. В идеале их сто, но попробуй-ка добейся! Даже самому Гуглу это не под силу: проверьте его сервисы:)
Тесты проводятся как для десктопной, так и для мобильной версии сайта. Ориентироваться лучше по цветовой шкале: желтая зона укажет, что есть элементы, которые стоит оптимизировать, зеленая сообщит, что все ок. Если сайт в красной зоне, подкручивайте скорость и оптимизируйте. Иначе впереди бездна: пока загружается страничка, юзер уже уйдет на другой сайт:)
Оптимизировать сайт можно двумя способами.
Ручная оптимизация
1. Сжимаем картинки Фотошопом или прогоняем через Optimizilla , например
Чем меньше весят картинки, тем больше шакалов тем быстрее загружается сайт. Делаем сжатие, многомегапиксельные фотки прячем под кат. Хватит превьюшки 640×480. Меньше картинка — шустрее сайт.
Даже на стартовой странице Google Developers графику можно сжать на 71%.
2. Выполняем подключение шрифтов с самого сайта, а не тянем их с гуглофонтов
Минус — пока браузер не загрузил шрифт, юзер увидит надоевший Ариал или Тахому.
3. Используем кэш браузера по максимуму
Когда сайт частично уже сохранен у клиента — загрузка пойдет намного быстрее.
4. Сокращаем JavaScript и CSS
Скрипты не редактируются каждый день после релиза — нет смысла сжимать их на лету. Хватит оптимизировать один раз после правок кода. Шаблоны JS лучше обработать на сервере, встроить результаты в HTML и использовать шаблоны на клиенте после загрузки.
5. Сокращаем HTML
На практике — удаление лишних пробелов, табов, переносов строк.
6. Удаляем неиспользуемый код
Можно встроенным в «Хром» аудитом. Нажимаем F12 и переходим на вкладку Audits. Внизу есть единственная кнопка Run. Занимается в целом тем же самым, что и PageSpeed. Только в реальном времени.
Автоматическая оптимизация
Любой сайт состоит из динамических и статических элементов. Динамические элементы — сам HTML-код, полученный из работы php и запросов к базе данных. А остальное — статика. Это картинки, JavaScript и CSS.
Автоматически оптимизировать сайт можно крутой штукой от Гугла — PageSpeed Insights. Этот модуль устанавливается на сервер nginx и после настроек сжимает в реальном времени дофига инфы , в том числе, графической.
PageSpeed Insights умеет анализировать HTML и оптимизировать ресурсы. Пережимать, короче. В исходном коде ресурсы будут находиться по другому пути, не по тому, что задан сжать фоточку разработчиком. Это стоит учитывать. Но отображение ресурсов не изменится. Уменьшится вес. А значит, возрастет скорость загрузки страницы и посетители станут довольнее:)
Однако у PageSpeed Insights имеются ограничения. Его можно поставить только на nginx, запущенный на или виртуальном сервере. Нет, арендованный где-то в Германии shared-сервер не подойдет.
Второе ограничение связано с вечной войной браузеров. Картинки, пережатые PageSpeed-ом, конвертируются в формат.webp, который понимает только «Хром» (на всенародно любимом Internet Explorer 6 такая штука не пройдет). В последних версиях отображению таких картинок научилась и «Опера». Потому что движок поменяла.
Примеры использования PageSpeed Insights
Мы установили модуль PageSpeed Insights на трех проектах — на своем новом сайте и на двух клиентских. Модуль видит, с какого браузера приходит запрос, смотрит, обучен ли он отображать webp-формат и отдает либо оптимизированную картинку, либо обычный jpeg.
По Сибириксу настройка заняла примерно полдня. Кое-что пришлось делать эмпирическим путем: меняли, смотрели, что происходит. Иногда зона была зеленой, а слететь в желтую могла совершенно непредсказуемо.
Сейчас обе версии стоят в зеленой зоне. Значит, проблем со скоростью не возникнет. Если скорость подключения хорошая, не EDGE какой-нибудь:)
В рамках технической поддержки интернет-магазина фабрики «Витра» мы решили поэкспериментировать и установить модуль PageSpeed Insights на него:
Здравствуйте, уважаемые читатели блога сайт! Сегодняшний пост будет посвящен замечательному инструменту Гугл Пейдж Спид, позволяющему провести тест любой страницы для изучения возможностей ускорения ее загрузки ().
Не для кого не секрет, что поисковые системы, особенно Гугл, в последнее время уделяют этому аспекту серьезное внимание, поэтому быстрые вебсайты получают определенное преимущество при ранжировании и более высокие позиции в поисковой выдаче.
Google Page Speed Insights не только обнаруживает и указывает на все причины, по которым страничка не загружается достаточно быстро, но и предлагает конкретные пути их устранения, причем некоторые из обнаруженных проблем можно достаточно легко ликвидировать силами самого сервиса в автоматическом режиме.
Какие вообще средства оптимизации для ускорения сайтов предлагает Google?
В принципе для каждого из своих проектов я достаточно много времени уделяю мероприятиям по оптимизации страниц, которые способствуют их быстрой загрузке. По-настоящему не доходили руки лишь до блога сайт, который является по сути наглядным пособием для начинающих вебмастеров, не лишенных здоровых амбиций и заряженных на достижение цели.
Но, поскольку по натуре я перфекционист, не мог допустить, чтобы информационный веб-ресурс, несущий, так сказать, знания в массы, был бы в каком-то аспекте среди отстающих. Посему было решено приложить максимум усилий по его оптимизации, включая рекомендации Пейдж Спид.
Поэтому незамедлительно перехожу к описанию данного инструмента, чтобы вы могли оценить его функционал и применить на практике во благо своим веб-ресурсам.
Ранее Page Speed Insights можно было использовать в виде расширений для браузеров и , ссылки на скачивание присутствовали на специальной странице Гугла. Причем для того, чтобы применять его в Мазиле, сначала необходимо было , где Пейдж Спид присутствовал в качестве его дополнения:
Сейчас уже нет возможности применять расширения для браузеров именно от Google, хотя такие же плагины, но в несколько другой интерпретации, доступны на официальных вебстраницах Хрома и Мазилы ( и ). Кроме того есть, вполне функциональный одноименный онлайн сервис Гугла с точно таким же функционалом и не меньшими возможностями. Если перейдете в раздел Developers , то увидите там ссылку на инструмент Page Speed:
К слову, на этой же странице «PageSpeed Tools» расположены все предложения Google по ускорению сайтов. Похоже, разработчики "империи добра" всерьез взялись за оптимизацию и ускорение всего интернет пространства, поскольку в Девелоперс вы найдете линк на Библиотеку Оптимизации (Integrate the PageSpeed Optimization Library ) с открытым исходным кодом.
Наличие открытого кода программного обеспечения данного проекта, работающего на основе модуля «mod_pagespeed », который устанавливается на сервера Апач (коих, кстати, подавляющее большинство), означает, что его может усовершенствовать или обновить любой желающий.
То есть, таким способом вполне реально за счет интернет сообщества создать близкий к совершенному инструмент ускорения. Как все это будет выглядеть на практике, покажет время. Естественно, для того, чтобы внести полновесный вклад и достигнуть успеха в этом благом деле, необходимо быть достаточно квалифицированным программистом.
Ежели взгляните на верхний скриншот (информация обведена зеленой рамкой), то увидите там ссылку на установку последней версии уже готового модуля. Это вполне может быть интересно для владельцев , которые могут установить его на своих серверах, обеспечив автоматическое ускорение расположенных там сайтов.
Причем, существуют две модификации модуля Пейдж Спид: непосредственно для серверов Apache и для связки Apache + Nginx, где второй играет роль прокси-сервера:
Кстати, вариант совместного использования Апача и Ngnix в современных условиях наиболее востребован и используется большинством продвинутых хостеров (включая, например, Спринтхост), поскольку обеспечивает эффективное использование ресурсов. Так что, если вы заинтересовались таким методом автоматического ускорения сайтов, можете приложить к этому руку самостоятельно либо напрячь своего хостера.
Google"s PageSpeed рекомендует (пути для увеличения скорости загрузки страниц сайта)
Выше мы рассмотрели возможность, так сказать, глобального увеличения скорости загрузки вебсайтов, которая требует специфических знаний (вполне вероятно, что и эта информация окажется кому-то полезной, по крайней мере, в будущем).
Но для основной части читателей, то есть простых вебмастеров, более актуален вариант, который понятен и доступен "здесь и сейчас". Как раз таким условиям в полной мере соответствует сервис PageSpeed Insights, о котором подробнее и поговорим. Для анализа конкретной страницы сайта вводите ее URL () на этой страничке :
После анализа вы увидите оценку Гугла, причем как в отношении мобильных устройств, так и ПК, что особенно ценно. В данном примере для главной страницы этого блога 76 зачетных баллов из 100 для мобильников является средним результатом, который можно существенно улучшить, если воспользоваться находящимися чуть ниже рекомендациями.
Причем, для оптимизации каждого ресурса, который тормозит загрузку страницы, даны ссылки на соответствующие разделы (с целью их получения нажмите линк «Как исправить?» ), где вы найдете описания необходимых действий по устранению недочетов.
Но здесь нужно сделать важное замечание. Необходимо анализировать страницы разных типов , чтобы добиться уменьшения времени загрузки всего сайта в целом. Например, для стандартного блога Вордпресс уровень оптимизации в этом аспекте для главной, рубрик, статических страниц и записей может быть совершенно разным.
Выше я дал пример домашней страницы, на которой выводятся анонсы постов, а вот одной из статей Пейдж Спид дал гораздо более низкую оценку:
Это произошло потому, что посты обычно гораздо более объемные и включают много различного рода ресурсов и контента (изображений, видео, скриптов). Поэтому лучше начинать проверку на оптимизацию именно с них. Кстати, с этой точки зрения отталкивайтесь от оценки, которую Page Speed предоставляет для мобильников , поскольку достижение приличной скорости загрузки на таких устройствах требует гораздо больше телодвижений.
Но даже разные странички записей могут отличаться по качеству. Это происходит в том числе потому, что на некоторых из них выполняются дополнительные скрипты, замедляющие загрузку. Например, уровень оптимизации одной из таких вебстраниц вызвал у меня не просто удивление, а настоящий шок:
Совершенно очевидно, что 62 балла из 100 возможных не тот результат, к которому надо стремиться. А все потому, что на этой и еще ряде страниц записей у меня работает скрипт плагина SyntaxHighlighter, инициирующего красивое оформление кодов с подсветкой.
Таких расширений на сайте может быть несколько. В каждом конкретном случае нужно решить для себя, насколько плагин важен для вашего ресурса с точки зрения того функционала, который он обеспечивает. И в зависимости от этого необходимо либо его удалить, либо предпринять меры для оптимизации, которая поможет ускорить загрузку страницы.
Выше сказанное особенно касается самой популярной в мире CMS , которой пользуется подавляющее число вебмастеров. Всем хорош этот многофункциональный движок, но его необходимо постоянно отлаживать в плане уменьшения нагрузки на сервер и сокращения времени загрузки страниц. Поэтому владельцам веб-ресурсов, работающих на WP, следует принять это к сведению. И наличие такого сервиса как Пейдж Спид здесь как нельзя кстати.
Обязательно ознакомьтесь со всеми этими статьями хотя бы в режиме просмотра, перейдя по выше представленным ссылкам, возможно, вы найдете для себя немало полезного. В дальнейшем я планирую еще не раз вернуться к проблеме ускорения веб-ресурсов, а посему можете оформить подписку , дабы не пропустить выход свежих публикаций по этой теме.
В завершение посмотрите полезный видеоролик, из которого вы узнаете, почему советы Page Speed носят рекомендательный характер и по какой причине не следует фанатично им следовать.
Последнее время, компания Google серьезно взялась за «ускорение» интернета. Сегодня корпорация связана с практически всеми разработками направленными на оптимизацию веб-ресурсов, если вы забыли, я напомню: создание CDN, манифесты CSS, разработка платформы javascript, Public DNS и многое другое. Сегодня же речь пойдет о новом сервисе Google PageSpeed, который позволяет оптимизировать данные и загружать их намного быстрее.
Что представляет собой служба PageSpeed?
Принцип работы нового сервиса прост до безобразия. После того как вы настроите свой сайт под работу с сервисом, поисковой бот Google перехватит все данные с вашего сервера, оптимизирует содержимое и будет хранить кэш на своем сервере. Когда пользователь обращается к любой странице вашего сайта, Google подменяет ваши данные на те, которые хранятся на его серверах, что и приводит к ускоренной загрузке страницы.
Требования PageSpeed?
Есть несколько вещей, которые вы должны знать, перед тем как начать пользоваться новой службой PageSpeed .
1. В настоящее время сервис не поддерживает работу с «голыми» доменами, префикс www должен обязательно присутствовать в домене сайта. То есть http://example.com работать с новым сервисом не будет, а вот http://www.example.com запустится без проблем. Возможно, в ближайшем будущем этот недочет исправят.
2. У вас должен быть полный доступ к панели управления доменным именем. Для того чтобы начать работу PageSpeed, вам придется изменить запись CNAME. Если вы регистрировали домен у хостера, то придется обращаться к нему, чтобы техподдержка за вас изменила записи CNAME.
Настройка сайта для работы с PageSpeed
1. Для начала перейдите и нажмите кнопку зарегистрироваться.
Так как в настоящий момент PageSpeed проходит «обкатку», то попасть в число тестеров можно только по приглашению. После того как вы зарегистрируетесь, вам придется подождать некоторое время, пока специалисты Google обработают вашу заявку. В зависимости от времени суток и качества вашего сайта, ожидание может продлиться от часа и больше.
2. После того как вам прислали приглашение, перейдите и нажмите на выделенную кнопку в боковой панели - Page Speed Service .
На этом этапе может возникнуть небольшая загвоздка. Если вы ранее не добавляли свой сайт в панель Google Webmaster, то сейчас сделать это самое время. Система предложит именно такой сценарий.
После добавления сайта в раздел для вебмастеров, вы должны изменить записи к домену, а именно выставить правильный адрес CNAME, по которому сервис будет вас верифицировать и создавать страницы КЭШа.
4. Изменение в значение CNAME, вносятся через панель домена у регистратора. Для того чтобы добраться до настроек у регистратора NameCheap, вам нужно перейти к All Hosts Record, а далее проследовать по пути Host Management. У международного регистратора GoDaddy значение CNAME хранится в диспетчере DNS. По большому счету, панели управления доменами у всех регистраторов одного принципа, а потому ориентируясь на пример ниже, вы сможете разобраться.
Практически всегда, запись IP адреса и запись почтового алиаса идентичны.
Зайдя в панель управления записями CNAME, вы увидите похожую форму:
Что нужно изменить?
Запись с почтой «@» мы оставляем без изменений, а вот в строке IP-адрес, меняем численное значение на pagespeed.googlehosted.com. В отдельных случаях, вам придется добавить в конце доменного имени точку (без кавычек): «pagespeed.googlehosted.com.».
Также в поле Record Type, вам нужно выбрать значение CNAME Alias. После внесения корректировок, сохраните форму, нажав на соответствующую кнопку.
На этом закончено. Теперь вам придется подождать около суток, чтобы DNS домена сменился во всех браузерах. Если вы не смогли самостоятельно найти, как изменить DNS у домена, напишите в техподдержку регистратора, вам обязательно помогут.
Так как в настоящее время, Page Speed не поддерживает работу с голыми доменами типа (http://example.com), для функционирования вам придется сделать переадресацию на домен с префиксом, то есть на http://www.example.com. На серверах Apache это сделать очень просто. Достаточно добавить в главный файл (в корневой папке сайта) .htaccess следующую запись:
RewriteEngine On RewriteCond %{HTTP_HOST} ^example.com RewriteRule (.*) http://www.example.com/$1
Не забудьте изменить надпись "example.com", на доменное имя вашего сайта.
Преимущества, которые дает использование Page Speed
Проверить, прирост скорости загрузки страницы, можно с помощью стандартных возможностей Google API. После того как все настройки сделаны, а DNS обновились, нажмите кнопку "Run Speed Test".
Система автоматически вас направит на страницу, где приложение покажет вам результаты. В среднем скорость загрузки повышается на 24%, а скорость индексации контента на 40 %. К слову, время потраченное на загрузки можно еще немного уменьшить, если настроить кэширование изображений.
