В настоящее время наличие веб-сайта с быстрой загрузкой – обязательное условие для успешного продвижения вашего сайта. Быстрый сайт хорош как с точки зрения простоты использования посетителями, так и с точки зрения SEO. Но ускорить ваш сайт может быть сложной задачей.
В этой статье вы найдете советы, как легко и эффективно повысить скорость вашего сайта.
Более года назад Google объявил, что скорость страниц стала фактором ранжирования для мобильных сайтов. Поэтому, когда вы заказываете услуги веб-разработки, всегда обращайте внимание на то, что скорость является ключевым фактором для вашего проекта.
А если вы сами разработчик, читайте дальше, как создать быстрый веб-сайт или повысить скорость загрузки уже существующей страницы.
Используйте правильные инструменты для тестирования
Чтобы повысить скорость вашего сайта, в первую очередь вам нужен инструмент, который позволит вам узнать, насколько быстро работает ваш сайт и как можно его ускорить.
Вам доступны многие инструменты (причем бесплатно):
Google PageSpeed Insights: этот инструмент, предоставленный Google, очень удобен и позволяет настроить веб-сайт в соответствии со стандартами Google, что очень важно с точки зрения SEO.
Pingdom: очень популярный инструмент для тестирования скорости. У Pingdom есть бесплатный набор инструментов и платные опции.
GT Metrix: этот инструмент объединяет результаты из разных источников, что позволяет вам тщательно проверять скорость вашего сайта.
В первую очередь обращайте внимание на мобильные
В настоящее время большинство посетителей веб-сайтов приходят со смартфонов и других портативных устройств. Поэтому теперь разумно сначала думать о мобильных устройствах.
Чтобы узнать больше о веб-дизайне для мобильных устройств, ознакомьтесь с этим интересным руководством.
Оптимизируйте ваши изображения
Изображения часто составляют 75% от общего размера веб-страницы. Поэтому для быстрой загрузки веб-сайта важно, чтобы ваши изображения были должным образом оптимизированы.
Оптимизация изображений не сложна. Если вы используете Adobe Photoshop, убедитесь, что вы используете функцию «Сохранить для Web» и выберите подходящий формат файла для ваших изображений.
.jpg следует использовать для изображений и иллюстраций. Используйте .gif, если вам нужно отобразить анимацию или изображение с несколькими разными цветами, например логотип. Если вам нужна прозрачность, .png — это формат файла, который вам как раз подойдет.
Для получения дополнительной информации и советов по оптимизации изображений, не стесняйтесь обращаться к этой статье.
Правильно обращайтесь с активами
После изображений, ваши активы (файлы .js и .css, PDF-файлы и т. д.) составляют большую часть общего размера веб-сайта. Поэтому очень важно правильно с ними обращаться.
Первое, что нужно сделать, это минимизировать HTTP-запросы. Не разделяйте ваш CSS и JavaScript на несколько файлов — наоборот, попробуйте использовать один файл .js и один файл .css.
Ваша скорость загрузки также может быть увеличена путем отсрочки загрузки некоторых ваших активов. Например, JavaScript считается «ресурсом блокировки парсера». Это означает, что синтаксический анализ самого документа HTML заблокирован JavaScript. Когда анализатор достигает тега <script>, будь то внутренний или внешний, он прекращает извлекать (если он внешний) и запускает его.
Чтобы указать, что сценарий должен выполняться после завершения анализа страницы, используйте атрибут defer, как показано ниже:
<script src=«scripts.js» defer></script>
И, наконец, обязательно уменьшите ваши файлы .js и .css. Если вы не знали, минификация — это процесс удаления лишних пробелов и комментариев из файлов ресурсов с целью уменьшения их размера. Чтобы быстро провести такую работу, вы можете можете использовать Minify.
Убедитесь, что ваш сайт работает на качественном хосте
Нет качественного сайта без качественного сервера. Если вы хотите, чтобы ваш сайт был быстрым и доступным 24/7, вам следует рассмотреть возможность использования услуг качественного хостинг-провайдера. Состоянием на 2019 год одними из лучших считаются:
Sprinthost.ru – данный хостинг работает с 2005 года и обслуживает более 100 тысяч клиентов. Воспользоваться услугами компании сможет владелец как большого проекта, так и маленького. Один из плюсов – умелая и быстрая техническая поддержка. Аптайм – 99,99%.
Beget.ru – хороший и надежный хостинг, с прекрасным соотношением цена/качество. Этот хостинг лучше всего подойдет жителям стран СНГ, так как большинство бонусов и бесплатных возможностей доступно только им.
REG.RU – обслуживает 1,6 млн пользователей, один из самых известных хостингов. Предлагает много различных пакетов и услуг по довольно доступной цене. Отлично подойдет как новичкам, так и продвинутым пользователям, так как тех.поддержка на очень высоком уровне.
Jino.ru – любимец многих пользователей, который работает с 2003 года. Это бюджетный хостинг для более продвинутых пользователей, потому что техподдержка здесь среднего уровня, а многие задачи нужно решать самостоятельно. Один из плюсов хостинга – высокая безопасность.
Используйте методы кэширования для более быстрого отображения ваших изображений
Хотя это на самом деле не метод оптимизации, кэширование ваших изображений в целом является хорошей практикой. Браузер будет быстрее отображать изображения для ваших постоянных посетителей.
Вот готовый фрагмент кода, который будет кэшировать различные типы файлов (изображения, а также другие виды документов, такие как pdf или flv). Этот код должен быть вставлен в файл .htaccess вашего сайта. Убедитесь, что у вас есть резервная копия, прежде чем применять эту технику, на случай, если что-то пойдет не так.
# 1 YEAR
<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>
# 1 WEEK
<FilesMatch "\.(jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
# 2 DAYS
<FilesMatch "\.(xml|txt|css|js)$">
Header set Cache-Control "max-age=172800, proxy-revalidate"
</FilesMatch>
# 1 MIN
<FilesMatch "\.(html|htm|php)$">
Header set Cache-Control "max-age=60, private, proxy-revalidate"
</FilesMatch>
Используете WordPress? Будьте аккуратны с темами и плагинами
Если вы используете WordPress, вы знаете, как полезны темы и плагины. Но имейте в виду, что многие коммерческие темы и плагины имеют множество функций и, следовательно, могут быть довольно большими по размеру, что не очень хорошо для скорости загрузки. Прежде чем принять решение о покупке, убедитесь, что вы протестировали темы с помощью инструмента быстрого тестирования.
Реализуйте кеширование
Давайте закончим этот список очень важной вещью: кэшированием. Веб-кеш (или HTTP-кеш) — это информационная технология для временного хранения (кеширования) веб-документов, таких как веб-страницы, изображения и другие типы веб-мультимедиа, для уменьшения задержки сервера.
Если ваш сайт работает на WordPress, самый простой способ реализовать кеширование — это установить плагин кеша, такой как W3 Total Cache или WP Fastest Cache.
А у вашего сайта все в порядке со скоростью загрузки? Если нет, попробуйте применить на практике эти советы.
0 комментариев