Cпособы аптымізацыі хуткасці загрузкі сайта на WordPress

1. 1. Перадавайце карыстальнікам статычныя матэрыялы з cookie незалежнага дамена
2. 2. Задайце час кэшавання для статычных матэрыялаў
3. 3. Аптымізацыя базы дадзеных сайта на WordPress
4. 4. Выкарыстоўвайце спецыяльныя убудовы для кэшавання медыя файлаў
5. 5. Выкарыстоўвайце CDN
6. 6. Сціск і аб'яднанне ўсіх JS і CSS файлаў стыляў на сайце WordPress
7. 7. Сціск графічных файлаў, аптымізацыя фотаздымкаў на сайце WordPress
8. 8. Сціск статычнага змесціва WordPress ў GZIP
9. 9. Адключэнне ETags ў WordPress

Калі вам трэба дадаць новы матэрыял або ўнесці праўкі ў код сайта на WordPress, гэта можна зрабіць вельмі проста параўнальна з іншымі сістэмамі кіравання сайтам. Найгоршы з іх, мабыць Drupal, а горш чым там можа быць кадаваньне толькі Битрикс.
Тым не менш, не гледзячы на ​​тое што код WordPress напісаны акуратна з чыстага ліста, каб працаваць хутчэй, гэта зусім не азначае, што ён адразу пасля ўстаноўкі аптымізаваны для вашага сервера. Майце на ўвазе, калі вы не зменіце некалькі ключавых параметраў ў пачатку працы вашага блога або вэб-сайта пасля ўстаноўкі, вы можа ўскладніць працэс яго індэксацыі, а хуткасць адкрыцця старонак сайта будзе ніжэй, чым магчыма. Як вынік, гэта незадаволеныя канчатковыя карыстальнікі. Я і калектыў распрацоўшчыкаў вельмі хочам дапамагчы вам пазбегнуць гэтых негатыўных наступстваў, і таму, падрыхтавалі для вас некаторыя з лепшых спосабаў, якімі вы можаце значна павялічыць хуткасць працы вашага сервера WordPress.

1. Перадавайце карыстальнікам статычныя матэрыялы з cookie незалежнага дамена

Каля 80 да 90% часу, карыстальнікі марнуюць на загрузку статычнага кантэнту з вашага блога WordPress. Гэта азначае, што значна больш часу траціцца на загрузку старонкі чым на яе прагляд і чытанне, карыстальнікі чакаюць загрузкі такіх элементаў web як: малюнка, табліцы стыляў, скрыпты, Flash, і г.д. Вы можаце аптымізаваць гэты кантэнт, зрабіць так, каб ён хутчэй загружаўся, для гэтага вы можаце выкарыстоўваць бясплатны поддомен які ня адпраўляе cookie а толькі раздае статычныя файлы WordPress для паскарэння загрузкі змесціва сайта. Гэтыя дзеянні дапамагаюць скараціць некалькі мікра-секунд часу загрузкі, што можа здацца не так шмат, але калі на сайце шмат кантэнту і карыстальнікаў гэта дае рэальна адчувальны.
Да таго ж, гэта вельмі проста рэалізаваць у WordPress, проста дадайце два радкі ў код файла WP-config.php:

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

Пасля таго як вы гэта зрабілі загрузіце свой статычны кантэнт на поддомен. Усё гатова! пераходзім да другога спосабу.

2. Задайце час кэшавання для статычных матэрыялаў

Статычныя файлы як правіла рэдка абнаўляюцца, такім чынам няма неабходнасці ў тым каб кожны раз пры заходзе карыстальніка на ваш сайт аддаваць статычны кантэнт, лепш кэшаваць яго на баку карыстальніка, у гэтым выпадку хуткасць прагляду старонак сайта павялічваецца ў разы. Мінусам дадзенага спосабу з'яўляецца той факт, што калі карыстальнік ўпершыню прыйшоў на ваш сайт і статычныя файлы важаць досыць шмат, яму спатрэбіцца шмат часу каб загрузіць яго, для вырашэння гэтай праблемы часцей за ўсё выкарыстоўваецца метад адкладзенай загрузкі.
Такім чынам, каб усталяваць час кэшавання для статычнага змесціва адкрыйце для рэдагавання файл .Htaccess вашага сайта. Дадайце код прыведзены ніжэй, які задае час захоўвання статычных файлаў у кэшы браўзэра на баку кліента (наведвальніка сайта). Па заканчэнні тэрміну захоўвання кэша, ён будзе аўтаматычна выдалены на кампутары карыстача. Глядзім код:

<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 (can not 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>

Як відаць з кода, частка файлаў, некаторыя іх тыпы, мы кэшируем на 1 тыдзень access plus 1 week, іншыя на адзін месяц access plus 1 month, іншыя на 1 год access plus 1 year. Там, дзе нам не трэба кэшаванне, звычайны тэкст або блок часта абнаўляецца матэрыялу, напрыклад прагноз надвор'я па гадзінах, мы ўсталёўваем кэш 0 секунд access plus 0 seconds.

3. Аптымізацыя базы дадзеных сайта на WordPress

Яшчэ адзін выдатны спосаб, каб паскорыць працу вашага сервера і прымусіць сайт на WordPress працаваць з большай эфектыўнасцю гэта аптымізацыя базы дадзеных. Як можна гэта зрабіць проста і хутка без асаблівых навыкаў праграмавання? У WordPress гэта робіцца неверагодна лёгка, дзякуючы шэрагу бясплатных убудоў. Адзін з лепшых на нашу думку гэта WP-Optimize, убудова просты ва ўсталёўцы і наладзе, а галоўнае выконвае сваю працу якасна і хутка без памылак.

WP-Optimize

Як дадатковы спосаб, вы пожете выкарыстоўваць для аптымізацыі базы дадзеных сайта на вордпресс c-panel панэль кіравання хостынгу, або phpmyadmin. У панэлі кіравання phpmyadmin вылучыце базу дадзеных вашага сайта адзначце птушачкамі табліцы якія трэба аптымізаваць і абярыце опцыю «аптымізаваць табліцу», гэта простае рашэнне дазваляе выдаліць усе невыкарыстоўваныя файлы і аптымізаваць змесціва табліц базы дадзеных.

4. Выкарыстоўвайце спецыяльныя убудовы для кэшавання медыя файлаў

Існуе мноства розных убудоў для кэшавання сайтаў на вордпресс, але лепшымі сярод іх з'яўляюцца на нашу думку: WP Super Cache, Hyper Cache і W3 Total Cache. Кэшаванне дазваляе эканоміць працэсарны час хостынгу, памяншае колькасць зваротаў да базы дадзеных і шэраг іншых важных пераваг. Механізм кэша, па сутнасці, ператварае запыты на генерацыю рухавічком старонак у статычныя старонкі, якія загружаюцца лёгка, эканомячы час карыстача, пазбаўляючы ад чакання генерацыі старонкі сайта на баку хостынгу. Калі карыстальнік ці вы самі адкрываеце старонку ў браўзэры убудова генеруе HTML файл і захоўвае яго на хостынгу, пры паўторным звароце, убудова аддае карыстачу статычную старонку, эканомячы час хостынгу на генерацыю старонкі. Мы таксама рэкамендуем выкарыстоўваць DB Cache для кэшавання зваротаў да базы дадзеных.

5. Выкарыстоўвайце CDN

Каб зэканоміць час загрузкі сайта можна выкарыстоўваць сетку сайтаў CDN якія дазваляюць размяшчаць бясплатна або за невялікую плату ваш статычны кантэнт. Пры запыце старонкі вашага сайта ўсё статычныя файлы аддаюцца карыстачу з высакахуткасных сервераў, а так як на 1 Серевер браўзэр можа стварыць толькі 2 падключэнне, то, калі колькасць сервераў будзе 2 то файлы вашага сайта будуць загружацца 4 патокамі, гэта значыць у 2 разы хутчэй. Выкарыстанне CDN на сайце WordPress можна параўнаць з хмарнымі тэхналогіямі, за выключэннем таго, што на іншых серверах размяшчаецца толькі статычныя файлы, а не ўвесь сайт,
Ёсць некалькі ўбудоў ў вольным доступе, якія дазваляюць хутка наладзіць сайт вордпресс для працы з CDN.
Альтэрнатыўныя варыянты сервераў CDN: Amazon S3, Max CDN, Media Temple CDN, і Free CDN.

6. Сціск і аб'яднанне ўсіх JS і CSS файлаў стыляў на сайце WordPress

Сціск ўсіх JS і CSS файлаў вельмі карыснае дзеянне, так як гэта памяншае агульны памер загружанай старонкі, што таксама спрыяе зніжэнню часу загрузкі для карыстальніка. Аднак, калі вы хочаце, дамагчыся большага эфекту ад аптымізацыі мы настойліва раім аб'яднаць файлы JS і CSS на колькі гэта магчыма. Лета ў тым, што некаторыя js фалы могуць канфліктаваць паміж сабой пры аб'яднанні ў адзін з за аднолькавых імёнаў класаў, тое ж можа быць і з файлам стыляў, у ідэале, якія аб'ядноўваюцца файлы павінны спачатку прайсці візуальную і праграмную праверку на наяўнасць падобных імёнаў аператараў у адным з рэдактараў кода, напрыклад NetBeans IDE.
Аб'яднанне некалькіх файлаў у адзін можа значна паменшыць колькасць запытаў да вэб-серверу, што знізіць час загрузкі сайта.
Кампрэсары JS: Closure Compiler і Minify JavaScript.
Кампрэсары CSS: альтэрнатывы CSS з'яўляюцца Minify CSS і CSS Compressor.
Акрамя таго, вы таксама можаце выкарыстоўваць убудова WP Minify, які можа аб'ядноўваць JS і CSS файлы, кіраваць гэтым працэсам можна прама з WordPress. Але, раім выкарыстоўваць убудова адразу, а спачатку пратэставаць на лакальным серверы або копіі сайта.
Выкарыстоўвайце CSS Sprite, каб паменшыць колькасць запытаў да сервера. калі вы маеце шмат вольнага часу і адчуваеце ў сабе асаблівую цікавасць.

7. Сціск графічных файлаў, аптымізацыя фотаздымкаў на сайце WordPress

Сціск малюнкаў на сайце WordPress можна выканаць некалькімі спосабамі. Першы з іх знаходзіцца за межамі сайта, і заключаецца ў тым каб першапачаткова стварыць у праграме рэдактары аптымізаваным малюнак. Для гэтага падыдзе Adobe Photoshop, Adobe Fireworks і некаторыя іншыя.
Але што рабіць калі файл выява ўжо загружаны, або ён не аптымізаваны перад загрузкай на сервер? Другі спосаб, гэта ўстаноўка спецыяльнага плагіна WP Smush IT які дазваляе аптымізаваць як ужо загружаныя фотаздымкаў на сайт так і зноў загружаныя фатаграфіі.
Зніжэнне памеру фота на сайце вордпресс дазваляе аптымізаваць хуткасць загрузкі сайта за кошт зніжэння вагі старонкі, а таксама робіць яго больш даступнымі больш шырокай аўдыторыі карыстальнікаў інтэрнэт, так як малюнак меншага памеру загружаецца адносна хутчэй вялікага файла фота.

8. Сціск статычнага змесціва WordPress ў GZIP

Яшчэ адзін савет па павелічэнні хуткасці загрузкі сайта на WordPress, гэта сціск і перадача змесціва сайта ў gzip. Практычна ўсе сучасныя браўзэры падтрымліваюць gzip метад перадачы і распакавання, гэта калі хочаце, той жа самы архіў. Перад адпраўленнем файлаў сайта кліенту ўсе яны пакуюцца ў gzip архіў а затым у сціснутым выглядзе перадаюцца кліенту, дзе браўзэр разархівуе атрыманы файл і затым адлюстроўвае старонку вэб сайта ў звыклым для нас выглядзе.
У gzip можна спакаваць такія тыпы файлаў: CSS, JS, і файлы малюнкаў,
На шчасце, для сайтаў на WordPress ёсць неверагодна просты спосаб уключыць gzip, для гэтага адкрыйце на рэдагаванне файл 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 = Co ntent-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 ima ge / svg + xml application / vnd.ms-fontobject application / x-font-ttf font / opentype </ IfModule> </ IfModule>

Для таго каб прыведзены вышэй код працаваў ваш хостынг павінен падтрымліваць або дазволіць выкарыстоўваць mod_deflate.c. Звычайна, на хостынгу гэты параметр абмежаваны з за таго што gzip сціск выконваецца на баку сервера сайта што прыводзіць да павелічэння нагрузкі на апошні. Глядзіце таксама артыкул аптымізацыя сайта на wordpress пры дапамозе htaccess .

9. Адключэнне ETags ў WordPress

Адключэнне ETags гэта выдатны спосаб кэшавання кантэнту ў WordPress. Пры дапамозе адключэння ETags можна скараціць памер загалоўкаў HTTP. Тым не менш, перад выкарыстаннем гэтай опцыі падрабязней азнаёмцеся з дакументацыяй, таму як калі вы напрыклад актыўна карыстаецеся адказ Last-Modified ў загалоўках адказу сервера, то такі адказ стане недаступны. Код трэба дадаць у файл Htaccess:

File ETag none

Гэта ўсё метады аптымізацыі хуткасці загрузкі сайта на вордпресс, пра якія мы хацелі распавесці сёння, удалага кодинга!