PHPDev.org

Разработка и развитие web-продуктов

+7 993 898-44-62 +375 44 542 29 41
Оставить заявку

Меню

RU | EN

Авторские статьи PHPDev.ORG

12
335

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

Поэтому крайне важно постоянно контролировать производительность сайта и предпринимать меры для ее улучшения. Как это сделать? Узнайте в нашей статье!

Диагностика: с чего начинать.

Первым шагом необходимо провести сканирование производительности сайта. Мы можем посоветовать следующие сайты:

Google PageSpeed Insights  – бесплатный сервис, который анализирует скорость загрузки как десктопной, так и мобильной версии вашего сайта. Хорошим результатом считается оценка от 90 до 100 баллов. Однако стоит отметить, что оценка PageSpeed не является фактором ранжирования в поиске Google, поэтому выполнение всех рекомендаций не гарантирует мгновенного улучшения позиций вашего сайта в поисковой выдаче.

GTMetrix – инструмент для анализа скорости загрузки вашего сайта. Он предлагает бесплатный доступ или подписку от $10 в месяц, что позволяет мониторить несколько сайтов с различных локаций. Вы можете выбрать местоположение для проверки из более чем 60 вариантов и тип интернет-подключения (LTE, 3G, 2G; Wi-Fi с высокой, средней и низкой скоростью). Отчеты позволяют детально изучить процесс загрузки и получить рекомендации по улучшению производительности страницы. Для использования будет необходим VPN.

PageSpeed Insights API  – инструмент, который предоставляет данные о реальной скорости загрузки страниц у пользователей и данные, полученные путем имитации процесса загрузки. Имитация выполняется в контролируемых условиях, что позволяет легко выявлять и устранять проблемы со скоростью.

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

По данным исследования 2023 года, среднее время загрузки страницы на десктопе для сайтов составляет 4,2 секунды, тогда как на мобильных устройствах — 6,3 секунды

От теории у действию: как проверить скорость загрузки сайта

Есть много бесплатных инструментов для анализа производительности сайта. Рассмотрим использование GTmetrix для проверки скорости десктопной версии сайта и PageSpeed Insights для мобильной версии.

Десктопная версия сайта

GTmetrix отлично подходит для диагностики проблем с десктопной версией сайта. 

Шаги для проверки сайта с помощью GTmetrix:

  1. Перейдите на GTmetrix.

  2. Введите URL вашего сайта и нажмите "Test your site".

  3. Дождитесь завершения анализа и ознакомьтесь с отчетом, уделяя внимание показателям производительности и Web Vitals. Responsive Images

    PHP Performance Report

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

    После прогрузки, вы получаете отчет:

    PHP Report Example

    GTmetrix оценивает производительность вашего сайта по нескольким ключевым метрикам:

    1. First Contentful Paint (FCP) — время, за которое браузер отображает первый текстовый или графический элемент. Для сайтов средний FCP составляет 3,1 секунды.

    2. Time to Interactive (TTI) — время, необходимое для полной интерактивности страницы. Этот показатель в среднем составляет 5,2 секунды.

    3. Speed Index — показатель, показывающий, как быстро происходит видимое заполнение страницы контентом. Средний Speed Index для сайтов — 4,7 секунды.

    4. Largest Contentful Paint (LCP) — время, за которое загружается самый крупный элемент контента на странице. Средний LCP — 3,9 секунды.

    5. Cumulative Layout Shift (CLS) — показатель визуальной стабильности, измеряющий количество неожиданных изменений макета контента. Средний CLS — 0,21.

    Мобильная версия сайта

    Для анализа скорости мобильной версии сайта следует использовать PageSpeed Insights от Google. Этот инструмент предлагает всесторонний анализ производительности и включает следующие ключевые разделы:

    Производительность:

    • FCP — Время рендеринга первого элемента содержимого.

    • Speed Index — Скорость наполнения страницы контентом.

    • LCP — Время загрузки самого большого элемента.

    • TTI — Время до полной интерактивности страницы.

    • TBT — Время блокировки основного потока между FCP и TTI.

    • CLS — Визуальная стабильность страницы.

    Доступность:

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

    • Проверяет контрастность текста, масштабируемость шрифтов, правильность использования атрибутов alt для изображений и т.д.

    Лучшие практики:

    • Проверяет использование современных веб-технологий и безопасность.

    • Оценивает наличие HTTPS, современных форматов изображений, предотвращение утечек данных, правильное использование API и т.д.

    SEO:

    • Анализирует соответствие основным требованиям поисковой оптимизации.

    • Проверяет наличие мета-тегов, правильность структуры URL, оптимизацию изображений, наличие файла robots.txt, карту сайта и т.д.

    PWA (Progressive Web App):

    • Оценивает соответствие критериям Progressive Web App.

    • Проверяет наличие HTTPS, работоспособность offline, возможность установки как приложения, использование Service Worker и т.д.

    Эргономичность мобильного интерфейса:

    • Оценивает удобство использования на мобильных устройствах.

    • Анализирует размеры кнопок, наличие адаптивного дизайна, корректное отображение шрифтов и прочие элементы, влияющие на удобство работы.

    Путь проверки сайта здесь также не сложный: 

    1. Перейдите на PageSpeed Insights.

    2. Введите URL вашего сайта и нажмите "Analyze".


    1. Ознакомьтесь с отчетом, обращая внимание на показатели производительности и предложенные оптимизации.

    Приступим к делу: как поддерживать высокую скорость загрузки сайта

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

    Мы подготовили чек-лист, который поможет вам сосредоточиться на распространенных проблемах.

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


    Разберем каждый из пунктов.

    1. Используйте онлайн-сервисы для сжатия изображений

    Инструменты:

    Шаги:

    1. Перейдите на сайт TinyPNG или JPEG-Optimizer.

    2. Загрузите свои изображения.

    3. Скачайте сжатые версии.

    4. Замените оригинальные изображения на вашем сайте сжатыми версиями.

    2. Применяйте форматы изображений WebP

    Инструменты:

    Шаги:

    1. Используйте Squoosh или ImageMagick для конвертации изображений в формат WebP.

    2. Загрузите изображения в формате WebP на ваш сайт.

    3. Удалите ненужные виджеты и плагины

    Шаги:

    1. Зайдите в панель администрирования вашего сайта.

    2. Перейдите в раздел плагинов или виджетов.

    3. Деактивируйте и удалите ненужные или неиспользуемые плагины/виджеты.

    4. Настройте кэширование

    Инструменты:

    • Плагины WordPress: WP Super Cache, W3 Total Cache

    Шаги:

    1. Установите и активируйте плагины для кэширования, если используете WordPress.

    2. Настройте параметры плагинов в соответствии с вашими потребностями.

    Для сайтов на 1С Битрикс:

    1. Перейдите в административную панель Битрикс.

    2. Откройте раздел "Настройки" -> "Настройки продукта" -> "Производительность".

    3. Настройте параметры кэширования:

    • Включите кэширование для статических страниц, изображений, CSS и JavaScript файлов.

    • Установите время кэширования для разных типов файлов.

    5. Используйте надежные хостинговые услуги

    Советы:

    1. Выберите уважаемого хостинг-провайдера с хорошей производительностью.

    2. Убедитесь, что они предлагают масштабируемые решения, способные справиться с пиковыми нагрузками.

    3. Обратите внимание на такие функции, как SSD-хранилище, оптимизированные серверные конфигурации и хорошая поддержка клиентов.

    6. Включите сеть доставки контента (CDN)

    Инструменты:

    Шаги:

    1. Зарегистрируйтесь на сервисе CDN, таком как Cloudflare или Amazon CloudFront.

    2. Следуйте их инструкциям по настройке для интеграции CDN с вашим сайтом.

    3. Убедитесь, что все статические ресурсы (изображения, CSS, JavaScript) обслуживаются через CDN.

    7. Включите отложенную загрузку изображений и видео

    Инструменты:

    • Плагины для ленивой загрузки: Lazy Load от WP Rocket для WordPress, Lazy Load для сайтов на 1С-Битрикс.

    • Библиотеки JavaScript.

    Шаги для установки 1С-Битрикс:

    1. Перейдите в административную панель Битрикс.

    2. Откройте "Маркетплейс" -> "Каталог решений".

    3. Найдите модуль для ленивой загрузки, например, "Lazy Load".

    4. Установите и активируйте модуль.

    Шаги для установки WordPress:

    1. Войдите в административную панель WordPress:

    2. Перейдите в раздел "Плагины":

    3. В левом меню выберите "Плагины" -> "Добавить новый".

    4. В поле поиска введите "Lazy Load".

    5. Найдите плагин и нажмите кнопку "Установить".

    6. После установки нажмите кнопку "Активировать".

    8. Регулярно проверяйте скорость сайта и исправляйте проблемы

    Как это сделать вы уже знаете благодаря разделу нашей статьи “Как проверить скорость загрузки сайта”.

    Заключение

    Ставьте производительность на первое место вашего веб-ресурса. Превентивные меры по улучшению скорости загрузки должны быть приоритетом с самого начала разработки.

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

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

    Например, этим можем заняться мы — программисты PHPDev. Заявку на консультацию можно оставить на нашем сайте.

    Понравился материал? Подпишитесь на наши соц. сети, чтобы читать больше и чаще!

    Telegtam: https://t.me/phpdev_org

    VC.Ru: https://vc.ru/u/2904596-phpdev-org

    А если вам интересно узнавать об опыте в руководстве, рекомендуем читать блог нашего CEO, который помимо статей на VC.ru активно ведет свой телеграм-канал!

Возврат к списку

ЧИТАЙТЕ ТАКЖЕ

Создавайте быстрее, масштабируйте проще: возможности Symfony разработки
Стоит ли выбрать Laravel? Фреймворк, который ускоряет PHP разработку и масштабирование
Создание сайта под ключ: Как создать успешный сайт для бизнеса
 







    

        
Подписывайтесь и получайте
 больше интересных статей

        

        

            
            
        

        
Нажимая кнопку «Оставить заявку» Вы даёте согласие на обработку Персональных данных и соглашаетесь с нашей политикой защиты персональных данны.х

    



 



    

    

    

        

        

        

        

        
 
		ПОЛУЧИТЬ СМЕТУ ПРОЕКТА 

        

            Хотите узнать стоимость? Отправьте нам материалы по вашему проекту.

При необходимости подпишем NDA.        

        


    
    

        

            

                

                    
                

                

                    

                        

                            BY
                        

                        
                        
    
                            
  • BY
    • 
                            
  • RU
    • 
                            
  • UA
    • 
                        

                    

                    
                

                

                    
                

            

            

                            
            

        

        

        

            

                TXT, RTF, DOC, ODT, DOCX, HTML, PDF
            

            

                 
            

			            

                
            

        

        

        

        

            Нажимая кнопку «Получить смету» Вы даёте согласие на обработку Персональных данных и соглашаетесь с нашей политикой защиты персональных данных.
        

    


    









	

	

	

	

		

			

				
				
			

		

	

	

		
		

			Спасибо!			The application has been successfully sent. We will contact you shortly