Как повысить скорость вашей страницы за лучшую производительность сайта

Скорость страницы теперь является фактором ранжирования в мобильном поиске. Это означает, что это критически важный компонент во всех ваших усилиях по оптимизации поисковых систем (SEO) из-за его влияния на пользовательский опыт.

Согласно исследованиям, проведенным Financial Times, 1-секундная медленная страница приводит к 5-процентному снижению активности читателей .

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

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

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

Установите базовый уровень

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

  • WebPageTest.org.
  • GTmetrix.com.
  • Google PageSpeed ​​Insights.

Google PageSpeed ​​Insights

Когда у вас появятся ваши инструменты и базовая линия, пришло время работать.

Понять, как работают веб-сайты

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

Мы находимся в интересном месте в истории Интернета, где буквально каждый может создать сайт всего за несколько кликов. Хотя это имеет определенные преимущества, оно также создает целый мир новых проблем.

Подумайте об этом так: если кто-то ничего не знал об архитектуре, а использовал программное обеспечение, которое позволяло им создавать чертежи для моста всего за несколько кликов, вы бы чувствовали себя комфортно, проезжая по этому мосту, когда он был построен? Я, конечно, не стал бы.

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

Это то же самое с веб-сайтами.

Чтобы ваш сайт быстро загружался, вам нужно понять язык разметки гипертекста (HTML), каскадные таблицы стилей (CSS) и JavaScript с минимальным минимумом. В идеале вы должны иметь как минимум рабочее знание препроцессора гипертекста (PHP) и внутренней работы WordPress. Имея хорошую ручку на этих элементах, вы сможете вникнуть в гайки и болты веб-сайта и исправить то, что замедляет его.

Минимизировать HTTP-запросы

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

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

Каждый запрос протокола гипертекстовой передачи (HTTP) увеличивает время, необходимое для загрузки страницы . Часто значительно. Фактически, воздействие может быть настолько драматичным, что более мелкая веб-страница с большим количеством HTTP-запросов может занять больше времени для полной загрузки, чем большая веб-страница с меньшим количеством HTTP-запросов.

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

Файлы CSS и JavaScript часто являются плохими плодами здесь, потому что у многих сайтов есть тонна обоих. Для этого есть три варианта:

  • Консолидируйте все файлы CSS и JavaScript в один файл CSS и файл JavaScript.
  • Установите плагин, который имитирует эту функциональность на передней панели, оставив фактические файлы CSS и JavaScript нетронутыми на задней панели.
  • Когда это возможно, полностью удалите обращения к файлам CSS и JavaScript.

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

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

Затем я гарантирую, что все файлы CSS и JavaScript для этого сайта объединены в один файл CSS и файл JavaScript.

Наконец, я использую подключаемый модуль, который объединяет все файлы CSS и JavaScript – для темы, а также плагинов – в один файл при загрузке страницы, оставляя фактические файлы нетронутыми в фоновом режиме.

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

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

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

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

Легко подключайтесь к плагинам

Плагины – вот некоторые вещи, которые делают WordPress замечательным. Они также некоторые из вещей, которые могут сделать его ужасным, потому что они могут быть плохо запрограммированы, что приводит к низкой производительности. Они также часто загружают несколько файлов CSS, JavaScript и изображений, даже те, которые уже загружены, например JQuery.

Это может стать настоящим беспорядочным.

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

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

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

Какой беспорядок.

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

Отсканируйте веб-хостинг скидок

Мы все хотим экономить деньги, но ваш веб-хостинг – это не то место, где вы хотите вырезать углы. Это не товар. Существует огромная разница между этим пакетом хостинга в размере 10 долларов США в месяц с нижнего веб-хостинга и пакетом хостинга в размере 30 долларов США в месяц от более высокоуровневого веб-хоста, такого как WP Engine.

Дешевый веб-хостинг дешево по причине.

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

У меня был этот разговор со многими клиентами, и часто их ответ был чем-то вроде «Ну, он быстро загружается для меня».

Вот что: на самом деле это не так.

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

Но не верьте мне на слово, есть несколько инструментов, которые вы можете использовать для проверки фактической скорости веб-сайта .

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

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

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

Использовать минимизацию, кэширование и CDN

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

Минификация. Минимизация – это процесс удаления ненужных символов из файлов CSS и JavaScript. Это включает пробел, комментарии и конечные точки с запятой. Цель здесь – сделать файлы меньше.

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

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

Кэширование. Кэширование значительно улучшает скорость страницы, поскольку оно сохраняет динамически сгенерированные HTML-файлы и обслуживает их из кеша (т. Е. Повторно используя ранее созданные данные) каждый раз, когда выполняется запрос, а не запускает все PHP-скрипты из WordPress каждый раз, когда загружается страница.

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

У вас есть два варианта:

  1. Если вы по-прежнему используете веб-хостинг, вы можете использовать подключаемый модуль, такой как W3 Total Cache, WP-Rocket.me или WP Super Cache.
  2. Если вы используете веб-хостинг, оптимизированный для WordPress, у них, вероятно, уже есть кеширование, встроенное в их систему.

Сеть доставки контента . Сеть доставки контента (CDN) размещает несколько копий ваших файлов (HTML, CSS, JavaScript, изображения, шрифты и т. Д.) На разных серверах по всему миру, так что вместо того, чтобы посетители загружали их прямо с вашего сервера, они загружают их из который ближе к ним. Это приводит к значительно более быстрой загрузке.

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

Я рекомендую посетить HTML-CSS-JS.com, чтобы найти надежные инструменты HTML, CSS и JS, а также редакторы, оптимизаторы кода и многое другое.

Скорость имеет решающее значение для вашего успеха

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

 

Оставить ответ