Бесплатное тестирование скорости. Ускорение сайта


Оптимизация и ускорение сайта под Google

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

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

Этот вид оптимизации сайта относится к белому сео и обязателен для любого успешного проекта!

Итак, начнем скучную, но полезную процедуру!

Спешить будем медленно и все делать по шагам!

Предлагаю начать оптимизацию сайта под Google

 

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

Среди сеошников ходят упорные слухи что если б Гугл захотел, то давно бы потеснил Яндекс в Рунете.

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

И все же почему именно под Google?

Существует много аргументов того, почему желательно ориентироваться именно на этот сервис.

Во-первых, Гугл — это поисковик №1 по всему миру.

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

Во-вторых, все слыхали выражение ПОГУГЛИТЬ. Гуглом пользуется преимущественно молодое поколение. То есть, оптимизировав свой ресурс под эту службу, вы охватываете наиболее перспективную часть населения, которая принесет вам прибыль.

В-третьих, Google регулярно обновляет базы выдачи. В перечне ресурсов появляются самые последние новинки, которых придется ещё долго ждать на других поисковиках. Страницы вашего веб-портала быстро про индексируются. Значит, сайт при правильном подходе продвижения, в самом скором времени займет первые места среди наиболее популярных конкурентов. А что ещё нужно владельцу Интернет-ресурса?

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

1.PageSpeed Insights или как его обычно называют новички developers-Google- сервис проверки скорости загрузки страниц сайта.

2. Сервис проверки под мобильные устройства от Google

Почему нужно проверять постоянно, да еще и новые страницы-спросите вы!

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

Начнем с первого сервиса.

Сервис выдает результаты по 100-бальной системе и плюс еще условно делит на световые сектора.

посредством Гугл.

 

optimizacia-site1

 

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

Я буду ускорять свой сайт WP-home.info  который я использую для своего видеокурса –Сайт на WordPress

Сейчас у него довольно скромные-красные результаты всего

55 бал для мобильных и 62 для компьютеров. В целом со старым шаблоном они были еще хуже, тут хоть какие то балы дает неплохая тема от мастера Гудвина.

Я не буду стремится к сотне балов, достаточно вый ти на зеленый цвет.

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

Хотя на вкус и цвет –каждому свое!!!

 

1. Включаем оптимизацию сайта на сервере.

Почти все современные хостинги позволяют включить на стороне сервера gzip сжатие, некоторые вообще по умалчиванию включают.

Проверить включена ли у вас эта функция можно вот по этой ссылке

Включена отлично нет сжатия значит стоит его включить.

Если Ваш хостинг использует Сипанель для управления хостинга находим вкладку оптимизировать сайт и жмем.

optimizacia-site4

Далее включаем сжатие для всех файлов.

optimizacia-site5

Уже после этого шага у Вас улучшатся показатели скорости загрузки сайта.

2. Включаем кеширование на стороне браузера.

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

Для этог открываем файл .htaccess и  вставляем туда такой код.

<ifModule mod_headers.c># Все html и htm файлы будут храниться в кэше браузера один день<FilesMatch «\.(html|htm)$»>Header set Cache-Control «max-age=43200»</FilesMatch># Все css, javascript и текстовые файлы будут храниться в кэше браузера одну неделю<FilesMatch «\.(js|css|txt)$»>Header set Cache-Control «max-age=604800»</FilesMatch># Все флэш файлы и изображения будут храниться в кэше браузера один месяц<FilesMatch «\.(flv|swf|ico|gif|jpg|jpeg|png)$»>Header set Cache-Control «max-age=2592000»</FilesMatch>

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

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

НО может показать что не все файлы и скрипты кеширыются на стороне браузера.

Это файлы всевозможных пузомерок типа Гугл аналитики и Яндекс-Метрики.

Теоретически есть способы и их загнать в кеш, но особого результата это не даст.

Если проверим те же сайты Гугла и Яндекса то увидим там похожую картину с внешними скриптами.

3. Ставим связку хороших кешириющий плагинов.

Первый-WP Fastest Cache

Как по мне это лучший из всех , имеет платную версию, но нам достаточно и бесплатной.

В платной есть функции оптимизации HTML и скриптов.

Мы эти функции добавляем плагином Autoptimize

Как настроить данные плагины я показал в видео.

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

optimizacia-site7

 

 

Все настройки мне в рисунок не влезли. Вот прилагаю полный список настроек, которые рекомендую отметить, плагина Autoptimize

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

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

Look for scripts only in <head>? (deprecated)

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

Inline all CSS?

Save aggregated script/css as static files

Мне же достаточно и 1,2 и 4

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

Должна уйти.

НО! Если Вы используете липкое меню или  плагин фиксированный виджет, то они работать не будут!

Тут уж стоит выбирать! Я, к сожалению, решил что липкое меню и виджет важнее.

Пришлось пожертвовать пунктом -Look for scripts only in <head>? (deprecated)

4. Оптимизируем

info-m.pro

Общие принципы ускорения сайтов

Дата создания: 15.03.2015

Несмотря на то, что сайты стоят на абсолютно разных CMS и фреймворках (или велосипедах), всё равно есть общие аспекты влияющие на скорость загрузки. Ведь у них у всех есть какой-то вес статических файлов (картинки, стили, js-файлы...), практически у всех есть динамически выводимая информация, которая через сервер берётся из БД. И это те вещи, которые можно оптимизировать для уменьшения времени загрузки страниц. В этой статье я расскажу об универсальных приёмах ускорения сайта.

Зачем вообще нужно ускорять загрузку страниц?

4 секунды не так долго ведь, правда?

Вообще, существует два важных факторов, не считая вашего личного эго, ради которых стоит мучиться. Это улучшение ранжирования в поисковиках (SEO) и удобство пользователя (User Experience). С быстрым сайтом намного приятнее и удобнее работать пользователю, а поисковики считают своей целью сделать работу в интернете максимально удобной. Также стоит понимать, что чем быстрее сайт, тем он более производителен, а значит больше юзеров может одновременно просматривать его, а трафик это наше всё. Скорость также косвенно указывает на релевантность запроса в данном регионе, правда это лишь догадки.

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

Как проверять прогресс?

Самым лучшим способом является панель разработчика в Google Chrome и её расширение Google Insights. Она анализирует страницу, подключаемые файлы, этапы загрузки и даёт советы после анализа. Также в этой панели будут полезны вкладки "Network" и "Audits".

Вкладка PageSpeed InsightsВкладка PageSpeed InsightsВкладка AuditsВкладка Network

Веб-версия Google Insights находится по адресу developers.google.com/speed/pagespeed/insights/, здесь доступна более полная, чем в панели, информация.

Сайт PageSpeed Insights

Способы ускорения

Собственно сами приёмы повышения скорости отдачи страниц. Напомню, что все они общеупотребимые.

Обновления

Всегда ставьте свежие обновления всего, что можно обновить. Новые версии CMS, кроме всего прочего, повышают производительность, уменьшают количество запросов к БД, улучшают работу с кешем, облегчают сам код. Не забывайте также обновлять версии php, это служит тем же целям.

Выберите хороший хостинг

Несмотря на все ухищрения, сайт всегда состоит из файлов, которые надо читать с сервера, html-кеш существует далеко не всегда и поэтому приходится делать много вычислений в php и делать выборки из бд, следовательно чем лучше показатели производительности ваших ресурсов, такие как: скорость работы с mysql, время создания сессий, количество файловых операций в секунду, наличие php-прекомпиляторов, скорость процессора, тем производительнее и сам сайт. Поэтому подберите хороший сервер для своих нужд, не стоит сильно экономить в этом плане. Виртуальные сервера не такие уж дорогие и часто удовлетворяют всем требованиям производительности на небольших проектах.

Минимизация изображений

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

Подобрать правильное расширение

Во-первых, нужно определиться с нужным типом файла. В основном, в вебе выжило только три расширения: gif, jpeg, png, и важно знать когда какой применять, картинка ниже доходчиво всё объясняет (прикреплена ссылкой из-за слишком большого размера).

Типы картинок в интернете

Если в двух словах, то применяйте jpeg ко всем картинкам, кроме тех, где есть прозрачность - это будет png, или анимация - это будет gif.

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

И последнее, когда вы уже задали нужные расширение и размеры, сожмите сам файл, это поможет сэкономить вам десятки килобайт. Для этих целей я пользуюсь этими двумя бесплатными веб-сервисами: compresspng.com и compressjpeg.com, просто потому что у них удобный интерфейс и нет заметной потери качества при обработке.

Уменьшите количество http-запросов к серверу

Каждая подгрузка файла с сервера занимает немножко процессорного времени. Самым популярным способом решения этой проблемы является создания css-спрайтов. Это когда создаётся одна картинка, которая содержит несколько других. Для примера:

Пример css-спрайта

Таким образом вместо n запросов, мы обращаемся к серверу всего один раз. Чтобы вывести в нужном месте нужный кусочек спрайта, мы создаём элемент, у которого указываем размеры и сдвиг бэкграунда (background-position), а в background-image, естественно, ставим наш спрайт. Несмотря на то, что суммарный вес картинок по отдельности точно такой же (а иногда и меньше), мы уменьшаем время загрузки страниц разгрузкой процессора. У себя на сайт я пошёл ещё дальше и вообще отказался от картинок в оформлении, у меня здесь только лого, а тот домик в меню это, вообще, символ.

В случае с другими файлами, которые загружаются браузером (стили, например), не думаю, что вы их разделили без веской причины, поэтому не стоит думать над этим, к тому же некоторые движки (Bitrix, например) умеют сами объединять и сжимать такие файлы.

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

ExpiresActive on ExpiresDefault "access plus 1 day" ExpiresByType image/jpeg "access plus 3 day" ExpiresByType image/gif "access plus 3 day" ExpiresByType image/png "access plus 3 day" ExpiresByType text/css "access plus 3 day" ExpiresByType application/javascript "access plus 3 day"

Данный код значит: "по умолчанию кешировать на один день, картинки, css и js кешировать на три дня".

Уменьшите количество запросов к бд

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

  • Могу ли я точнее указать список необходимых полей для возврата?

    В CMS это позволяет уменьшить количество задействованных таблиц при запросах

  • Получал ли я эти данные где-нибудь выше?

    Это позволяет убрать лишние запросы в коде. Зачастую бывает не самым очевидным моментом, поэтому этот пункт и включён, несмотря на то, что выглядит он глупо. Примером могут служить сложные способы вывода динамических страниц в CMS, например, компоненты Битрикса.

  • Никогда не стоит писать запросы внутри циклов.
  • Стоит объединять близкие запросы на одной странице.

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

Минимизация css и js

Как и все файлы, эти файлы также имеют вес, который отрицательно влияет на скорость загрузки. Но фанатичное сокращение символов, ведёт к потере читаемости. Я не думаю, что ради 1-2 кб веса стоит жертвовать поддержкой разработки. Но если подойти с умом, то можно, конечно, найти компромисс, например, использовать быстрые правила, уменьшать размер селекторов, убрать дублирующиеся правила, объединить функции и циклы.

Подробнее об ускорении работы css и js файлов будет рассказано отдельно.

География

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

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

К чему стремиться?

К идеалу конечно, человек моргает за 0,3-0,4 секунды. У акул рынка скорость загрузки страниц составляет как раз 0,3 - 0,5 секунд и это позволяет приводить на их сайты большУю аудиторию. Выполняя советы из этой главы, можно добиться загрузки в полсекунды, лично у меня получалось на моих основных проектах.

Если остались какие-то вопросы по поводу пунктов этой инструкции или вы знаете ещё действенные способы, которые стоит упомянуть, отпишитесь, пожалуйста, внизу, я вам отвечу.

Похожие статьи

aristov-vasiliy.ru

Сервис тестирования скорости сайта. Бесплатный тест скорости загрузки сайтов

Тестирование скорости сайта

Узнайте, как загружается ваш сайт и можно ли его ускорить

Хотите узнать, насколько быстро загрузится ваш сайт в реальном браузере при средней скорости мобильного соединения и можно ли улучшить показатели? Заполните форму и закажите бесплатное тестирование вашего сайта. Через несколько минут вам на e-mail будет доставлен отчет о тестировании скорости вашего сайта. В отчете будет несколько важнейших метрик скорости сайта и краткие пояснения.

Скорость сайта — это про деньги

Мы профессионально занимаемся ускорением сайтов, потому что знаем: скорость продаёт. Крупнейшие игроки онлайн-рынков уже поделились своими результатами увеличения прибыли за счет ускорения своих веб-сервисов. Среди них: Google, Amazon, Shopzilla, The Guardian, Wallmart, Bing, Facebook, Lenta.ru.

Подробнее об этом можно узнать в нашей статье: Скорость сайта — это фича!

Обзор сервиса тестирования скорости сайта ускорениесайта.рф

Зачем мне тестировать скорость сайта?

Дело в том, что проведено множество практических исследований, которые говорят о прямой связи между скоростью работы сайта и лояльностью пользователей. Если у вас коммерческий ресурс, эта лояльность выражается в конверсии. Если у вас контент-портал, от скорости зависит вовлечённость: количество просмотров, процент возвратов и процент отказов. Более того, низкая скорость сайта может навредить имиджу компании.

Что делает этот сервис?

Мы загружаем ваш сайт в специально созданных условиях, контролируя все показатели скорости загрузки. Мы используем параметры соединения с Сетью на уровне хорошего 3G (мобильного) соединения, чтобы увидеть скорость загрузки глазами мобильного пользователя. Через несколько минут (в зависимости от загрузки сервиса) вы получаете отчет с результатами тестирования.

Зачем нужна галка «Мобильный браузер»?

Эта опция запускает тестирование сайта в режиме эмуляции мобильного устройства (Iphone 6). При этом сайт будет считать, что тест проводится с мобильного устройства, все мобильные свойства будут работать как требуется (редиректы, адаптивные элементы и т.д.) Также в этом режиме используется торможение процессора (CPU), чтобы получить максимально реалистичные результаты.

Что я получу в результате?

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

xn--80aanaoiczhuihpc.xn--p1ai