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

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

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

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

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. Это включает пробел, комментарии и конечные точки с запятой. Цель здесь — сделать файлы меньше.

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

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

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

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

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

  • Если вы все еще используете веб-хостинг, вы можете использовать подключаемый модуль, такой как W3 Total Cache, WP-Rocket.me или WP Super Cache.
  • Если вы используете веб-хостинг, оптимизированный для WordPress, у них, вероятно, уже есть кеширование, встроенное в их систему.
  • Сеть доставки контента. Сеть доставки контента (CDN) размещает несколько копий ваших файлов (HTML, CSS, JavaScript, изображения, шрифты и т. Д.) На разных серверах по всему миру, так что вместо того, чтобы посетители загружали их прямо с вашего сервера, они загружают их из который ближе к ним. Это приводит к значительно более быстрой загрузке.

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

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

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

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

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