26 инструментов для повышения скорости страницы вашего сайта

1. Нажмите на эти ссылки, чтобы перейти к разделу по вашему выбору
2. Инструменты для измерения скорости страницы
3. Предложения по улучшению
4. Инструменты оптимизации изображения
5. CSS Sprite Tools
6. Инструменты технической оптимизации
7. Инструменты для минимизации кода вашего сайта
8. Это список!

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

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

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

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

При создании контента для вашего сайта, нет сомнений, что время загрузки должно быть на уме. Чтобы помочь вам в этом процессе, для сентябрьской функции «Инструмент месяца» мы собрали список инструментов, которые мы рекомендуем для повышения скорости страницы вашего сайта. Наслаждайтесь!

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

Если вы ищете конкретный инструмент, вы можете перейти к каждому разделу следующим образом:

Без дальнейших задержек, вот полный список инструментов!

Инструменты для измерения скорости страницы

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

1. Тест скорости сайта Pingdom

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

2. Отчет о производительности GTmetrix

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

3. Google Chrome - проверить элемент

Если вы предпочитаете видеть в своем браузере основные факторы, влияющие на скорость вашей страницы, попробуйте открыть вкладку Сеть Инструмент «Проверить элемент» для хрома.

Щелкните правой кнопкой мыши в любом месте веб-страницы -> Проверка элемента -> Сеть

Это даст вам представление о водопаде, аналогичное Pingdom и GTmetrix, за исключением того, что оно будет отображаться в нижней части браузера на странице, которую вы анализируете, вместо того, чтобы переходить на другой веб-сайт и вводить URL-адрес.

4. Google Analytics - скорость страницы сайта

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

Предложения по улучшению

Инструменты для измерения скорости страницы могут просто сказать вам «вау, у вас ужасные времена загрузки». Но куда вы идете отсюда?

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

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

К счастью, инструменты 5-7, скорее всего, укажут на некоторые очень простые исправления, которые могут быстро улучшить время загрузки.

5. Инструменты Google Page Speed ​​- PageSpeed ​​Insights

Когда дело доходит до измерения скорости страницы вашего сайта, Google предлагает идеальный план атаки изнутри Инструмент PageSpeed ​​Insights ,

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

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

Google также предоставляет несколько различных областей для более эффективного и измеримого доступа к PageSpeed ​​Insights.

6. PageSpeed ​​Insights Chrome Extension

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

На любой веб-странице простой щелчок правой кнопкой мыши, а затем «Проверка элемента» позволит вам заглянуть под капот. Установив расширение, вы также можете просмотреть дополнительную информацию о времени загрузки этой страницы.

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

7. Google Analytics - Предложения по скорости сайта

Еще раз, Гугл Аналитика может предоставить некоторую дополнительную помощь для повышения скорости вашей страницы. На самом деле, все, что он делает, это показать оценку и предложения PageSpeed ​​Insights в вашей приборной панели GA. Технически это не другой инструмент для определения скорости веб-страницы, но полезно увидеть его по-другому.

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

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

Инструменты оптимизации изображения

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

Вообще говоря, вы не хотите, чтобы ваш веб-сайт загружал гигантское изображение, а только уменьшал его с помощью HTML. Это приводит к излишне высокой скорости страницы! Оптимизация ваших изображений - отличный способ улучшить время вашей страницы, и это можно сделать несколькими способами. Инструменты 8-18 помогут!

Инструменты изменения размера изображения
Мы не могли выбрать только один инструмент для этого важного шага. По сути, вы хотите, чтобы ваши изображения были точно такой же ширины и высоты, которые необходимы на вашем сайте. Это означает, что вы не хотите, чтобы изображение шириной 1200 пикселей показывалось в вашем блоге с разрешением 300 пикселей. Вам нужно изменить размер фактического файла изображения до 300 пикселей. Это сократит размер ваших изображений и значительно сократит время загрузки.

Вот список инструментов и учебных пособий, с которыми вы можете сделать это:

8. Изменение размера изображения в фотошопе
9. Изменение размера изображения в Paint
10. Изменение размера изображения в Microsoft Picture Manager
11. Pixlr
12. Веб ресайзер
13. Сжать картинки
14. Pic Resize

Инструменты сжатия изображений

Точно так же, существует столько же инструментов сжатия! Сжатие изображения объединит похожие цвета и избавит вас от лишнего мусора, который не нужен вашим изображениям. Это звучит жестоко, но вы обычно не можете отличить изображения, которые сжаты и не сжаты!

Вы также можете сделать это в Photoshop, но мы нашли в Интернете несколько инструментов массового сжатия, которые могут быть проще в использовании:

15. Kraken.io (на фото выше)
16. TinyPNG
17. Дополнительный способ сделать это с Инструмент PageSpeed ​​Insights в расширении Google Chrome , В разделе «Оптимизировать изображения» ссылки «Просмотреть оптимизированный контент» будут отображаться рядом с каждым предложением. Вы можете открыть их, а затем сохранить их для использования на вашем сайте!

18. Ленивая загрузка изображений

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

Загруженные изображения с отложенной загрузкой через JavaScript не могут загружаться, пока не произойдет определенное событие. Это событие может быть основано на времени или на том, куда смотрит ваш посетитель. Например, изображение не будет загружаться до тех пор, пока пользователь не прокрутит страницу вниз, чтобы увидеть ее. Это избавляет вашу страницу от необходимости ждать загрузки изображения, которое не будет видно даже через несколько секунд (или даже минут) спустя.

Ленивая загрузка может быть сложной темой, но есть много ленивая загрузка плагинов WordPress а также плагины jQuery это не так уж сложно настроить, если вы разбираетесь в HTML и JavaScript.

CSS Sprite Tools

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

CSS-спрайт позволяет объединять несколько изображений в одно, сохраняя количество обращений браузера к серверу. Затем какой-то простой CSS делит изображение на разделы, чтобы отобразить правильную часть, где это необходимо на сайте.

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

19. Spritecow
20. SpritePad
21. Spritebox (на фото выше)

Инструменты технической оптимизации

Хорошо, если вы не разбираетесь в технических вещах, вы можете пропустить эту часть. Хотя, это не слишком продвинуто, и вы можете учиться на этом!

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

22. W3 Total Cache

Если вы используете WordPress, вы по достоинству оцените этот бесплатный плагин. W3 Total Cache возьму почти все за кулисы детали и оптимизировать его для вас. Это включает в себя управление кэшем, управление CDN и минимизацию кода.

W3 Total Cache может многое сделать, и это один из самых мощных плагинов. При этом, возможно, было бы лучше следовать некоторые подробные уроки о том, как его использовать !

23. CloudFlare CDN

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

Есть несколько CDN, но CloudFlare, это один из лучших. Так уж получилось, что у каждого есть бесплатный план!

CloudFlare - это то, что может легко запугать пользователей, так как это еще один очень мощный инструмент для управления веб-сайтом. Но не бойтесь: существует множество руководств по правильной настройке!

Инструменты для минимизации кода вашего сайта

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

24. Компрессор YUI может быть использован для минимизации вашего CSS и JavaScript.

25. Вы также можете использовать Google PageSpeed ​​Insights для минимизации вашего HTML. Просто нажмите «Посмотреть оптимизированный контент» в соответствующих областях, как описано выше, для оптимизации изображений.

26. Если вы используете WordPress, есть несколько плагинов для минимизации вашего кода , в том числе W3 Total Cache ,

Это список!

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

Если вы хотите узнать больше об улучшении скорости вашего сайта, вот несколько ценных ресурсов, с которыми вы можете обратиться:

У вас есть инструмент улучшения скорости страницы, который вы хотели бы порекомендовать? Вы можете упомянуть об этом в комментариях. Мы будем рады обсудить это с вами!

Изображение / фото предоставлено: CloudFlare, FlySi

Похожие

Комментарии