Стандартный тест скорости интернет соединения занимает около 1 минуты и проводится в следующем порядке:
Сервис в автоматическом режиме определяет ближайший к вам сервер, с которым он будет взаимодействовать, чтобы сделать test скорости интернета. При желании в большинстве сервисов вы можете самостоятельно выбрать подходящий сервер. Чем он ближе к вам, тем точнее будет замер качества доступа в сеть.
Сервис определяет время ответа сети, проходящее с момента отправки запроса с вашего компьютера или смартфона на сервер до начала загрузки. Эта задержка измеряется в миллисекундах (мс). Чем ниже эта цифра, тем лучше. Хорошим пингом считается показатель до 120 мс, отличным – до 45 мс. Этот параметр особенно важен для онлайн-игр вроде CS, World of Tanks или Heroes of the storm, где лишние миллисекунды задержки могут лишить вас победы.
В фоновом режиме с ближайшего к вам сервера скачиваются пустые пакеты данных общим объемом от 10 до 100 Мб. На основании времени их загрузки делается вывод о скорости приёма. Скорость измеряется в мегабитах в секунду, или Мб/с (mbps). Не путайте с мегабайтами, эта единица 8 раз больше: 1 мегабит = 0,125 мегабайта. Чем выше скорость, тем лучше: быстрее будут грузиться страницы браузера, видео, музыка, картинки.
Завершающий этап проверки скорости интернет соединения, во время которого осуществляется передача пустых пакетов данных в обратном направлении: теперь трафик идет от вас на сервер. Единицы измерения исходящей скорости такие же, как у входящей: мегабиты в секунду (mbps). Чем выше фактическая скорость отдачи, тем быстрее вы можете выкладывать информацию и выгружать файлы в интернет.
Подробно рассмотрим сервис гугла, про скорость загрузки сайта google page speed, как попасть в зеленую зону и набрать 99/100 возможных баллов. Быстрота открытия Вашего ресурса это очень важный показатель ранжирования сайта. В интернете очень много инструментов измеряющие скорость загрузки ресурса, но ориентироваться и пользоваться надо google page seed. Ваш проект должен быть в зеленой зоне! Данная зона начинается от 85 баллов. Чтобы обойти своих конкурентов набрать необходимо 98 — 99 баллов из 100. Все 100 получать не нужно, для ста необходимо отключить Яндекс Метрику и Гугл аналитику, что делать не желательно. Добившись высоких показателей, Вы сразу заметите рост позиций. Замерять необходимо каждую страницу отдельно. Переходим к практике.
От чего зависит скорость загрузки сайта google page speed
Технически самая сложно исправляемая ошибка. От отклика Вашего сервера зависит общая картина всех показателей. Если не удается добиться нормальных показателей, то лучше поменять хост или перенести проект на VPS выделенный сервер. — подробная статья
Общее время отклика можно проверить на mts.webopulsar.ru/test вбив свой домен (см. скрин выше). Для быстрого ответа на хосте необходимо настроить ряд параметров, а именно кэширование и сжатие файлов. Все настройки производятся в файле.htaccess, если данного файла в корне сайта нет, то просто создайте его. Если используется VPS сервер, то необходимо настроить руками Nginx сервер. Ручная настройка VPS сервера выходит за рамки данной статьи. В WordPress самое простое решение это установка плагина WP SuperCahe или аналога. Описаний в сети по настройке этих плагинов очень много.
Ответ сервера — это так же количество обращений к нему за тем или иным файлом, а именно за CSS и JS скриптами. Самое первое с чего надо начать, это сократить количество этих файлов, тем самым сократится число запросов и время отклика соответственно. То есть все CSS стили темы необходимо загнать в один большой файл. Как правило, в теме WordPress штук 5 — 7 таких файлов. Тоже самое проделать со скриптами. Точно таким же образом все стили плагинов загнать в общий CSS, скрипты тоже самое. Далее подробно расскажем как отключать стили в плагинах и подключать к общему файлу. Отдельно рассмотрим очистку базы данных и многое другое. Но сначала закончим с настройкой отклика сервера.
Как уже было сказано выше, на обычном хосте отсутствует возможность настройки сервера руками и все управление происходит через файл.htaccess. В двух словах, отдача контента пользователю происходит либо через сервер Apach (Апач), либо Nginx (энжинс). Оба сервера достаточно быстры в отдаче материала пользователю, но Апач при посещаемости более 3000 уникальных посетителей начинает тормозить и захлебываться. При таком наплыве уже необходим Nginx выделенный VPS сервер. Для того чтобы на стороне пользователя выполнялось кэширование необходимо создать или в существующий файл.htaccess вставить соответствующий код, ниже будет приведен.
Для примера возьмем сайт, к нему есть доступ, это тестовый сайт. Кстати Вам тоже рекомендуем завести тестовый домен, закрыть его от индексации и на нем проводить тесты различных плагинов и серьезные переделки темы или всего сайта. И так, этот домен расположен на обычном хосте Мажордомо.
Перед непосредственной настройкой кэширования на хосте необходимо проверить и в случаи необходимости переключиться на Апач. В Мажордоме это делается в панели управления, выбирается нужный домен в разделе сайты, щелчком по нему необходимо перейти в панель управления, далее на вкладку Nginx и там если стоят галки, то все поснимать и сохранить. Если у Вас другой провайдер, то ищите в панели настройки Nginx или спросите службу поддержки.
Для настройки кэширования в файле.htaccess необходимо дать инструкции для сервера. Апач кэширует через модуль mod_headers или более современный mod_expires. Необходимо либо запросить информацию у провайдера, либо поочередно попробовать сначала один, затем другой код, но можно вставить и оба кода, конфликтовать не должно.
## EXPIRES CACHING ## ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" ## EXPIRES CACHING ##
Или второй
# Включаем кэш в браузерах посетителей
После вставки необходимого кода снова выполните проверку скорости загрузки сайта.
Выполняется аналогично, добавлением следующего кода в файл.htaccess.
Mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Собственно всё, что можно было сделать для сокращения ответа сервера.
Выполните проверку вставленного кода, на предмет работы сжатия и кэширования. Для этого на странице сайта в браузере нажмите F5 (обновите страницу), далее F12, откроется окно web-разработчика (если попросит, то еще раз F5), перейдите на вкладку Network, далее в левом окне, в самом верху щелчок по названию страницы (см. скрин ниже), в правом окне на вкладке Headers откроются данные. Должны быть указаны параметры max-age=… и gzip deflate, как на рисунке. Если данные параметры отсутствуют, то что то Вы сделали не так, перечитайте мануал и повторите процедуру.
Добавьте еще две строчки кода:
Php_value memory_limit 512M php_value max_execution_time 30000
Это увеличит память PHP и увеличит скорость загрузки сайта. Идем далее и настраиваем саму тему, блог или магазин.
Вы просто открываете общий файл CSS, как правило, он называется style.css и по очереди копируете в него все CSS файлы темы. Далее скопированные файлы темы необходимо отключить от вывода в функциях темы. Тоже самое проделать со скриптами. Обязательно сделайте резервную копию файлов, которые редактируете.
Следующим этапом необходимо стили плагинов так же загнать в общий файл style.css. Копируем содержимое стилевого файла плагина и вставляем в общий, затем переходим в функционал темы.
Отключение CSS плагинов обязательно нужно делать в функционе темы, чтобы при обновлении плагинов не переделывать заново. Отключение происходит по разному. Это может быть через add_filter или wp_degueue, wp_deregistr_style.
Во всех случаях необходимо найти в файле плагина название регистра отключаемого стиля. Для этого необходимо перейти в папку с плагинами, выбрать отключаемый и перебрать код, как правило, функционального файла (обычно название файла совпадает с названием программы). В качестве примера рассмотрим Newsletter. Открываем файл plugin.php и ищем что то с формулировкой style.
Из скриншота видно, что стили подключаются через функцию wp_degueue, соответственно и отключать надо через неё. Далее смотрим на что ругается google page speed, видим что это один файл под названием style.css — копируем его в общий. Далее на любой странице своего сайта открываем html код, нажимаем Ctrl+U и ищем файл который дает отрицаловку. В нашем случаи это вот эта строка, см. скрин
Примерно таким же образом отключаем остальные стили плагинов. В принципе в интернете можно, наверное, найти необходимые готовые коды отключения стилей и скриптов всех популярных модулей. Ниже дадим несколько кодов для плагинов, которые используются в нашей теме. А пока необходимо учесть еще один момент:
Очень часто в стилях плагинов прописывают относительные пути к изображениям. То есть в папке с программой идут определенные картинки. Путь к ним указывается относительный. К примеру: название-плагина/img/img.pmg.
При копировании в общий файл CSS картинка пропадет и работать не будет, появится битая ссылка, что является грубой внутренней ошибкой сайта. Чтобы этого избежать, необходимо найти все эти относительные адреса изображений и заменить на полный путь к файлу с картинками (абсолютный путь), примерно так: https://им_сайта.ру/трали/вали/плага/img/img.png
Рассмотрим еще несколько примеров. Плагин Contact Form7 необходимо переподключить следующим добавлением кода
Add_filter("wpcf7_load_css", "__return_false");
Стили woocommerce отключаются аналогично
Add_filter("woocommerce_enqueue_styles", "__return_false");
Мой любимый плагин для ведения подписки Newsletter отключается так:
Function wp_dequeue_newsletter_enqueue_style() { wp_dequeue_style("newsletter-subscription"); } add_action("wp_enqueue_scripts", "wp_dequeue_newsletter_enqueue_style", 20);
Если Вы придерживаетесь ФЗ — 153 и используете плагин о предупреждении сбора cookie, то отключить его можно установив в конце functions.php Вашей темы следующий код:
Function wp_dequeue_cn_css_style() { wp_dequeue_style("cookie-notice-front"); } add_action("wp_enqueue_scripts", "wp_dequeue_cn_css_style", 20);
По такой же схеме сократите все Ява скрипт файлы. Таким подходом Вы сократите порядка 10-15 запросов к серверу.
Браузер при открытии страницы загружает первый экран Вашей статьи. Соответственно идет загрузка хейдера — шапки сайта. Как правило, все скрипты и стили прописываются там. Теоретически это конечно правильно, но сильно замедляет загрузку. Для отображения первого экрана не нужен весь файл CSS, тем более что туда запихано все, что нужно и возможно не нужно вообще. Необходима малая его часть, поэтому вставьте между
и часть необходимого кода из CSS файла для отрисовки первого экрана, а остальной общий файл переместите в подвал. Как это сделать технически будет описано ниже. Так же необходимо и скрипты все перенести в подвал. Для этого в функционале темы добавляем следующий код:Function footer_enqueue_scripts() { remove_action("wp_head", "wp_print_styles", 8); remove_action("wp_head","wp_print_scripts"); remove_action("wp_head","wp_print_head_scripts",9); remove_action("wp_head","wp_enqueue_scripts",1); remove_action("wp_head","wp_site_icon",99); add_action("wp_footer", "wp_print_styles", 5); add_action("wp_footer","wp_print_scripts",5); add_action("wp_footer","wp_enqueue_scripts",5); add_action("wp_footer","wp_print_head_scripts",5); add_action("wp_footer","wp_site_icon",99); } add_action("after_setup_theme", "footer_enqueue_scripts");
После этого все стили и скрипты будут находиться в подвале. Следующим моментом необходимо подключить асинхронную загрузку скриптов, это отложенная загрузка. Отвечает за это параметр defer. Добавьте в функции темы следующий код:
Function wcs_defer_javascripts ($url) { if(is_admin()) return $url; if (FALSE === strpos($url, ".js")) return $url; return "$url" defer="defer"; } add_filter("clean_url", "wcs_defer_javascripts", 11, 1);
Сокращение таблиц стилей подразумевает удаление комментариев, переводов строк, пробелов. После этих манипуляций файл значительно сокращается в размерах, но и редактированию практически не подлежит. Перед сокращением обязательно сделайте копию. Если после надумаете редактировать, редактируйте копию и после сжимайте снова.
В интернете много сервисов для сжатия CSS файлов, вот один из них https://csscompressor.com (см. скрин выше). Просто копируете свой огромный файл и вставляете его в окно слева, жмете кнопку и справа готовый сжатый CSS, вставляете сокращенный код в файл на сайте, вместо старого, не забудьте сохранить изменения. Тоже самое проделывается со скриптами. Проверяется работа способность ресурса и скорость загрузки сайта.
В нашей обучающей программе Вы получаете полностью оптимизированный сайт на WordPress! Подписывайтесь в конце статьи на бесплатные уроки и запустите свой мега-проект в интернете.
Все картинки должны быть оптимизированы и сжаты. Если у Вас много страниц и на них куча картинок, то Вы попали. На нашем блоге на момент технической реструктуризации было порядка 2000 изображений. Их полная обработка заняла три дня и чистого времени порядка 40 часов нудной, монотонной работы. Но оно того стоило, теперь любая наша страница выдает 99 из 100 баллов. А позиции сайта потянулись вверх.
Выполнить компрессию несколькими простыми способами. Первый: В самом Page Speed Tools в самом низу предлагаются файлы для скачивания, это скрипты стили и картинки. Но не обольщайтесь, программные файлы скорей всего будут не все, да и картинки могут недодать.
Самый надежный и быстрый способ сжать картинки именно без потерь можно через онлайн сервис — compressor.io (просто скопируйте и вставьте в строку браузера). Сервис на английском, но прост и понятен. Для компрессии без потерь необходимо нажать на правую кнопку (см. скрин выше), работает только с jpg и png, хотя мы сжали и gif. Затем загрузить изображение и сжать, полученную копию можно скачать на комп и потом загрузить обратно на сервер или хост. Будьте внимательны, к названию картинки приклеивает свое название, не забывайте удалять его. Вот и все.
Можно конечно в WordPress воспользоваться плагином, но это опять нагрузка на сервер. И скажем честно, что протестили пару широко разрекламированных плагинов, но результат плачевный, Гугл завернул сжатие и попросил поджать еще. На закуску самое интересное:
Удалите код JavaScript и CSS блокирующий отображение верхней части страницы. Так требуют поисковики. Что же это значит? А значит это следующее: По логике все скрипты и стили должны находится в подвале ресурса и загружаться после загрузки первого экрана. Но часть к примеру нужного CSS кода в первом экране может не загрузится, так как нужный код подгружается после отрисовки первого экрана.
Решается эта проблема достаточно просто. Необходимо из таблицы стилей выбрать нужный код, его еще называют критическим CSS и вставить его в header темы и всё ок.
Во завернул про простату, пойди найди тот код в сжатом CSS файле, да? Сам ищи!!!
Но все действительно просто, берете резервную копию не сжатого общего файла (куда копировали все стили темы и плагинов) и идете в сервис вычисления критического CSS по адресу https://jonassebastianohlsson.com/criticalpathcssgenerator/ и в строку 1 вставляете адрес страницы, в окно 2 вставляете полный CSS и жмете на кнопку 3. Полученный код надо вставить в header темы.
Сделать это надо через функцион темы, то есть в PHP файл функционала в самый конец вставляется следующий код
Add_action("wp_head", "hook_css"); function hook_css(){ echo ""; }
Код может получится большой. Далее проверьте еще несколько разных страниц на скорость загрузки. На некоторых ошибка может всплыть опять. Связано это с тем, что шаблон записи отличается от шаблона страницы и какого-то куска кода может не хватить. Главная страница так же отличается, где то Вы разрешили комментарии, где то нет, и это тоже может повлечь за собой эту же ошибку. Особое внимание уделите лендингам, скорость загрузки лендингов напрямую влияет на стоимость клика в контекстной рекламе. Чем выше скорость, тем ниже стоимость. — подробная статья.
После того, как убедитесь что все страницы срабатывают нормально, то сократите, то есть сожмите полученный CSS и окончательно вставьте в функцион, сохранив резервную копию структурированного кода.
Вот таких результатов Вы должны добиваться!
Возвращаясь к отклику сервера, нужно отметить тот факт, что на время загрузки сайта значительно влияет база данных, её чистота. Под чистотой подразумевается действительно чистота, отсутствие пустых строк от удаленных комментов, ненужные старые редакции постов, включенные на автосохранение по умолчанию и прочий ненужный мусор. Ко всем этим пустым строкам и прочему мусору каждый раз происходит обращение и все это каждый раз загружается.
Тема очистки базы данных достаточно большая и объемная, ориентирована в основном на опытных пользователей, так же в сети много рекомендаций и мануалов. Наш же блог большей частью направлен на новичков. Мы дадим пару советов и хаков к WordPress в рамках данной статьи, которые помогут Вам решить проблемы с мусором в базе данных. Справится даже новичок.
Удалите все ненужные компоненты.
Удалите неиспользуемые плагины. Старайтесь вообще их избегать. Есть плагины которые могут требоваться только в определенный момент, тогда и активируйте, поработали и деактивировали.
Удалите все ревизии и отключите автосохранение записей и страниц.
Как уже говорилось, WordPress по умолчанию сохраняет до 25 последних копий редакций постов. Для отключения ревизий автосохранения записей необходимо открыть файл в корневой папке WP с названием wp-config.php (см. скрин выше), найти строку (если отсутствует, то в конце файла вставить) …. И после неё вставить вот этот код
Define(‘WP_POST_REVISIONS’, false); define(‘WP_POST_REVISIONS’, 0);
Обе строки кода рабочие, вставлять надо только одну. Если не хотите удалять все 25 редакций, то можно ограничить до нескольких штук, к примеру, до двух. Вместо указанного кода необходимо вставить вот такую строку:
Define(‘WP_POST_REVISIONS’, 3);
Далее необходимо удалить лишние редакции, представьте, что на блоге написано порядка 100 статей и ко всем есть по 5 — 10 редакций. Это сильно загружает Ваш сервер. В момент обращения к записи начинается перебор всех ревизий и только в самый последний момент загружается нужная последняя редакция поста. Ввиду этого нужно очистить базу от ненужных редакций.
Для этого переходим в панель управления базами данных и заходим в MySQL. На хосте Мажордомо это делается так: Выбираем в левой колонке базы данных, справа в нужной базе нажимаем ссылку PMA — откроется панель PHP MyAdmin, в ней переходим на вкладку SQL (см. скрин выше) и вводим следующий код:
DELETE FROM wp_posts WHERE post_type = "revision";
Внизу слева кнопка «вперед». Все наша база очищена. Проделанные операции значительно уменьшат время загрузки Вашего сайта.
Периодически, в зависимости от регулярности публикаций, объема комментирования и т. д. регулярно заходите в PHP MyAdmin и вставляйте вот эти запросы в разделе SQL
DELETE FROM wp_posts WHERE post_type = "revision"; DELETE FROM wp_posts WHERE post_status = "trash"; OPTIMIZE TABLE wp_posts,wp_postmeta,wp_comments,wp_options; DELETE FROM wp_comments WHERE comment_approved = "spam"; DELETE FROM wp_comments WHERE comment_type = "pingback"; UPDATE wp_posts p SET p.ping_status = "closed"; DELETE FROM wp_postmeta WHERE meta_key IN("_edit_lock", "_edit_last","_wp_old_slug");
1-ый запрос - удаляет все ревизии;
2-ой запрос - очищает корзину;
3-ий запрос - оптимизирует таблицы;
7-ой запрос - удаляет информацию о последних редактированиях постов и еще некоторые моменты.
Как правило, на сайте устанавливаются кнопки социальных сетей. Данные виджеты устанавливаются через плагин или сторонний скрипт. Если Вы используете плагин, то следуйте инструкциям выше, переместите стили и скрипты в общий файл и т. д. Если сторонний скрипт, то значение «defer» к скрипту может не прописаться, тогда его нужно прописать вручную.. Мы используем код от Яндекс сервиса, в теме для вывода кнопок в конце статьи его необходимо было разместить в файле comment.php. Значение «defer» необходимо в этом случаи прописать вручную. То есть к скрипту необходимо добавить defer = ‘defer’ как показано на рисунке.
Очень часто картинки с сайта копируют, просто даже не изменяя адреса. В таком случаи загрузка изображений происходит с Вашего сайта, и увеличивают нагрузку на Ваш хост. Что бы запретить такое копирование добавьте следующий код в файл.htaccess
RewriteEngine On RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.ru/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?undsoft.com/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?yandex.net/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?feedburner.com/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?mail.ru/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?poisk.ru/.*$ RewriteCond %{HTTP_REFERER} !^http://(.+.)?yourdomain.ru/.*$ RewriteCond %{HTTP_REFERER} !^$ RewriteRule .*.(jpe?g|gif|bmp|png)$ - [F]
Обязательно замените yordomain.ru на свой домен. После установки этого кода, если на сторонний сайт скопируют Вашу картинку без изменения адреса, то у них будут отображаться пустые места.
Спамеры постоянно бомбят комментарии путем запуска специальных роботов. Тем самым создают ненужную нагрузку на Ваш хост. Вставив код
RewriteEngine On RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} .wp-comments-post.php* RewriteCond %{HTTP_REFERER} !.*yourdomain.ru.* RewriteCond %{HTTP_USER_AGENT} ^$ RewriteRule (.*) ^http://%{REMOTE_ADDR}/$
в тот же.htaccess Вы запретите оставлять коммент минуя форму комментирования, таким образом, многие боты просто отвалятся.
На домашней странице выводите только анонсы записей. Выводите только 3 — 5 записей.
Иногда запись бывает очень популярная и обсуждаемая. Старайтесь не выводить более 50 комментов на странице.
Используйте только жизненно необходимые плагины. Удалите разную лобуду. То что можно сделать руками без использования дополнительных модулей, делайте руками, в интернете полно подробных рекомендаций и решений. При не использовании плагина, деактивируйте его на время бездействия. Так например OptimizeDB, плагин по оптимизации базы данных, нужен только при очистке БД.
Активировали, поработали с базой и деактивировали. Таким образом, это расширение будет создавать нагрузку только в момент работы, а не постоянно.
Подумайте о переезде на VPS сервер с обычного хоста. Это сразу решит множество проблем. В плане финансовых затрат практически никаких. На примере провайдера Мажордомо смотрим расценки — хост = 2400 за год, VPS = 3500 за год.
Минус в том, что считается якобы, что сервером гораздо сложнее в управлении и администрировании. Необходимо изучить данную тему, платные настройки стоят от 2000 рублей.
Изучите материал по теме, оплатите месяц и потренируйтесь, проведите так называемый тест. Загрузите пробный сайт, настройте, поработайте с сервером.
Со временем мы выпустим пошаговое руководство по настройке VPS сервера. А пока можете скачать бесплатные уроки и потренироваться на локальном сервере Денвер. Сумеете за пару часов запустить свой полноценный сайт на компе и полностью настроить. Этот опыт понадобиться Вам при администрировании VPS сервера, так что оформляйте подписку и получайте бесплатно уроки.
Совет:
Если Вам руками сложно справится с такими настройками, то попробуйте установить два плагина:
WP Super Ceshe
OptimizeDB
Вначале статьи мы Вам показали скрин одного из наших тестовых сайтов до оптимизации.
А это уже после полной оптимизации.
Соответственно, чтобы не говорили, добиться высоких показателей скорости загрузки сайта в Google Page Speed Tools Insights можно и нужно. Вот наш сайт сайт до оптимизации:
И после оптимизации скорости загрузки сайта.
Все страницы ресурса настроены и имеют показатель 99 из 100. Если отключить Я.Метрику и Гугл аналитику, то будут все 100.
Обязательно настройте свой ресурс на высокие показатели. Параметр скорость загрузки сайта, очень сильно влияет на ранжирование в органической выдачи.
Обязательно ознакомьтесь с похожими записями
Понравился материал? Подписывайтесь на наш блог.
Скорость загрузки страниц сейчас очень весомый сигнал для поисковых систем. Да и для пользователей это значимый фактор, на который сложно не обратить внимание, если с ним проблемы. Улучшая скорость сайта можно не только получать плюсы в ранжировании, но и получать больше доверия и коэффициент конверсий. Ниже приведен список наиболее полезных инструментов, которые помогут провести анализ и выявить самые слабые места сайта в плане скорости.
Инструмент оценки скорости загрузки страниц от Google. Показывает значение от 0 до 100 как для компьютеров, так и для мобильных устройств. Тут же указывает на слабые места сайта и дает рекомендации по оптимизации скорости.
Дает оценку по скорости, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно отображет данные по каждому запросу к серверу (стили, скрипты, изображения и др). Легко оценить, что именно на сайте замедляет загрузку.
Загружаете два сайта для сравнения (себя и конкурента), визуально наблюдаете, кто загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
Загружает страницу два раза, сравнивает количество обращений – выявляет, насколько хорошо организовано кеширование, показывает подробную статистику по каждому из тестов. Сохраняет скриншоты, как сайт выглядит на каждой секунде загрузки. Также в удобной форме демонстрирует, какая группа запросов заняла больше всего времени. Сервер находится в Далласе (США ).
Еще один полезный инструмент для теста скорости сайта. Отображает много сводной информации, также хранит историю, чтобы можно было сравнить, насколько улучшилась или ухудшилась скорость загрузки. Подгружает рекомендации Yahoo и Google для оптимизации скорости, сортируя их по приоритету. Тестовый сервер находится в Ванкувере (Канада).
Сервис тестирует, насколько сайт выдерживает нагрузку (легкий DDOS ). Эмулируется несколько десятков пользователей и более сотни активных соединений. Так как тест длится несколько минут, то в это время нагрузки можно использовать и другие инструменты для оценки скорости загрузки страниц в час пик. По окончанию теста можно посмотреть график, как меняется скорость загрузки от количества активных пользователей.
Анализирует загрузку сайта с разных участков Земли - серверы в США , Европе и Азии. Отображает сводную статистику по каждому тесту.
Посылает запросы к анализируемой страницы с разных датацентров (около 30 серверов) и определяет скорость для каждого из них. Подсвечивает лучшие, худшие и средние показатели по времени и скорости.
Массовая проверка скорости сайта. Можно задавать до 10 адресов – сравнивая таким образом время загрузки и размер документа для каждого из ресурсов.
Отчет по загрузке страницы и всех дополнительных скриптов/стилей/изображений. Простой и часто необходимый инструмент.
Если вы используете какие-то другие бесплатные онлайн-инструменты для проверки скорости загрузки страниц сайта, делитесь ими в комментариях.
Здравствуйте, уважаемые читатели блога сайт. Сегодня хочу поговорить с вами на такую важную тему, как скорость загрузки сайта. Наверное, вы уже все слышали, что наряду со множеством других факторов, влияющих на продвижение Web проекта, поисковые системы с недавних пор стали учитывать еще и это. Да и посетителей тормоза на сайте сильно раздражают, особенно тех, кто привык .
Но тем не менее для многих вебмастеров скорость загрузки не является той темой, над которой стоит начинать ломать голову немедленно, обычно это откладывают на потом в долгий ящик, а на первый план выходят насущные проблемы, связанные с наполнением ресурса уникальными материалами, улучшением его внутренней оптимизацией, но всю совокупность факторов, влияющих . Как говорится, крепость цепи определяется ее самым слабым звеном...
Во всяком случае именно так я относился до недавних пор к тому, чтобы попытаться ускорить свой ресурс. Но мне пришло в голову, что лучше не дожидаться неприятных тенденций в (а именно уменьшения трафика с , ибо она более критично относится к скорости загрузки), а исправить очевидный недочет прямо сейчас.
Надо просто осознать, что скорость , с которой загружается ваш сайт, блог или форум, является очень важным показателем . Если у вашего проекта с этим показателем не все в порядке, то это может повлечь за собой довольно неприятные последствия. И самое важное из них то, что посетители могут отказаться от работы с вашим ресурсом, т.к. он очень долго подгружает страницы. Кроме этого поисковики, в особенности Гугл, учитывают ее при общей оценке полезности того или иного ресурса.
Для того, чтобы понять, а как быстро подгружаются страницы вашего ресурса, можно воспользоваться, например, возможностями такого , подробно описанный в статье по приведенной ссылке. А можно воспользоваться услугами сервисов, которые предназначены для этого. Далее я приведу в качестве примера несколько таких.
В результате будет представлена диаграмма времени закачки отдельных объектов вебстраницы, а также их Урл и вес. Чем меньше объектов будет загружаться и чем легче будет весить каждый из них , тем лучше. Например, я для этой цели:
Собственно, некоторые проблемы и историю измерения скорости вашего сайта вы сможете отследить на соседних вкладках верхнего меню Pingdom.
Во всплывающем окне вам предложат скопировать постоянную ссылку на проделанный тест, а также отправить его по E-mail или в Твитер. Также в нижней части окна можно подписаться на на предмет доступности. Если ваш ресурс упадет (станет недоступен для посетителей), то вам будет выслано сообщение на E-mail, либо SMS на сотовый. Но эта услуга является платной, хотя и имеется возможность бесплатного триала.
Для вашего сайта, а также для просмотра Traceroute, нужно будет выбрать в самом верху страницы вкладку «Ping and Traceroute». Вводите в предлагаемую форму Урл без http, ставите галочку в чекбокс «Traceroute» или «Ping» под этой формой, и жмете «Test now».
На первой диаграмме уделяете внимание положению фиолетовой вертикальной линии - это будет время окончания отрисовки сайта . Вторая вертикальная линия (синяя) будет означать время полной загрузки . Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая - раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд - то нужно озабачиваться исправлением этой ситуации.
Как видно из приведенного скриншота, Google PageSpeed Insights дает комплексную оценку — для компьютерного браузера и для мобильного. Кроме этого, внизу будет приведена оценка удобства пользования вашим ресурсом на различных гаджетах. Если вы еще не озаботились, то оценка там будет очень низкая (да и на приведенном справа скрине вашего сайта в окне смартфона все будет наглядно видно).
Но самое главное то, что Google PageSpeed Insights дает рекомендации, как увеличить оценку вашего сайта , т.е. как его ускорить. Начинать нужно, естественно, с самого верха, ибо эти исправления внесут наибольший вклад в ускорение.
У меня, например, была проблема с настройкой gzip сжатия и с заданием времени кеширования статики (картинок, css файлов и скриптов) в браузерах пользователей, ибо у меня Апач работает в связке с nginx, а с ним я работать не умею. Пришлось писать в техподдержку Инфобокса с просьбой все настроить — сделали, и даже денежек не взяли (спасибо им!). Кстати, изначально они мне поставили время хранения кеша в 1 час, но Google PageSpeed Insights по-прежнему ругался:
Пришлось покопаться в инструкции к этому онлайн сервису и вычитать там, что минимум нужно ставить 1 день хранения статики в кеше. Я попросил техподдержку хостинга поставить с запасом 1 неделю, что они и сделали. Теперича оценка чуток повысилась и шибко важных претензий к моему ресурсу у Гугла в плане скорости загрузки не имеется, что есть хорошо.
Простенько и со вкусом, что называется. Можно подписаться на рассылку изменений.
Про то, я уже довольно подробно писал и поэтому повторяться не буду, чтобы не загромождать и без того уже громоздкую статью (дочитаете до конца — можете считать себя героем).
Но вернемся от измерения скорости к поиску возможностей ее увеличения. , раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.
В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог сайт загружался медленнее, чем 84 процента всех web ресурсов в интернете — это уже звоночек, на который следовало бы отреагировать. Но раз Гугл думает, что по скорости мой блог является аутсайдером, то стоит всерьез отнестись к этой проблеме и вплотную заняться решением вопроса — как ее увеличить.
Собственно, ничего особенно придумывать и не пришлось, ибо Google сам подсказывает наиболее оптимальное решение. Точнее, он предлагает воспользоваться инструментом, который в свою очередь поможет понять, что именно нужно предпринять для того, чтобы ваш сайт немного (или много) ускорить. Я говорю об онлайн-сервисе Page Speed (раньше были еще и одноименные расширения для браузера FireFox и Хром, которыми я в основном и пользовался).
Сразу оговорюсь, что этот инструмент оперирует достаточно сложными и не совсем понятными вещами рядовым вебмастерам, которые в основном связаны с тонкостями и нюансами работы Web сервера. Если вы никогда сервер не администрировали, но будет сложно.
Есть выход — напрячь вашего хостера на тему выполнения действий, которые предписывает Пейдж Спид. Согласится или нет — это уже другой вопрос. я так и не решился, ибо стремно предоставлять доступ к серваку абы кому (вот такой вот я недоверчивый).
На главной странице PageSpeed даже предлагает установить модуль на свой сервер, если он работает под управлением Apache или Nginx (как раз мой случай):
Но я так и не понял, как это делается, ибо совсем не смыслю в администрировании серверов и никогда не работал с юникс подобными системами. Это намного сложнее, чем программу установить или плагин в WordPress залить. Другой уровень погружения. Хостера тоже не решился по этому поводу напрягать. В общем, сей модуль остался мною не испытан — возможно, что вы его уже попробовали и имеет место что сказать...
Вообще, в первый раз я использовал Page Speed в качестве расширения для браузера (сейчас оно, как я понял не фунциклирует). Раньше оно интегрировалось в инструменты для разработчиков в Фаерфоксе и в Хроме. Правда, попервости (несколько лет назад) я лишь мельком посмотрел какие советы он мне дает, и практически ничего не поняв решил, что это не для меня, после чего с легкой душой удалил плагин PageSpeed как не нужный и чуждый моему разуму элемент.
Дело в том, что даже понимая на что ругается этот плагин, я толком не знал что нужно сделать , чтобы все это устранить и хоть как-то ускорить свой блог. В общем, у меня нашлось сразу очень много более важных дел, по сравнению с которыми мышиная возня с настройками Web сервера (тем более, что я в них и не разбираюсь особо) показалась мелкой и несущественной.
Правда, в свое время я тоже отложил в долгий ящик решение проблемы безопасности и в результате поплатился за это потерей всех этих самых денег. Памятуя о случившемся, на днях решил упереться рогом и попробовать сдвинуть с места проблему увеличения скорости загрузки сайта, несмотря на всю непонятность и сложность для меня данного вопроса.
Короче, установил я повторно Пейдж Спид в Мазилу (сейчас этого делать уже не надо), посмотрел на что именно он особо сильно ругается и кое-что мне все же удалось улучшить и, надеюсь, хотя бы немного увеличить скорость.
P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.
Итак, раньше нужно было установить в свой браузер плагин, но сейчас достаточно перейти сюда , ввести Урл адрес страницы, которую вы хотите проанализировать (на разных типах страниц могут возникать разные проблемы со скоростью загрузки, посему в этом инструменте имеет смысл проверять все варианты) и нажать на синюю кнопку «Анализировать».
Дождавшись результатов процесса проверки вы увидите окно подобное тому, что я уже приводил на скриншоте выше по тексту (в пункте 3 описаний онлайн сервисов по проверки скорости загрузки сайтов). Т.о. в результате вы увидите целый список претензий, которые этот онлайн сервис имеет к вашему ресурсу, а именно к скорости его загрузки. Пир этом он даст вам некоторые указания по оптимизации работы Web сервера в купе с используемым вами движком.
Причем, в самом верху окна Page Speed будут расположены замечания и рекомендации, которые вам желательно будет посмотреть и изменить в первую очередь («исправьте обязательно»), ибо это даст наибольший эффект в плане увеличения скорости загрузки и потребует от вас не слишком больших усилий. Приведу пример анализа одного из моих второстепенных проектов, до которых руки особо не доходят:
Т.е. рекомендации и обнаруженные проблемы, помеченные красным прямоугольником с восклицательным знаком и расположенные в самом верху списка, являются наиболее важным и начать оптимизацию желательно именно с них (дешево и сердито, что называется), тем самым добьетесь наибольшего эффекта.
Замечания, помеченные оранжевым цветом, потребуют от вас больших усилий по исправлению, но при этом могут и не привести к очень значительному росту скорости. Увы и ах, пока их можно отложить в долгий ящик и заняться первостепенными задачами, которые помогут существенно ускорить проект.
У меня первоначальная картина несколько лет назад (еще при использовании плагина — сейчас то же самое можно увидеть в http://gtmetrix.com/ , ибо он испльзует АПИ PageSpeed) для https://сайт была такой:
Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера» ), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.
Если нажать на спойлер рядом с этой надписью, то появится список различных файлов, которые не удовлетворяют оптимальным требованиям кэширования статических объектов (скрипты, CSS файлы, файлы изображений используемых на web странице) в браузерах пользователей (т.е. у читателей):
Т.е. PageSpeed Insights советует нам для увеличения скорости загрузки настроить оптимальным образом кэширование различных элементов web страниц в браузерах пользователей для того, чтобы при просмотре других эти статические элементы не подгружались бы заново с сервера. В теории все это звучит довольно запутано, ибо я понятия не имею о механизмах кэширования используемого браузерами (читайте про то, и как его очистить).
К тому же, оптимизацию кэширования статических объектов мы будем проводить за счет механизмов самого сервера вашего хостинга. Довольно запутанно, но я вам предложу уже готовые решения, найденные на просторах рунета, а вы их попробуете в действии и решите, какое именно наилучшим образом будет работать именно на вашем хостинге.
Правда на моем текущем хостинге это не сработало, ибо у меня сейчас стоит связка Апача с nginx (настраивать надо последний, что за меня сделал хостер не ведомым мне способом). Но если у вас чистый Апач, то предложенный ниже метод может сработать.
В общем, мы попытаемся повлиять на сервер где хостится ваш проект таким образом, чтобы он отдавал браузерам команды направленные на оптимизацию кэширования статических элементов. Делать это будем посредством довольно известного инструмента удаленного управления сервером — файла.htaccess . Знаете о существовании такого?
Живет он обычно в корневой папке. Естественно, что все нижеописанное будет работать только на серверах под управлением Apache, но их, как правило, большинство. После подключения к своему ресурсу по FTP (), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла.htaccess.
С этого момента вы все делаете на свой страх и риск. Посему обязательно скачайте на комп копию этого файла, чтобы в случае чего оперативно откатиться назад.
Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» — «Принудительно отображать скрытые файлы». Если и после этого он в корне не проявился, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь Нотепад плюс плюс), назовите его как-нибудь и скопируйте в корень.
После этого переименуйте этот файл в.htaccess в программе FileZilla. Теперь нужно будет открыть его на редактирование и добавить в него приведенный ниже код. Но сначала чуток поясню.
Наиболее популярные способы включения данной опции на веб-сервере под управлением Апач — с помщью модулей mod_headers или mod_expires. Расположенный ниже код поможет помочь вам включить кеширование статики в браузере, если онлайн-сервис хотя бы один из этих модулей Апача у вас на серваке установлен.
Сначала приведу код для модуля mod_headers . Обращаю ваше внимание, что в нем используется проверка наличия у вашего хостера данного модуля. Если его найдено не будет, то код выполняться не будет и никаких ошибок это не вызовет. Однако, я еще раз настоятельно рекомендую предварительно скопировать оригинальный (до внесения расположенного ниже кода) файл.htaccess к себе на комп во избежании эксцессов.
Комментарии (их строки начинаются со знака решетки) потом можете удалить, но они по-любому на работу кода влияния оказывать не будут.
Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires , где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:
Комментарии опять же потом можно будет удалить.
Если вдруг не сработало, но вы надеетесь на чудо, то вот еще несколько вариантов того же самого кода, но пробуйте их по очереди, а не все сразу:
Теперь после того, как вы вставили в.htaccess код, позволяющий повысить скорость за счет оптимизации кэширования в браузере на стороне посетителя, и сохранили произведенные изменения, снова проверьте страницу вашего ресурса в PageSpeed Insights и убедитесь что проблема пропала :
Как видите, в моем случае «Используйте кеш браузера» уже не является критической недоработкой замедляющей загрузку, и значок рядом с этим замечанием сменился на оранжевый, но не на зеленый. К сожалению, повлиять на сторонние сервисы, откуда мой сайт подгружает статики (типа Янедкс, Гугла, Фидбернера и Аптулайка), я не в состоянии.
Что и требовалось доказать. Вот так вот играючи мы с вами разобрались с одной из самых существенных и весомых проблем найденных в Page Speed.
Также очень частой проблемой, на которую ругается сервис GTmetrix, бывает отсутствие сжатия файлов на сервере перед их передачей в браузеры пользователей.
Используется при этом , о который я уже писал. Если вы анализируете не напрямую через PageSpeed Insights, а посредством GTmetrix, то в области PageSpeed «Включить сжатие» называется «Enable gzip compression», а в YSlow - «Compress components with gzip».
Для того, чтобы это самое Gzip сжатие включить на хостингах, где используется сервер Апач, достаточно будет добавить в файл.htaccess (он является дистанционным файлом управления сервером) соответствующий фрагмент кода. У Апача есть два модуля для сжатия и какой-нибудь из них будет установлен у вашего хостера (хотя не факт).
Наиболее распространен — с него и начнем. Мы опять же добавляем в код проверку наличия этого модуля, чтобы не получить 500 ошибку для всего сайта.
Чуть менее популярным и для него код включения Gzip сжатия для нужных типов файлов будет выглядеть так:
Собственно, пробуйте и проверяйте страницу в PageSpeed Insights после установки кода. Если проблема ушла, то считайте, что вам повезло. Мне же в силу наличия Апач с nginx все это не помогло (хостер сказал, что за статику отвечает nginx, при таком раскладе и настраивать надо именно его — как он это сделал мне не ведомо).
Удачи вам! До скорых встреч на страницах блога сайт
посмотреть еще ролики можно перейдя на");">
Вам может быть интересно
Измерение и увеличение скорости сайта в GTmetrix, а так же настройка загрузки библиотеки jQuery с Google CDN
Gzip сжатие для ускорения загрузки сайта - как его включить для Js, Html и Css с помощью файла.htaccess
Как увеличить скорость загрузки сайта по максимуму и оптимизация нагрузки на сервер