Я построил много блогов за эти годы. Каждый раз, когда начинается процесс, я спрашиваю себя: «Как сделать так, чтобы этот блог загружался быстрее, чем когда-либо раньше?». Поскольку, помимо личной оценки быстрого времени загрузки страницы, он также оказывает большое влияние на итоговый результат — он увеличивает страницу просмотры, снижают показатель отказов и были связаны с улучшением продаж для таких сайтов, как Amazon.
Благодаря моему последнему проекту мне удалось загрузить блог примерно за 560 мс. Это не обязательно достижимо для всех — мой блог довольно прост — но большинство людей наверняка могут загрузить свой блог менее чем за одну секунду.
Вот мои предложения.
1. Отслеживайте время загрузки страницы
Прежде чем вносить какие-либо изменения в свой блог, запустите его с помощью следующих инструментов:
Все это позволяет измерить текущее время загрузки страницы, а также советы и рекомендации по его улучшению. Это помогает иметь базовое измерение, чтобы вы знали, какие изменения оказывают влияние, а также помогает повторно тестировать, когда вы идете, чтобы получить еще лучшее представление о том, что имеет значение.
2. Используйте статический генератор блогов
Это не просто подстройка, а скорее изменение философии, но выслушай меня. Динамическое программное обеспечение, такое как WordPress, создает большую нагрузку на серверы, и эта нагрузка неизбежно передается пользователям. Если вам нужен WordPress, это нормально — остальные советы будут по-прежнему применимы — но если вам это не нужно, то я бы посоветовал проверить Jekyll или Middleman . Эти инструменты позволяют создавать на компьютере статический блог на основе HTML, который затем можно загрузить на любой сервер. Это означает:
- Ваш сервер должен будет обслуживать только статические файлы. Там не будет никакой интенсивной обработки. Это гораздо более эффективно, чем простое кэширование, и оказывает огромное влияние на время загрузки страницы.
- У вас будет намного более тонкий контроль над вашим сайтом. Конечно, WordPress достаточно гибок, но вряд ли что-то может сравниться с точностью, которая обеспечивается статическим генератором блогов.
Следует признать, что преобразование блога WordPress в статический блог, вероятно, не стоит усилий, но стоит подумать о генераторе статического сайта для вашего следующего проекта.
3. Упростите дизайн вашего блога
В большинстве блогов слишком много всего происходит. Многие из них имеют отвратительный дизайн, огромные изображения, встроенные видеоролики, кнопки обмена в социальных сетях, рекламные объявления, анимацию и многое другое.
Некоторые из этих вещей необходимы, но редко все это необходимо. Поэтому я бы предложил провести аудит дизайна вашего блога. Возможно, даже распечатайте копию своей домашней страницы, сядьте на диван и подумайте о двух вещах:
- Что абсолютно необходимо?
- Что можно удалить?
Вам не нужно делать свой блог таким же редким, как мой, но будьте критически настроены и постарайтесь использовать эпицентрский подход к дизайну:
Дизайн эпицентра фокусируется на истинной сущности страницы — эпицентре — и затем строится наружу. Это означает, что в начале вы игнорируете конечности: навигацию / вкладки, нижний колонтитул, цвета, боковую панель, логотип и т. Д. Вместо этого вы начинаете с эпицентра и сначала разрабатываете самый важный фрагмент контента.
В большинстве случаев упрощение блога не подразумевает никаких реальных жертв. Может показаться, что вы что-то теряете, но читатели приходят за содержанием, а не за кусочками на боковой панели.
4. Выберите хост-сервер рядом с посетителями вашего сайта.
Если ваш веб-сайт размещен на сервере в Нью-Йорке, посетитель из Нью-Йорка будет быстрее загружать страницу, чем кто-либо из противоположной стороны мира. Из-за этого стоит знать, откуда приходят посетители.
Для многих читателей SitePoint ответ будет «Соединенные Штаты», но:
- Если это не так, возможно, стоит разместить блог в другом месте.
- Соединенные Штаты это большое место.
Например, я заметил, что многие посетители моего блога приезжали с западного побережья. Поэтому я переместил свой блог на сервер, который находится в Сан-Франциско. Это не стоило ничего лишнего, но это означает, что многие посетители получают этот дополнительный приятный опыт.
Что касается того, как отслеживать, откуда приходят ваши посетители, все эти данные доступны через Google Analytics. Просто настройте виджет на основе карты. Это займет всего минуту, чтобы выяснить, лучшее место для размещения вашего сайта.
5. Переключитесь на Цифровой Океан (или Линод)
Вся оптимизация в мире ничего не значит, если ваш блог размещается на сервере, работающем с низкой производительностью. И если вы чувствуете, что ваш хост немного болен, я бы предложил перейти к одному из следующих:
Обе эти услуги, помимо предоставления очень доступного хостинга, имеют два основных преимущества:
- Они используют твердотельные накопители, что является огромным преимуществом для производительности.
- Они абсолютно бесполезны, поэтому по умолчанию на вашем сервере не установлено ни одного лишнего быстродействия.
Недостатком, конечно, является то, что вы должны знать, как управлять сервером через командную строку, но такой уровень контроля означает, что вы обладаете большой гибкостью и еще больше повышаете производительность.
(Существуют традиционные хостинговые компании, которые используют твердотельные накопители, но ни одну из них я не использовал, поэтому я не могу лично порекомендовать ни одну из них.)
6. Установите nginx
Большинство веб-серверов в мире работают под управлением Apache . Но хотя Apache является гибким и многофункциональным, он не самый лучший вариант, если вы беспокоитесь о производительности. В этом мире nginx — король горы.
nginx — это быстрорастущая альтернатива Apache, у которой меньше возможностей и определенных ограничений, но она дает огромный прирост производительности. Однако следует помнить несколько вещей:
- Вам, вероятно, понадобится установить nginx на свой собственный сервер. Это может быть сложно для начинающих, но есть много полезных руководств, чтобы помочь вам.
- Установка WordPress может быть еще сложнее, но Digital Ocean имеет опцию в один клик, которую вы можете попробовать.
- Если вы используете статический генератор блогов, то использование nginx не имеет недостатков, и было бы большой тратой не извлечь из этого максимальную пользу.
Переключение на новый веб-сервер — это не простое изменение, но, как и в случае статической генерации блогов, проведите небольшое исследование . Это не займет много времени, чтобы увидеть преимущества.
7. Доставить активы через CDN
Обычно, когда пользователь посещает веб-сайт, все ресурсы — изображения, файлы JavaScript и т. Д. — загружаются из одного места: с сервера. Но хотя это может звучать совершенно нормально, это проблема по двум причинам:
- Одно посещение может создать большую нагрузку на сервер.
- Есть лучший подход.
Альтернативой является использование сети доставки контента (CDN). CDN используется для разгрузки хостинга ресурсов, таких как изображения и файлы CSS, поэтому, когда пользователь посещает ваш блог, ваш сервер обрабатывает только минимальный объем обработки; все остальное загружается с внешнего сервера, оптимизированного для быстрой доставки.
Это полезно, потому что:
- Сети доставки контента работают из дата-центров по всему миру, поэтому ресурсы можно доставлять из мест, расположенных ближе к вашим посетителям.
- Не доставляя эти ресурсы с вашего собственного сервера, вы гораздо более защищены от скачков трафика и других источников замедления.
Вы даже можете быть дешевле, чем стандартный подход. Я плачу 5 долларов в месяц за каплю Digital Ocean и разлагаю все ресурсы в MaxCDN за 60 долларов в год. Для той производительности, которую я получаю, это отличная сделка.
8. Доставить (некоторые) активы со сторонним CDN
Многие современные веб-сайты имеют общие ресурсы, такие как jQuery, и размещать эти ресурсы самостоятельно — не лучшая идея. Вместо этого, лучший подход — доставлять их со сторонних серверов, таких как Google:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>Это дает вам преимущество использования CDN (бесплатно), и многие посетители уже имеют размещенную в Google копию jQuery, кэшированную в их браузере, что исключает необходимость повторной загрузки библиотеки.
Хотя есть сторонние CDN, доступные не только для jQuery, многие из которых вы можете найти здесь:
9. Минимизируйте HTTP-запросы
Для каждого ресурса, загруженного на страницу, требуется HTTP-запрос. Поэтому, когда загружается файл CSS, это HTTP-запрос. Или когда на странице встроена кнопка общего доступа к социальным сетям, это может быть 2-3 HTTP-запроса. Но даже если эти запросы извлекают только небольшой объем данных, сами запросы являются одним из самых больших источников времени загрузки страницы .
Чтобы бороться с этим:
- Вставляйте социальные кнопки только тогда, когда они нужны. Ваша аудитория, вероятно, использует лишь небольшую часть самых популярных сайтов.
- По возможности объединяйте файлы. Например, вместо нескольких CSS-файлов поместите все свои стили в один файл или создайте рабочий процесс, автоматизирующий этот процесс.
Также обратитесь к одному из предыдущих пунктов об упрощении дизайна вашего блога. Если ваш блог загружается медленно из-за HTTP-запросов, возможно, происходит слишком много событий.
Вывод
Производительность веб-сайта — большая тема, и есть много других вещей, которые нужно учитывать, чтобы получить максимальную скорость от вашего блога и сервера. В этом посте мы рассмотрели некоторые основные принципы, которые оказывают наибольшее влияние.
Какие стратегии вы используете (включая те, которые я не упомянул)? Поделитесь ими в комментариях ниже.