Як прискорити завантаження WordPress за допомогою header.php та .htaccess

Швидкість завантаження сайту дуже важлива для кожного блогу чи сайту, особливо для тих, хто використовує віртуальний хостинг – найдешевший варіант послуг хостингу. У статті буде представлено кілька трюків з .htaccess и header.php, які збільшать швидкість завантаження вашого сайту на 50-70%.

Веб-розробники приділяють все більше уваги продуктивності, яка зараз є однією з найгарячіших тем веб-розробки. Швидкість завантаження – це більше, ніж просто параметр. Швидкість – найважливіший параметр. Якщо ваш сайт або блог повільний, люди не користуватимуться ним.

Що означає швидкість для великих інтернет-проектів:

• для Google - збільшений на 500 мілісекунд час завантаження призводить до зменшеної на 20% кількості пошуків.
• для Yahoo - Збільшений на 400 мілісекунд час завантаження призводить до 5-9% зростання кількості людей, які натискають "назад" до того, як сторінка завантажилася.
• для Amazon - Збільшений на 100 мілісекунд час завантаження призводить до 1% спаду продажів.

Google, прагнучи зробити мережу швидше, написали у блозі, що "ми вирішили враховувати швидкість сайту у нашому пошуковому ранжируванні".

Так що повільний сайт також погіршить ваші позиції у пошуковій видачі.

Таким чином, швидкість завантаження є дуже важливою. CDN (Content Delivery System – система доставки контенту) для цих цілей хороша, але до певного рівня, і хороші CDN провайдери трохи дорогі.

Хороша новина в тому, що деякі найважливіші оптимізації швидкості можуть бути зроблені за допомогою простих трюків з .htaccess. Вони можуть зробити будь-який сайт швидше, стискаючи контент та включаючи кешування браузера, відповідають рекомендацій щодо прискорення сайту Yahoo! і не коштуватимуть вам жодної копійки.

Крок 1. Gzip стиснення файлів

Стиснення зменшує час відповіді, зменшуючи розмір http відповіді.

Варто стискати за допомогою gzip ваші HTML документи, скрипти та таблиці стилів. Більше того, варто стискати будь-яку текстову відповідь, включаючи XML и JSON.

Зображення та PDF-файли не потрібно стискати за допомогою gzip, оскільки вони вже стиснуті. Спроби зробити це призведуть до витрати CPU і можуть навіть збільшити розмір файлу.

Стиснення файлів також заощадить трохи трафіку.

За допомогою .htaccess

Для серверів з Apache

mod_pagespeed – це модуль Apache, розроблений Google, він може бути використаний як інші модулі.

Зараз тільки GoDaddy и DreamHost підтримують модуль mod_pagespeed, так що якщо ви розміщуєтеся у них, просто скопіюйте та вставте наступний код у ваш файл .htaccess:

			<IfModule pagespeed_module>
				ModPagespeed on
				# using commands,filters etc
			</IfModule>

Багато хто з вас хоститься в інших хостинг-провайдерів, які не підтримують модуль mod_pagespeed.

Ви можете використовувати модуль mod_deflate (Apache 1.3x використовував mod_gzip, але, починаючи з Apache 2x, використовується mod_deflate).

			<ifModule mod_deflate.c>
				AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
			</ifModule>

За допомогою header.php

Якщо ваш сервер не підтримує mod_deflate або mod_gzipВи можете використовувати цей PHP скрипт для gzip стиснення, він працює і на Apache, і на Nginx.

Просто скопіюйте це у файл header.php вашої теми:

<?php
if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) {
	ob_start( "ob_gzhandler" );
}
else {
	ob_start();
}
?>

Нижче наведено графік, який показує швидкість завантаження мого сайту з і без gzip стиснення.

Крок 2. Відключення ETags

ETTags (Entity Tags – теги об'єктів) – це механізм, який веб-сервери та браузери використовують для визначення, чи збігається компонент у кеші браузера з оригінальним. ETags були додані як механізм для перевірки актуальності об'єктів.

Цей метод більш гнучким, ніж перевірка за датою останньої зміни. ETag – це рядок, який ідентифікує конкретну версію компонента. Єдиним обмеженням буде те, що рядок має бути взятий у лапки. Основний сервер визначає компонент ETag, використовуючи заголовок ETag.

Щоб вимкнути ETags, вставте це у файл .htaccess:

Header unset ETag
FileETag None

Крок 3. Використання кешування браузера

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

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

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

Відвідувач, який прийшов на вашу сторінку вперше, зробить кілька http запитів для того, щоб завантажити файли вашого сайту, але при використанні заголовків Закінчується и Cache-Control, ви зробите ці файли, що кешуються. Це допоможе уникнути непотрібних HTTP запитів при наступних переглядах сторінки.

Для серверів з Apache

Apache задіює модулі mod_expires и mod_headers.

• модуль mod_expires контролює налаштування HTTP заголовка Expires та директиви терміну роботи для HTTP заголовка Cache-Control http у відповідях сервера. Щоб змінити інші директиви Cache-Control, можна використовувати модуль mod_headers.
• модуль mod_headers описує директиви для контролю та зміни HTTP заголовок запитів та відповідей. Заголовки можуть бути об'єднані, замінені або видалені.

Додайте ці правила до .htaccess для встановлення заголовків Закінчується:

			# BEGIN Expire headers
			<ifModule mod_expires.c>
				ExpiresActive On
				ExpiresDefault "access plus 5 seconds"
				ExpiresByType image/x-icon "access plus 2592000 seconds"
				ExpiresByType image/jpeg "access plus 2592000 seconds"
				ExpiresByType image/png "access plus 2592000 seconds"
				ExpiresByType image/gif "access plus 2592000 seconds"
				ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
				ExpiresByType text/css "access plus 604800 seconds"
				ExpiresByType text/javascript "access plus 216000 seconds"
				ExpiresByType application/javascript "access plus 216000 seconds"
				ExpiresByType application/x-javascript "access plus 216000 seconds"
				ExpiresByType text/html "access plus 600 seconds"
				ExpiresByType application/xhtml+xml "access plus 600 seconds"
			</ifModule>
			# END Expire headers

.htaccess правила для встановлення заголовка Кеш-контроль:

			# BEGIN Cache-Control Headers
			<ifModule mod_headers.c>
				<filesMatch ".(ico|jpe?g|png|gif|swf)$">
					Header set Cache-Control "public"
				</filesMatch>
				<filesMatch ".(css)$">
					Header set Cache-Control "public"
				</filesMatch>
				<filesMatch ".(js)$">
					Header set Cache-Control "private"
				</filesMatch>
				<filesMatch ".(x?html?|php)$">
					Header set Cache-Control "private, must-revalidate"
				</filesMatch>
			</ifModule>
			# END Cache-Control Headers

Зверніть увагу:

• Немає потреби встановлювати директиву макс-вік за допомогою заголовка Cache-Controlоскільки вона вже встановлена ​​за допомогою модуля mod_expires.
• must-revalidate означає, що як тільки відповідь застаріває, її потрібно перевіряти ще раз; це не означає, що він перевірятиметься щоразу.

Крок 4.  Зменшення розміру бази даних MySQL

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

Вставте наступний код у WP-config.php для відключення збереження версій:

define('WP_POST_REVISIONS', false );

Якщо ви вирішили залишити цю можливість, ви можете зберігати версії в базі даних протягом фіксованої кількості днів, наприклад, 10 днів.

І ще дещо…

Додати заголовок закінчується не вплине на швидкість завантаження сайту при першому відвідуванні, але ви здивуєтеся, наскільки зменшиться час завантаження для наступного перегляду сторінки або відвідування користувача, що повернувся.

Простежте, як працює ваш сайт: покажіть кількість запитів та час обробки.

Просто вставте наступний код після тексту копірайтів у файлі footer.php вашої теми:

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.

Ви знаєте чи використовуєте якісь інші методи оптимізації часу завантаження вашого сайту чи блогу? Не забудьте поділитися з ними у коментарях.

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

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

редактор wpcafe

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