10 порад щодо прискорення роботи сайту на WordPress

Не так давно ми публікували статтю " Як покращити захист сайту на WordPress: 11 порад ", в якій описували прості, але дієві поради щодо покращення захисту вашого блогу на WordPress. Сьогодні ми розглянемо, як оптимізувати ваш сайт, щоб він працював якнайшвидше . Так що, без зайвих слів, ось 10 порад щодо оптимізації вашого сайту на WordPress!

З точки зору програміста, WordPress дуже швидкий у порівнянні з іншими платформами... але все одно ми можемо оптимізувати сайти на WordPress, використовуючи поширені методики веб-оптимізації та деякі хороші WordPress-плагіни.

Рада 1: Віддавайте статичний контент із домену без cookie

80-90% часу відповіді сайту кінцевому користувачеві витрачається на завантаження компонентів сторінки: картинок, таблиць стилів, скриптів, флешу тощо. Тому віддача статичного контенту з домену без cookie – хороший підхід для всіх сайтів, де навіть маленька затримка в завантаженні чогось може призвести до великої сумарної затримки в роботі сайту. WordPress подбав про те, щоб забезпечити цю можливість.

Вам потрібно встановити дві наведені нижче константи у файлі wp-config.php

define("WP_CONTENT_URL", "http://static.yourdomain.com");
define("COOKIE_DOMAIN", "www.yourdomain.com");

Будь ласка, переконайтеся, що ви використовували bloginfo ('template _directory') для завантаження вашого статичного контенту у файлах теми.

Щоб дізнатися більше про те, як встановити домен без cookie для WordPress, прочитайте тут.

Рада 2: Встановіть заголовок терміну давності для статичного контенту

Установка в заголовку терміну закінчення актуальності конента у майбутньому підкаже браузеру, що можна кешувати і віддавати цей кешований контент до закінчення терміну. Ви можете встановити цей заголовок, внісши невеликі правки до файлу .htaccess . Я рекомендую використовувати код, який пропонує HTML 5 B oiler Plate . Ви можете переглянути цей код нижче:

<IfModule mod_expires.c>
 ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault "access plus 1 month"

# cache.appcache needs re-requests
# in FF 3.6 (thx Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest "access plus 0 seconds"

# Your document html
 ExpiresByType text/html "access plus 0 seconds"

# Data
 ExpiresByType text/xml "access plus 0 seconds"
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"

# RSS feed
 ExpiresByType application/rss+xml "access plus 1 hour"

# Favicon (cannot be renamed)
 ExpiresByType image/x-icon "access plus 1 week"

# Media: images, video, audio
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"

# HTC files (css3pie)
 ExpiresByType text/x-component "access plus 1 month"

# Webfonts
 ExpiresByType font/truetype "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType text/javascript "access plus 1 year"

<IfModule mod_headers.c>
 Header append Cache-Control "public"
 </IfModule>
</IfModule>

Рада 3: Оголосіть константу для значень, що найчастіше використовуються в базі даних

Для розробників цією корисною порадою може бути зменшення кількості запитів до бази даних . Потрібно використовувати деякі функції WordPress, які викликаються найчастіше і більше одного разу на сторінці.

Наприклад, щоб отримати адресу головної сторінки, ми зазвичай використовуємо
get_option('home');. Ця функція насправді здійснює запит до бази даних та отримує звідти необхідне нам значення. Ми знаємо, що воно буде однаковим у всіх випадках і це значення знадобиться нам у різних місцях.

Що ж робити у цій ситуації?

Зазвичай я створюю нову константу у файлі wp-config.php ось так:

define('MY_HOME','http://www.yourdomain.com');
define('BLOG_NAME','Expert Developer');

Після оголошення цієї константи потрібно використовувати її замість get_option('home') або подібної функції. Це зменшить кількість запитів до бази на сторінці. Ви також можете встановити константи для директорії шаблонів.

Рада 4: Оптимізуйте вашу базу даних

Є кілька плагінів, які можуть взяти на себе оптимізацію та підтримку бази даних WordPress. Я просто перерахую деякі з них, але якщо ви пошукайте в WordPress Plugin Directory, ви знайдете їх набагато більше:

• Yoast Optimize DB
• WP DB Manager

Зверніть увагу , що багато великих «оптимізують/кешуючих плагінів», які допомагають з кешуванням і подібними речами, вже проводять свою оптимізацію - так що якщо у вас встановлений плагін, що кешує, можливо, це питання вже вирішене. Просунуті користувачі можуть просто використовувати PHPMyAdmin для оптимізації бази даних WordPress.

Рада 5: Кешування – ключ до успіху

Кешування – найважливіший фактор для оптимізації сайтів із високою відвідуваністю. Нещодавно ми вже писали огляд 5 непоганих плагінів для прискорення кешування, ви можете ознайомитися тут . У WordPress є багато хороших плагінів, які служать для цих цілей. Ці плагіни зазвичай створюють .html файли для кожного посту або сторінки і потім віддають ці html-файли замість того, щоб кожного разу робити запит до бази даних. Ось кілька хороших плагінів для кешування в WordPress:

• WP Super Cache
• Hyper Cache
• W3 Total Cache

Вище перераховані плагіни, які генерують html-файли для кожного посту або сторінки та віддають їх, але є також плагін, який кешує результат запиту до бази даних:

• DB Cache

Рада 6: Використовуйте CDN для сайтів з високою відвідуваністю

Використання СDN ( Content delivery network – система доставки контенту) – це найкраще рішення для сайтів з високою відвідуваністю. CDN – це система доставки контенту з оптимізованих серверів по всьому світу. Ці сервери працюють разом, щоб віддавати ваш контент з безлічі серверів.

Більшість CDN зараз платні і можуть бути досить дорогими. У нас є лише одна безкоштовна CDN :)

• Amazon S3
• Макс CDN
• Media Temple CDN
• вільний CDN

Рада 7: Стиснення та поєднання JS та CSS файлів

Стиснення JS і CSS дасть вам гарне покращення часу завантаження сайту, оскільки це зменшить загальний розмір вашої сторінки.

Ще одна хороша штука, про яку не варто забувати - поєднання JS і CSS файлів . Об'єднання різних файлів в один файл зменшить кількість http-запитів до веб-сервера.

Компресори JS :

• Компілятор закриття

Компресори CSS :

• CSS компресор

Ви також можете використовувати WordPress плагін wp m inify для об'єднання різних JS і CSS файлів в один файл.

Рада 8: Стиснення зображень

Як і стиснення CSS та JS, корисним може бути стиснення картинок на вашому WordPress сайті. Є плагін, який використовує API smush.it та надає стислі зображення вашому сайту на WordPress:

• WP Smush IT

Використання CSS Sprite також може бути корисним для зменшення кількості запитів HTTP.

Рада 9: Стиснення вашого статичного контенту за допомогою gZip

Стиснення статичного контенту за допомогою компресії gZip істотно змінить швидкість завантаження вашого сайту. Це хороший підхід також для веб-розробки загалом. Знову ж таки, звернуся до HTML 5 Boiler Plate.

Вам потрібно просто вставити у ваш .htaccess файл наступний код:

<IfModule mod_deflate.c>
 # force deflate for mangled headers
 # developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
 <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>

# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
 <IfModule filter_module>
 FilterDeclare COMPRESS
 FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
 FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
 FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
 FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
 FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
 FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
 FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
 FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
 FilterChain COMPRESS
 FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
 </IfModule>

<IfModule !mod_filter.c>
 # Legacy versions of Apache
 AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
 AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
 AddOutputFilterByType DEFLATE image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
 </IfModule>
 </IfModule>

Рада 10: Керуйте eTags

eTags також використовуються для кешування, але якщо ви встановили заголовки з терміном актуальності статичного контенту, краще відключити функціональність eTags. Давайте подивимося, як вимкнути eTag за допомогою .htaccess файлу.

Щоб вимкнути eTag, вам потрібно вставити в .htaccess один рядок:

FileETag none

Щоб дізнатися про eTag більше, ви можете відвідати цю посилання.

Є ще багато порад та трюків із цього приводу, але я постарався показати найкращі поради «щодо співвідношення ціна/якість» для кожного, хто тільки збирається зайнятися оптимізацією свого сайту WordPress.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/