В первой части этой серии мы рассмотрели кеширование и оптимизацию базы данных. Во второй части мы поговорим о сжатии, минификации и использовании CDN.
Давайте начнем!
Сжатие и минимизация активов
Это простая математика: если размер вашей страницы составляет 1 МБ, посетитель с 10 Мбит-соединением может загрузить ее за 800 миллисекунд. Таким образом, если вы можете уменьшить размер страницы, скажем, до 600 КБ, посетителю потребуется всего полсекунды для ее загрузки.
К счастью, есть много способов сжать и минимизировать вывод CSS, JS и HTML ваших страниц. Посмотрим как:
Способ 1. Включение сжатия HTTP
Форматы сжатия HTTP, такие как gzip и deflate, используются почти на каждой серверной платформе (включая Apache и Microsoft IIS) и принимаются практически каждым браузером, поэтому HTTP-сжатие, скорее всего, будет работать на каждом устройстве и на каждом сервере. (Ваш сервер может даже включить его по умолчанию. Чтобы проверить это, выполните поиск по запросу « Проверка сжатия http », щелкните один из результатов и введите адрес своего веб-сайта.)
Так как же включить HTTP-сжатие? Есть несколько способов сделать это, но я думаю, что эти два могут помочь каждому:
1. Включите сжатие через .htaccess : если ваш сервер не включил HTTP-сжатие по умолчанию, вы можете включить его, вставив следующий код в ваш файл .htaccess (взят из Boilerplate HTML5 ):
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<IfModule mod_deflate.c>
# Force compression for mangled headers.
# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding «gzip,deflate» env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
# Mark certain resources as been compressed in order to:
#
# 1) prevent Apache from recompressing them
# 2) ensure that they are served with the correct
# `Content-Encoding` HTTP response header
<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
# — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
# Compress all output labeled with one of the following media types.
# IMPORTANT: For Apache versions below 2.3.7 you don’t need to enable
# `mod_filter` and can remove the `<IfModule mod_filter.c>` & `</IfModule>`
# lines as `AddOutputFilterByType` is still in the core directives.
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE «application/atom+xml» \
«application/javascript» \
«application/json» \
«application/ld+json» \
«application/manifest+json» \
«application/rss+xml» \
«application/vnd.geo+json» \
«application/vnd.ms-fontobject» \
«application/x-font-ttf» \
«application/x-web-app-manifest+json» \
«application/xhtml+xml» \
«application/xml» \
«font/opentype» \
«image/svg+xml» \
«image/x-icon» \
«text/cache-manifest» \
«text/css» \
«text/html» \
«text/plain» \
«text/vtt» \
«text/x-component» \
«text/xml»
</IfModule>
</IfModule>
|
2. Включите HTTP-сжатие с помощью плагинов. Если вы не знаете, как редактировать файл .htaccess (или просто не хотите этого делать), вы можете включить HTTP-сжатие с помощью двух популярных плагинов для кэширования: WP Super Cache и W3. Total Cache . Оба они предлагают возможность включить HTTP-сжатие через страницы настроек.
Метод 2: Сведение и объединение файлов CSS и JS
Сокращение активов почти так же важно, как их сжатие. В файлах PHP пробелы не очень важны, так как они анализируются и компилируются; но пробелы в файлах HTML, CSS и JS увеличивают размер файла, а это означает, что посетители будут загружать большие файлы. Чтобы избежать этого, вы можете удалить все ненужные символы в ваших файлах HTML, CSS и JS.
Помимо их минимизации, вы также можете объединить несколько файлов CSS и JS в один файл CSS и JS. Это уменьшит количество запросов DNS, и браузеры не будут загружать каждый файл CSS и JS отдельно.
Сокращение и объединение ваших активов вручную считается плохой практикой и в некоторых случаях может оказаться невозможным. К счастью, с помощью плагинов действительно легко добиться этого автоматически. Если вы используете плагин W3 Total Cache, вы можете включить минимизацию и объединение ваших CSS и JavaScript файлов через страницу настроек плагина. Если вы не используете его, вы можете установить отдельный плагин — мой любимый плагин — Autoptimize . Autoptimize отлично справляется со своей задачей и имеет несколько очень полезных опций, которыми вы можете управлять. Я использую этот с WP Super Cache и очень доволен результатами.
Использование CDN в WordPress
Если ваш блог более визуальный, чем в среднем, если ваши страницы заполнены изображениями, или даже если вы обычный блоггер и хотите, чтобы ваши изображения загружались быстрее, вы можете (и должны) использовать сети доставки контента (которые обычно называют как CDN).
Зачем использовать CDN для веб-сайта?
Логика сетей доставки контента заключается в более эффективном обслуживании контента с использованием «пограничных серверов» по всему миру. Эти серверы могут содержать загружаемый контент (например, изображения, файлы CSS и т. Д.), И когда пользователь заходит на вашу страницу, ближайший к серверу пограничный сервер обслуживает файлы. С низкими ценами на пропускную способность (даже бесплатными, иногда) и невероятно быстрыми серверами доставка вашего контента будет быстрее, чем когда-либо
CDN плагины для WordPress
Существует более нескольких плагинов, которые обеспечивают синхронизацию ваших активов с различными CDN, но я назову лишь несколько:
- Jetpack ‘s Photon: Jetpack — один из самых популярных плагинов для WordPress в репозитории плагинов. Он предоставляет ряд функций в качестве «аддонов». (Думайте об этом как о плагине, обслуживающем множество плагинов.) Один из аддонов называется « Фотон », простой и бесплатный сервис CDN для вашего сайта. Photon будет размещать ваши изображения и избранные изображения в ваших сообщениях и страницах, загружать их на серверы WP.com и изменять URL-адреса ваших изображений новыми URL-адресами из CDN. Он будет фильтровать ваши сообщения только для изменения URL-адресов (то есть он не будет редактировать ваши сообщения), так что вы можете легко отключить его, если он вам не нравится, но вам, вероятно, он понравится очень — это один из лучший бесплатный выбор для большинства сайтов WordPress.
- CloudFlare : CloudFlare больше похож на прокси-сервер, который имеет CDN и действует как брандмауэр для защиты вашего сайта от вредоносных атак. А поскольку вы используете их зоны DNS, URL-адреса изображений останутся прежними, но будут кэшироваться на серверах CloudFlare. Но будьте осторожны — установка CloudFlare немного сложна. Ознакомьтесь со статьей WPBeginner для получения дополнительной информации об установке CloudFlare и использовании его функций CDN.
- W3 Total Cache : Они не зря назвали его «W3 Total Cache». В конце концов, этот чрезвычайно популярный плагин кэширования включает в себя функцию интеграции CDN по вашему выбору на ваш сайт. MaxCDN, один из популярных брендов CDN, имеет подробное руководство по установке своего CDN в настройках W3 Total Cache.
Конец части 2
Во второй части этой серии мы рассмотрели сжатие и минимизацию ресурсов, а также использование CDN в WordPress. В следующей (и последней) статье мы увидим важность оптимизации изображений и подведем итоги об использовании WordPress со здравым смыслом.
Что вы думаете об ускорении WordPress? Поделитесь своими мыслями ниже в разделе комментариев. И если вам понравилась статья, не забудьте поделиться ею.
Увидимся в следующей части!