Оптимизация Joomla по рекомендациям Page Speed Insights. Оптимизируйте время ответа сервера wordpress
Как оптимизировать Joomla под Page Speed Insights
В предыдущей статье «Обзор Speed Cache. Сравнение систем кэш Joomla» был приведён тест сравнения расширений кэширования Joomla. Эти расширения помогут в таких важных вопросах как сокращение времени ответа сервера и снижение нагрузки на него. Также была рассмотрена разница между понятиями «скорости» и «степени оптимизации» загрузки сайта. В этой статье дам некоторые советы по оптимизации сайта Джумла на основании рекомендаций Google Page Speed Insights.
Рекомендации Page Speed Insights и Joomla
Ниже изложена информация на основании моего личного опыта. Из CMS работаю исключительно с Joomla (так сложилось). Но то, что изложено ниже, на мой взгляд, применимо к любой готовой CMS, исходный код которой не претерпевает существенных изменений в ходе оптимизации скорости загрузки (не самописной и не фреймворк). Применимо в разной степени и с учётом специфики каждой конкретной CMS.
В Google Page Speed Insights есть две степени важности рекомендаций. Их название и описание взяты с самого сервиса.
- Исправьте обязательно. Если это исправить, страница станет загружаться намного быстрее.
- Исправьте по возможности. Лучше это исправить, если не слишком сложно.
На данный момент (06.04.2017) есть 10 рекомендаций. У каждой из них разная степень важности в зависимости от каждой конкретной анализируемой страницы и от того, от «имени» какого устройства производится анализ (есть «Для мобильных» и «Для компьютеров»). То есть, для разных страниц сайта разные критерии могут иметь разную важность для внедрения, в зависимости от того, насколько, по мнению Google Page Speed Insights, тот или иной критерий влияет на степень оптимизации страницы.
Ниже приведу список рекомендаций в порядке убывания их важности. Первый – самый важный. Порядок основывается на моём собственно опыте (для большинства случаев, с которыми мне пришлось работать).
- Сократите время ответа сервера.
- Оптимизируйте загрузку видимого контента.
- Используйте кеш браузера.
- Включите сжатие.
- Оптимизируйте изображения.
- Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.
- Сократите CSS.
- Сократите JavaScript.
- Сократите HTML.
- Не используйте переадресацию с целевой страницы.
Ниже приведу список рекомендаций в порядке убывания их простоты реализации на сайтах Joomla. Первый – самый сложный. Порядок основывается на моём собственно опыте (для большинства случаев, с которыми мне удавалось работать).
- Сократите время ответа сервера.
- Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы.
- Оптимизируйте загрузку видимого контента.
- Сократите JavaScript.
- Сократите CSS.
- Сократите HTML.
- Оптимизируйте изображения.
- Включите сжатие.
- Используйте кеш браузера.
- Не используйте переадресацию с целевой страницы.
Рекомендации по оптимизации скорости загрузки сайта по вышеописанным критериям, и не только, можно прочесть в официальной русскоязычной справке от Google. А вот раздел справки касательно загрузки сайта на мобильных устройствах. Для ускорения загрузки сайта на мобильных устройствах рекомендую ознакомиться с плагином JAmp и компонентом Responsivizer. А в статье «Обзор JAmp. AMP-страницы в Joomla 3» можно найти сравнение скорости загрузки и степени оптимизации страниц сайта по технологии AMP.
На основании собственного опыта дам советы по внедрению вышеперечисленных рекомендаций на сайт Joomla и подскажу, при помощи каких расширений можно реализовать ту или иную рекомендацию. Также кратко поясню сложности\тонкости некоторых советов.
Сократите время ответа сервера Joomla
Включите и настройте кэш Joomla. Встроенный, Speed Cache или JotCache или какой-то другой. Но без кэширования, скорее всего, будет очень сложно реализовать эту рекомендацию. Включение кэша (любого) может повлечь за собой негативные последствия в виде нарушения работоспособности и\или отображения сайта. Настройка кэша может быть длительным итерационным процессом, но это того стоит.
Нужен максимально быстрый хостинг. В статье «Обзор JAmp. AMP-страницы в Joomla 3» я описывал свой хостинг и его возможности. Если прочтёте список средств панели управления хостингом по оптимизации скорости загрузки сайта, то увидите, что большинство рекомендаций Google Page Speed Insights можно покрыть этими настройками. Также на этом хостинге есть Page Speed кэширование и Zend OPcache (ранее назывался "Zend Optimizer+"). Но выбор хостинга, перенос туда сайта – это не слишком простой и быстрый вопрос. Также стоит отметить, что стоимость такого хостинга не может быть ниже среднерыночной. Например, я плачу около 145$ за 2 года (с учётом наличия скидки 30% по программе лояльности и дополнительной скидки 45% за оплату на 2 года вперёд, по сравнению с помесячной оплатой). В эту стоимость входит хостинг с тарифом «Мастер SSD», 1 выделенный IP адрес и 160 Мб ОЗУ для Zend OPcache.
Нужно отключить\удалить абсолютно все лишние расширения Joomla (компоненты, модули, плагины). Скорее всего, это будет очень затратный по времени процесс. По сути, Вам нужно рассмотреть абсолютно каждый плагин, модули и компонент, который есть у Вас на сайте. Даже если это стандартный плагин, поставляемый с Joomla. Рассмотреть на предмет его необходимости. Если без него можно обойтись, то его нужно отключить. Но это следует делать с очень большой осторожностью и пониманием того, за что именно отвечает то или иное расширение. Придётся несколько раз протестировать весь сайт, чтобы убедиться, что ничего лишнего не отключено.
Если есть возможность, нужно определить, какие из оставшихся расширений создают самую большую нагрузку. Возможно, такие расширения нужно заменить на аналоги. Это достаточно сложно реализовать, так как выявить «тяжёлые» расширения без специальных инструментов, на стороне сервера\хостинга, не получится. Можно воспользоваться отладкой Joomla (Система – Общие настройки – Система – Отладка системы, также проверьте, чтобы был включён плагин «Система - Отладка»). Но она не даст полной картины. Лучше что-то типа New Relic, но для его применения, скорее всего, понадобится минимум VPS\VDS. На общих хостингах применять его не получится. На некоторых хостингах есть подобные инструменты. Но, к сожалению, с New Relic им не сравниться. Например, на моём хостинге есть такие инструменты (рисунки ниже):
- Отчёт «Нагрузка на сайт». С возможностью просмотра количества запросов на веб-сервер за последние 14 дней и за последние сутки, а также использование процессорного времени (в процессорных минутах). К сожалению, без разделения даже по сайтам (если у Вас их несколько на аккаунте).
- Отчёт «Нагрузка по URL».
- Отчёт «Нагрузка по Страницам».
- Отчёт «Нагрузка на MySQL сервер». С возможностью простора затраченного процессорного времени в минутах, трафик в мегабайтах и количества запросов к базе данных. Как для всех баз данных на аккаунте, так и для каждой отдельно.
- Отчёт «Медленные запросы».
Отчёт «Нагрузка на сайт» (рисунок ниже), отдалённо может помочь в проведении с экспериментами касательно нагрузки Joomla на аккаунт. Так, например, на рисунке ниже виден всплеск (137,27 минуты). Это я включил хранение кэша Joomla в Memcache (стандартное кэширование и JotCache). Так как посещаемость сайта маленькая (701 пользователь, 825 сеансов, 1309 просмотров страниц, 1,59 страниц за сеанс), то процессорные издержки на Memcache перекрыли выгоду. Нагрузка Joomla на сервер возросла, примерно, на 104%, при этом, по разным тестам, скорость загрузки сайта ухудшилась, примерно, на 10-20% (да ещё и проблемы с отображением стилей появились). Учитывая всё это и стоимость ОЗУ для Memcache было принято решение отказаться от этой затеи. Хотя для такого решения хватило и фактора падения скорости. То есть, данный отчёт полезен в ситуации типа: «Установили новый компонент – смотрим нагрузку, учитывая посещаемость и тестируя скорость». Делаем выводы о его влиянии на скорость и нагрузку.
Отчёты «Нагрузка по URL» и «Нагрузка по Страницам» (рисунок ниже) могут дать подсказку, какие страницы сайта больше всего потребляют процессорного времени (с учётом количества запросов). Зная это можно посмотреть, какие расширения участвуют в генерации «тяжёлых» страниц и попытаться что-то с этим сделать.
Отчёты «Нагрузка по URL»Отчёты «Нагрузка по Страницам»В принципе, данный отчёт (рисунок ниже) аналогичен отчёту «Нагрузка на сайт», но относится только к базе данных. Например, так можно судить о нагрузке нового компонента Joomla на базу данных. К сожалению, только косвенно. Когда мой сайт был на VPS, то там был установлен New Relic. Так вот благодаря очень-очень подробной информации я смог сразу определить, какой компонент (и даже какая именно опция этого компонента) больше всего нагружает базу данных. Та как там была статистика по каждой отдельной таблице базы данных. В моём случае это был компонент глоссария (SEO Glossary). Вернее, нагрузку создавала одна опция – опция автоматической вставки ссылки в материал Joomla на термины, которые есть в глоссарии. Отключив её, мне не пришлось избавляться от этого компонента, так как нагрузка на базу данных, с его стороны, фактически исчезла.
Отчёт «Медленные запросы» (рисунок ниже). Для каждого запроса выводится подробная информация о том, как он обрабатывался сервером баз данных и какие индексы использовались. Вот пример того ,что Вы можете увидеть в случае, если у Вас будут такие запросы.
После отключения\удаления ненужных расширений стоит поискать опции оставшихся расширений, которые создают нагрузку Joomla на сервер или замедляют сайт. Это ещё более сложная и по времени затратная процедура. Проводится она аналогично вышеописанной с поиском ненужных расширений.
Можно пойти ещё дальше и поискать замену используемым расширениям. А это ещё дольше, сложнее и дороже. Такое я делал только для своих собственных проектов. Возможно, Вам может понадобиться переделать половину сайта. Сама процедура выбора – длительный процесс, а потом ещё настройка и тестирование, причём, несколько итераций и в течение нескольких дней.
Использование кеша браузера Joomla и другие рекомендации
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Оптимизируйте загрузку видимого контента. Сократите HTML. Сократите JavaScript. Сократите CSS.
Помимо вышеописанного (с отключением\удалением лишних расширений), для реализации данных рекомендаций можно воспользоваться специальным плагином JCH Optimize Pro. Там есть соответствующие опции. Применение этого или любого другого аналогичного расширения может повлечь за собой негативные последствия в виде нарушения работоспособности и\или отображения сайта. Настройка подобного расширения может быть длительным итерационным процессом, но это того стоит.
Также, в качестве инструментов, позволяющих реализовать рекомендации Google Page Speed Insights, можно использовать инструменты\настройки хостинга\сервера или поискать соответствующие расширения Joomla.
Нужно понимать, что помимо временных и денежных затрат подобное расширение может не только положительно повлиять на степень оптимизации сайта, но и негативно сказаться на реальной скорости загрузки страницы (в секундах) и нагрузке на сервер (особенно без кэша).
Почему так может происходить? Joomla, как и любая готовая CMS, написана не под конкретные текущие требования именно Вашего проекта, а является универсальным, готовым программным обеспечением для создания разных сайтов. То же самое относится к её расширениям. Так вот советы Google типа: «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», «Оптимизируйте загрузку видимого контента», «Сократите HTML», «Сократите JavaScript», «Сократите CSS» и т.д., по-хорошему, требуют рефакторинга кода (его переработки). По-хорошему, из кода нужно убрать абсолютно всё лишнее, что не нужно для текущих задач Вашего конкретного сайта. А это требует от специалиста высокой квалификации и много времени, как следствие – дорого. Также это, наверняка, лишит Вас всех преимуществ применения готовой CMS. Вы уже не сможете, так же легко, как и ранее, устанавливать дополнительные расширения, обновлять ядро CMS и т.д. По сути у Вас будет самописная CMS. Или даже хуже. Смесь самописной CMS и готовой. Для дальнейшей поддержки сайта – это «ад».
Что же делает JCH Optimize Pro и ему подобные расширения? Они «на лету» делают некий «рефакторинг» генерируемых страниц без изменения исходного кода CMS и её расширений. А это дополнительная нагрузка на сервер и ухудшение времени генерации страницы. Без кэша подобные процессы могут только навредить.
Плюс, не всегда удаётся настроить JCH Optimize Pro и ему подобные расширения на выполнение всех рекомендаций Google Page Speed Insights без ущерба для функциональности и\или внешнего вида сайта. На мой взгляд, если никак нельзя устранить такой конфликт, то лучше отказаться от выполнения подобной рекомендации.
Оптимизируйте изображения.
Ознакомьтесь с этими рекомендациями, а в качестве инструмента сжатия без потерь рекомендую File Optimizer. В его настройках, на вкладке PNG, можете включить опцию Allow lossy optimizations (лучше для сжатия степени сжатия, но хуже по времени сжатия). Учтите, что сжатие изображений в File Optimizer может происходить очень долго (особенно PNG изображения с большой высотой), но сжимает хорошо. Сравнение программ есть в статье «Обзор инструментов для сжатия изображений».
Помимо выгоды от увеличения скорости полной загрузки страницы (в секундах) и повышению степени оптимизации сайта, сжатие изображений экономит место на диске хостинга, трафик и место на диске, где хранятся резервные копии сайта (если Вы их дублируете). Особенно выгода будет ощутима для тех, кто использует сеть доставки контента (CDN) и платит за каждый мегабайт трафика.
А ещё, я ни разу не встречал побочных эффектов от сжатия изображений.
Включите сжатие.
Сжатие передаваемой, между браузером и сервером, информации (HTML, CSS и т.д.) обладает теми же преимуществами, что и сжатие изображений. Его можно активировать в настройках Joomla (Система – Общие настройки – Сервер – Gzip-сжатие страниц). Это также можно включить (или как у меня на хостинге, включено по умолчанию) в настройках сервера\хостинга. Можно настроить в файле «.htaccess». Подробнее об этом файле и разных его настройках можно прочесть в статье «Попытка номер раз создать почти идеальный htaccess».
Это реализуется достаточно быстро, просто и не вызывает проблем.
Используйте кеш браузера.
Речь идёт о кэшировании всех «тяжёлых» статических файлов на стороне клиента. Это могут быть изображения, CSS и HTML-файлы, видео аудио и т.д. Это можно настроить, например, в файле «.htaccess». Подробнее об этом файле и разных его настройках можно прочесть в статье «Попытка номер раз создать почти идеальный htaccess». Также это можно настроить на сервере\хостинге или при помощи Speed Cache, JCH Optimize и т.д. Также в Joomla есть плагин «Система - Кэш». Но стоит подумать над тем, какие типы файлов и на сколько нужно кэшировать. Так как закэшированные на стороне клиента файлы не обновляются в момент их изменения на сервере. Это может приводить к отображению устаревшей «версии сайта» или контента. Кстати говоря, в Speed Cache эта проблема решена. Если файл был закэширван на стороне клиента, а после этого обновлён на сервере, то при следующем заходе на сайт Speed Cache сообщит браузеру клиента о том, что файл нужно загрузить повторно.
Отмечу, что кэш браузера Joomla может существенно увеличить скорость загрузки сайта, уменьшить трафик и нагрузку на сервер. Плюс, если страница со всем её содержимым закэширована у клиента в браузере, то он сможет ею пользоваться даже без подключения к интернету.
Не используйте переадресацию с целевой страницы.
Нужно избегать переадресаций с одного URL на другой. Более одной переадресации – это плохо. Речь идёт о 300-х редиректах (301, 302 и т.д.). С этим можно бороться только «организационными» мерами. Искать и сокращать цепочки переадресаций в файле «.htaccess», компоненте «Перенаправление» (com_redirect) Joomla или сторонних расширениях. Такие цепочки переадресаций могли возникать в результате многократных смен структуры URL-адреса, переноса содержимого станицы с одного URL на другой (смена принадлежности товара в интернет-магазине из одной категории в другую) и т.д.
Перенаправление может срабатывать, когда у Вас на сервере\сайте настроена переадресация посетителей, зашедших на сайт с мобильного устройства, на мобильную версию сайта, находящегося на другом домене\поддомене (или по другому адресу).
Буду рад, если какие-то советы Вам пригодятся и помогут ускорить свой сайт или сократить время ответа сервера Joomla.
Похожие материалы
Полезные ссылки:
aleksius.com
Как Pagespeed Insights от Google помогает улучшить скорость загрузки сайта
Предположим у вас есть хорошо настроенный сервер, но производительность сайта оставляет желать лучшего.
Вы вложились в SEO но до сих пор Google ранжирует ваш сайт в выдаче ниже, чем предполагалось. Что делать?
Google PageSpeed Insights может помочь вам. Как? Читайте в этой статье.
Предположим у вас есть хорошо настроенный сервер, но производительность вашего сайта оставляет желать лучшего. Задержка ответа сайта занимает секунды и сервер не может обработать более 100 одновременных пользователей. Вы вложились в SEO, но до сих пор чувствуете, что поисковик Google ранжирует ваш сайт в выдаче ниже, чем предполагалось и, о боже, даже не в ТОП 10. Что делать? Как Google PageSpeed Insights может помочь вам? Давайте начнём с основных положений.
Хорошая производительность сайта имеет большое значение. Современный сайт содержит не только статические файлы, но и фронт-энд библиотеки и фрейворки (такие как Bootstrap). И часто посетителю, чтобы увидеть страницу сайта, приходится ждать, пока загрузятся все файлы. И чем дольше загружаются страницы, тем ниже в поиске находится ваш сайт. Об этом много статей написано и мы, Русоникс, проводили собственное
факторов, влияющих на скорость сайтов (Прим. редакции Русоникс).
Следующий фактор-ключ к ранжированию - это наличие мобильной версии сайта. Данный фактор учитывает в ранжировании не только скорость загрузки страниц сайта, но и его удобство использования с мобильных устройств. Кроме того, что мобильные сайты оптимизированы для быстрой загрузки на мобильных устройствах с низкой пропускной способностью и высокой задержкой, они также обеспечивают отличный пользовательский интерфейс.
Очень популярный фреймворк для лёгкого создания оптимизированного веб дизайна - это фреймворк Bootstrap. И хотя Bootstrap легко использовать, он требует минимум 2 статических файла для работы. Это значит, что мы получаем удобство пользования за счет потери производительности. Но не переживайте, чуть позже в этой статье вы узнаете как можно компенсировать эти небольшие потери.
Используя PageSpeed Insights от Google, вы можете провести тесты за считанные секунды, чтобы определить какие нужно провести улучшения и что сделать, чтобы сайт работал быстрее и лучше для поддержки мобильной версии. Все это является важными пунктами для для того, чтобы подняться выше в поиске Google.
Вы можете использовать PageSpeed Insights бесплатно со страницы project или следуйте инструкции по установке расширения Google PageSpeed Insights Plesk в вашей панели PleskПОЯСНЕНИЯ К РЕКОМЕНДАЦИЯМ PAGESPEED INSIGHTS
1. Избегайте переадресаций целевой страницы
Переадресации могут вызвать ощутимые задержки, если запрос переадресуется несколько раз на конечный адрес откуда в итоге отсылаются данные клиенту. Каждая переадресация инициирует свою процедуру HTTP запроса-ответа (с возможным поиском DNS и ТСP согласованием), которая может значительно снизить производительность сайта, особенно для мобильных устройств со слабым интернет соединением.Хороший пример как избежать переадресаций для мобильных устройств - это использование современного оптимизированного дизайна . Хорошо оптимизированный сайт не требует редиректов на выделенный субдомен для мобильных устройств.
Также убедитесь, что настроен правильный редирект в один шаг с http://example.com на https://www.example.com. Люди привыкли набирать короткий адрес вашего домена в адресной строке браузера. Но ваш сайт должен работать только на https (для большей защиты и лучшего рейтинга) и возможно использовать www как субдомен.
Заметки SEO: 301 редирект с HTTP на HTTPS
HTTPS становится важным фактором в ранжировании Google. Поисковый движок отдает предпочтение сайтам, которые используют HTTPS протокол для обеспечения безопасных подключений между двумя конечными объектами - клиентом и сервером. Проверьте возможность активации 301 редиректа на ваших доменах как только вы установили SSL-сертификаты.Пользователям Plesk поможет расширение Security Advisor для активации бесплатных SSL-сертификатов. И вы можете активировать 301 редирект через опцию «Настройки хостинга» в панели управления.
Говоря о редиректах, Plesk поддерживает из своей коробочной версии 301 редиректы, дружественные к SEO. Т.е. если вы устанавливаете бесплатный SSL сертификат Lets'Encrypt (о том, как его установить из панели Plesk, читайте в этой статье (прим. редакции Русоникс)), то Плеск поможет вам переключиться на безопасный протокол без потери в поисковом рейтинге.
2. Включите сжатие
Всегда отсылайте пользователям контент сжатым с помощью GZIP или Deflate. Эти способы сжатия проверяют может ли быть сжат запрошенный ресурс такой как HTML картинки или JS/CSS файлы. Сжатие уменьшает количество байтов, передаваемых через сеть, до 90%. Это сокращает общее время загрузки всех ресурсов, что приводит к ускорению времени загрузки и лучшему юзабилити. Для сжатия важным является то, что обе стороны (и клиент и сервер) понимают примененный алгоритм сжатия. В так называемых полях HTTP заголовков происходит обмен поддерживаемыми алгоритмами.Большинство современных браузеров уже поддерживают сжатие по умолчанию. На серверной стороне вы можете использовать специальные модули такие как mod_deflate (в Apache) или ngx_http_gzip_module (в Nginx)
Plesk поддерживает сжатие из коробочной версии
Не переживайте, сервер Plesk уже имеет предустановленные необходимые модули сжатия. Вам лишь необходимо активировать эту опцию вручную для всех доменов где нужно использовать сжатие. Вы можете добавить необходимый код в .htaccess (apache) или web.config (nginx) в корневой директории вашего сайта или прямо в панели Plesk, что ещё проще.Перейдите в закладку «Сайты и домены» и выберите «Настройки apache и nginx». Если вы используете веб-сервер apache, то вам нужно добавить следующий код в текстовом поле под опцией «Дополнительные директивы apache».
Выберите текстовое поле следующей опции «Дополнительные директивы для HTTPS» если вы используете HTTPS.
Для APACHE:
AddOutputFilterByType DEFLATE text/plain text/html text/xml; AddOutputFilterByType DEFLATE text/css text/javascript; AddOutputFilterByType DEFLATE application/xml application/xhtml+xml; AddOutputFilterByType DEFLATE application/rss+xml; AddOutputFilterByType DEFLATE application/javascript application/x-javascript
Если вы используете nginx, добавьте следующий код в текстовом поле «Дополнительные директивы nginx»
Для NGINX
gzip on; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_disable "msie6"; gzip_types text/plain text/css text/javascript text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss;
Замечание: Динамическое сжатие может повлиять на процессор таким образом, что вы можете потерять преимущество увеличения производительности за счет сжатия, из-за долгой обработки процессором. Не стоит устанавливать максимальный уровень сжатия, так как такая степень сжатия объёма файла не намного уменьшает его размер в сравнении со средней степенью сжатия, а нагрузка на процессор критически увеличивается. Следующее улучшение нужно делать кешированием уже сжатых файлов и передачей их напрямую без участия процессов сжатия.
3. Настройте кеширование браузером
Загрузка статических файлов затратна по времени. Браузер хранит ранее загруженные ресурсы в хранилище кеша браузера. Сервер может определять политику кеширования с помощью специальных заголовков. Локальный кеш должен предоставлять ресурсы из локального хранилища кеша, вместо того, чтобы каждый раз запрашивать их с сервера.Вы можете использовать два поля в заголовке ответа: cache-control и ETag. С помощью Cache-Control вы можете определить как долго браузер может кешировать индивидуальные ответы. ETag создаёт ревалидацию токенов с помощью которых браузер может легко определять изменения файлов.
Браузер должен хранить кешированные файлы минимум 1 неделю. Если у вас есть файлы, которые меняются редко или вообще не изменяются, то вы можете увеличить время кшеирования до 1 года.
4. Уменьшите время ответа сервера.
PageSpeed Insights выводит это сообщение, когда сервер не отвечает через определённое время (>200ms) . Время ответа обозначает время, которое нужно браузеру для загрузки HTML кода для вывода. На этот параметр может влиять множество причин.Причину долгого ответа сервера не легко решить без анализа. Возможные причины задержки могут быть в сервере, например слабый процессор или нехватка оперативной памяти, или на уровне приложения - медленная работа скриптов, тяжёлые запросы в базу данных или подключение очень большого количества библиотек.
Вопрос в том как найти эти «узкие места»? Вы можете использовать расширение New Relic для решения или с помощью тестирования ресурсом Webpagetest где можно увидеть как браузеры отображают страницы и какие файлы замедляют ваш сайт.
5.Уменьшите HTML, CSS&JS
Сервер может уменьшить объём таких ресурсов, как HTML код или JS и CCS файлы, перед отправкой их в браузер. Это сохранит много байтов данных, что увеличивает скорость загрузки ресурсов. Уменьшение объёма - это процесс оптимизации кода без потери нужной информации, чтобы сайт для посетителя отображался корректно.Такие оптимизации заключаются, например, в том, что удаляются комментарии, неиспользуемый код или ненужные пробелы. Не переживайте, вам не нужно этого делать вручную. Есть много бесплатных инструментов и плагинов, которые сделают эту работу автоматически.
Примечание: Если вы посмотрите на уменьшенный файл, то можете подумать, что он не читаемый, но для компьютера нет разницы. По факту это очень хорошо, когда код максимально компактный.
6. Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Это правило действует, когда PageSpeed Insights выявляет, что HTML код ссылается на блокирующий внешний файл JavaScript в верхней части страницы. PageSpeed Insights запускает это правило, если браузер загружает JS и CSS файлы для верхней части страницы, даже если данное содержимое не нуждается в коде для создания правильного вывода. Это значит, что брауезр не может отобразить HTML вывод так как внешние ресурсы доступны частично.Внешний ресурс это не обязательно файл на другом сервере. Он является дополнительным файлом, который клиент должен загрузить вверху HTML ответа для корректного отображения сайта. Отображение соответствующего JS и CSS кода может быть встроено дополнительно. Но при этом должно быть ограничено только действительно нужными частями кода. Следует загружать неотображаемый критический JS код асинхронно или раздельно внизу страницы.
Также есть смысл объединять все файлы в один файл (1 файл для CSS и JS) для уменьшения количества HTTP запросов. В общем, опредённо следует активировать HTTP/2 на вашем сервере. Новая версия протокола имеет очень положительное влияние на производительность сайта.
7. Оптимизируйте изображения.
Если у вас много картинок на сайте, то эта рекомендация может помочь вам добиться колоссальных улучшений. Оптимизация картинок без потери их качества, может существенно уменьшить размер файла, что в свою очередь кардинально улучшит время загрузки сайта.Есть много разных возможностей для оптимизации, т.е разрешения, формата картинки и настроек качества. На многих сайтах вебмастеры загружают картинки в слишком большом разрешении и соответственно слишком объёмные файлы. PageSpeed Insights даёт список этих файлов после проверки с выводом в процентном значении возможного объёма, который можно сократить после оптимизации этих картинок.
Content-Delivery-Networks (CDN) такие как CloudFlare, могут оптимизировать картинки для вас автоматически.
Обратите внимание, что такая возможность оптимизации платная. Конечно вы также можете оптимизировать ваши картинки вручную. Как это сделать, читайте это руководство Google
8.Оптимизация видимого контента
Это сообщение выводится аналогично как при ошибке блокирующего контента. PageSpeed Insights выводит его когда для отображения первого экрана страницы, необходимо дополнительное сетевое подключение. Если посетитель загружает эту страницу через медленное интернет подключение (с большими задержками), то дополнительные сетевые запросы создают значительные задержки и ухудшают работу пользователя.Также важно структурировать HTML код, который загружает «тяжёлый» контент первым. Например если рядом с вашей статьей есть боковая панель, то разместите ее после статьи в HTML коде так, чтобы браузер отображал статью перед боковой панелью.
В статье уже упоминалось про асинхронную передачу JS и это также возможно для улучшения настройки доставки CSS. Необходимые инструкции CSS в видимой части контента могут быть встроены напрямую в HTML код а остальное выделить в один файл после процесса отображения.
Google PageSpeed Insights расширение в Плеск
Если вы ещё не делали этого установите расширение в Плеск «Google PageSpeed Insights Plesk » сегодня и улучшите производительность веб-сайта и позиции в поисковой выдаче.Перевод: Сергей Гордеев (Русоникс) Оригинал
www.rusonyx.ru
9 способов быстро оптимизировать сайт на Wordpress
В этой статье говорим об оптимизации сайта на Wordpress при помощи 9 шагов и плагина Yoast SEOЕсли у вас есть сайт работающий на Wordpress, то вероятно вы уже слышали или даже пользуетесь плагином Yoast SEO. Это популярный плагин среди пользователей Wordpress: его установили больше 8 миллионов раз. По мнению авторов, установить плагин на сайт несложно и от использования плагина вы получите только плюсы. Это быстрый способ оптимизации сайтов на Wordpress. Ниже перечислим 9 шагов по оптимизации сайта на Wordpress :
ОБРАТИТЕ ВНИМАНИЕ НА ГЛАВНУЮ СТРАНИЦУ САЙТА
Как правило, главная страница сайта самая посещаемая. Убедитесь, что она соответствует запросу пользователя, и что он может легко найти нужный ему раздел, конкретную страницу или, в соответствии с запросом, будет перенаправлен на нужную часть главной страницы без необходимости скроллинга. Для оптимизации сайта на WP, перечислите на главной странице самые продаваемые товары (Бестселлеры) или УТП вашего продукта / услуги таким образом, чтобы посетитель понял, что ваш продукт / услуга, то что ему нужно.ПРОВЕРЬТЕ ВАШ CALL-TO-ACTION
Согласно первому шагу, страница, нет… каждая страница сайта должна содержать четкий призыв к действию (call-to-action). Подумайте, что вы хотите от пользователя на конкретной странице. Что должен он сделать, чтобы ваша цель была достигнута? Пишите тексты простым языком, стараясь избегать профессиональных терминов. Старайтесь в призыве ответить на вопрос / запрос пользователя - решить его проблему. Например, call-to-action: “Хочу получить персональную скидку на...” Помните, чем меньше отвлекающих элементов, тем больше вероятность, что посетитель отреагирует соответствующим действием на ваш призыв. Не переборщите с подробностями и визуальным оформлением, удерживайте внимание потенциальных клиентов на call-to-action. Так, если нужно, добавьте отдельную строку с детальным описанием товара. Но избегайте цветных элементов, иконок и прочих деталей вокруг призыва к действию . Всё, что отвлекает пользователей приводит к меньшему количеству кликов.ОПТИМИЗИРУЙТЕ ИЗОБРАЖЕНИЯ
Очень широкое утверждение, но правдивое. Для лучшего понимания предлагаем несколько путей улучшения WP с помощью оптимизации изображений. Рекомендуем использовать:- Описательные имена файлов, например не “DSC001.jpg”, а “beautiful-sunset-in-dresden.jpg”
- Не обрезайте изображения, используя CSS или HTML! Загружайте уже в нужном разрешении.
- Изображения с оптимизированным размером (например, JPEGMini)
УБИРАЙТЕ “ЛОЖНЫЕ” ЭЛЕМЕНТЫ
Одна из вещей, которые люди игнорируют при оптимизации сайта на WP - это, то что неоднозначные (ложные) элементы могут испортить страницу. Если у вас есть элемент на странице, который выглядит как футер, но не является им, то посетители могут неправильно его истолковать и перестать прокручивать страницу вниз. Если призыв к действию находится ниже этого элемента, то вы вероятно потеряете определённое число клиентов из за такого дизайна.ПРОВЕРЬТЕ МЕТА-ОПИСАНИЯ.
Мета-описания не используются поисковиками для SEO, но они кратко и емко описывают то, что получит пользователь, перейдя по той или иной ссылке. Недавно компания Google удвоила кол-во приемлемых символов для метаописаний до 320 символов и авторы статьи сразу начали тестировать как данное изменение использовать для оптимизации сайта на WP. Теперь ваша очередь. На протяжении недели анализируйте текущие ссылки с помощью Google для определённой страницы. После этого адаптируйте их до лимита в 320 символов и посмотрите, что изменилось. Ваши метаописания - это приглашение на сайт, а значит стоит их оптимизировать.УБЕДИТЕСЬ, ЧТО У ВАС ЕСТЬ МОБИЛЬНАЯ ВЕРСИЯ САЙТА
Google индексирует мобильные версии сайтов в приоритетном порядке. Поэтому позаботьтесь о том, чтобы у вашего сайта была мобильная или адаптированная версия для мобильных устройств, если хотите быть выше в поисковой выдаче. Навигация должна быть быстрой и все ссылки на вашем сайте должны быть легко доступны. Используйте проверку Google’s Mobile Friendly для оптимизации сайта на Wordpress.ИСПОЛЬЗУЙТЕ ВНУТРЕННИЙ ПОИСК НА САЙТЕ
У вас на сайте есть внутренний поиск, но вы его не используете, верно? Каждый сайт на WordPress имеет функционал внутреннего поиска. Просто добавьте ?s=test в конце адреса главной страницы сайта и вуаля! Используйте этот поиск для оптимизации сайта на WP. Убедитесь, что поиск доступен для посетителей и проверяйте, что они ищут ( в Google аналитике это Behavior > Site Search > Search Terms ) Слова и словосочетания, которые вы там обнаружите, это то, что ваши посетители хотят знать, но не могут сразу найти. Добавьте страницу или опубликуйте эти термины, оптимизируйте эту страницу с плагином Yoast SEO и продвигайтесь в Google по этим словам. Теперь все эти посетители будут перенаправлены на нужную страницу сайта прямо из поисковика, благодаря проведённой вами оптимизации сайта.НАСТРОЙТЕ “КРАЕУГОЛЬНЫЕ КАМНИ”
Выше мы поговорили о контенте и теперь немного расскажем про структуру сайта. Если настройки корректные, то сайт имеет определённое количество страниц с “краеугольным контентом ” , т.е. основные страницы по определенной теме. На всех остальных страницах где упоминается данная тема, ставьте ссылки на этот контент. Эта настройка помогает понять поисковикам, что это главная страница по этой теме и они будут придавать ей бОльший вес. Вот так это можно оптимизировать на сайте WP. Добавление внутренних ссылок простая задача. Сделайте поиск по сайту на нужную тему. наберите site:example.com keyword в Google и увидите, что он возвращает. На первом месте должна выдаваться страница с “краеугольным контентом” вашего сайта с ключевым словом и ниже должны быть другие страницы соответствующие ключевому слову. Убедитесь ,что 5 или 6 ссылки ведут на страницу, где есть ссылка в тексте на основной контент по заданной теме. В Yoast SEO Premium также есть встроенный инструмент создания внутренних ссылок.УБЕДИТЕСЬ, ЧТО САЙТ ДИНАМИЧНЫЙ
Во всём мире понимают, что динамический сайт ранжируется лучше чем статический. Если на сайте последнее обновление было в 2014 году, то Google сочтет, что вы больше не используете данный сайт. Сегодня сделать сайт на WP динамичным совсем не трудно. Добавьте блог, потом опубликуйте. Попросите кого-то написать пользовательский комментарий к публикации или откройте старую публикацию в вашем давно забытом блоге, обновите контент и переопубликуйте. Или наймите копирайтера для написания контента. За приемлемые деньги ваш сайт оптимизированный для WP, может стать маркетинговым инструментом, и генерировать контент для соцсетей. Записывайте видео, создавайте блоги. Наслаждайтесь увеличением трафика и находите всё больше удовольствия в обучении и информировании посетителей.В конце добавим, что проделав эти шаги, вы сделаете свой сайт более привлекательным как для Google так и для посетителей. Пришло время оптимизировать ваш сайт на WordPress!
Перевод: Сергей Гордеев (Русоникс) Оригинал
www.rusonyx.ru