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маслянка Плита. Ви можете переглянути цей код нижче:

<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-файли замість того, щоб кожного разу робити запит до бази даних. Ось кілька хороших плагінів для кешування в WordPress:

• WP Super Cache
• Hyper Cache
• W3 Total Cache

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

• DB Cache

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

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

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

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

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

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

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

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

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

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

• CSS компресор

Ви можете також використовувати WordPress плагін wp mінфікувати для об'єднання різних 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