Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
< >
1 2 3 4 5

Як паскорыць сайт на WordPress - парады па аптымізацыі хуткасці сайта

  1. Інструменты для вымярэння хуткасці сайта
  2. Важнасць хуткасці працы сайта у 2018 годзе
  3. Тэхнікі паскарэння WordPress, актуальныя у 2018 годзе
  4. 1.Выбор якаснай тэмы / фреймворка
  5. 2. Настройка кэшавання WordPress
  6. Убудовы кэшавання WordPress
  7. Кэшаванне ў браўзэры - ўключаем Expire Headers ў WordPress
  8. Кэшаванне WordPress на сэрвэры
  9. Предзагрузка (prefetch) папулярных даменаў
  10. Папярэдняя загрузка шрыфтоў Google
  11. Папярэдняя загрузка Google Code (jQuery)
  12. Папярэдняя загрузка Google Analytics
  13. Remove Query Strings - Выдаляны радок запыту са статычных рэсурсаў
  14. 3. Падключэнне CDN (Content Delivery Network)
  15. Загружайце праз CDN усё, што можна
  16. 4. Аптымізацыя базы дадзеных WordPress
  17. Адключэнне і ліміт рэвізій пастоў WordPress
  18. Адключэнне рэдакцый пастоў WordPress
  19. Абмежаванне колькасці рэдакцый запісаў у WordPress
  20. Выдаленне старых рэдакцый запісаў з базы дадзеных WordPress
  21. Сачыце за абмежаваннем на 100 старонак у WordPress
  22. 5. Аптымізацыя малюнкаў з дапамогай сціску
  23. 6. Сціск Gzip / Brotli
  24. Apache
  25. Nginx
  26. 7. Памяншэнне колькасці убудоў WordPress
  27. 8. Аптымізацыя прадукцыйнасці вэб-шрыфтоў
  28. 9. Аптымізацыя абразкоў Font Awesome
  29. 10. Lazy Load для малюнкаў, відэа і Disqus
  30. Адкладзеная загрузка малюнкаў
  31. Адкладзеная загрузка відэа
  32. Адкладзеная загрузка Disqus
  33. 11. Минификация і аб'яднанне CSS і Javascript файлаў
  34. Минификация
  35. Аб'яднанне (канкатэнацыя)
  36. 12. Памяншэнне колькасці HTTP запытаў
  37. Граватары
  38. Варыянт 1 - адключыць граватары
  39. Варыянт 2 - выкарыстоўваць Disqus
  40. адключэнне Emoji
  41. Варыянт 1 - WordPress убудова
  42. Варыянт 2 - функцыя WordPress
  43. Адключэнне скрыптоў на старонцы
  44. адключаем Embeds
  45. Варыянт 1 - WordPress убудова
  46. Варыянт 2 - функцыя WordPress
  47. адключаем каментары
  48. 13. Адключэнне хотлинков
  49. 14. Адключэнне Pingback і Trackback
  50. 15. Заданне памераў малюнкаў
  51. 16. Рашэнне праблемы павольнай загрузкі admin-ajax.php
  52. 17. Налада MySQL сервера
  53. 18. Выбар якаснага хостынгу для WordPress

WordPress - выдатная CMS для сайта, але яна даволі павольная з скрынкі, калі яе не аптымізаваць правільна. У гэтым кіраўніцтве, складзеным KeyCDN, мы разгледзім асноўныя спосабы аптымізацыі і паскарэння сайта на WordPress.

WordPress таксама адна з самых папулярных CMS для сайтаў кампаній. Больш за палову сайтаў, на якіх можна вызначыць сістэму кіравання кантэнтам, працуюць на WordPress. А гэта больш чым 74 мільёны сайтаў.

А гэта больш чым 74 мільёны сайтаў

Інструменты для вымярэння хуткасці сайта

Адзін з самых важных інструментаў пры працы над аптымізацыяй хуткасці сайта - тэсціроўшчыкі хуткасці загрузкі (page speed tool). Мы рэкамендуем праводзіць вымярэння перад пачаткам работ па аптымізацыі, і ў працэсе, пасля кожнага занесенага змены. Гэта дасць лепшае разуменне, змянення якіх параметраў аказваюць станоўчае ці адмоўнае ўплыў на прадукцыйнасць.

Ёсць шмат інструментаў для праверкі хуткасці загрузкі сайта, сярод якіх KeyCDN, які прапануе тэсты з 16 кропак па ўсім свеце.

Важнасць хуткасці працы сайта у 2018 годзе

У цяперашні час хуткасць сайта ўплывае не толькі на пазіцыі ў пошукавай выдачы, але таксама забяспечвае лепшы карыстацкі досвед і павышае канверсію. Яшчэ ў 2010 годзе Гугл паведаміў, што хуткасць загрузкі сайта ўплывае на пазіцыю сайта ў выніках пошуку. У 2018 годзе хуткасць мабільнай версіі сайта таксама ўплывае на ранжыраванне.

Такім чынам, калі вы хочаце павялічыць арганічны трафік на сайт з дэсктопнай і мабільнай версіі, вы павінны надаць увагу правільнай аптымізацыі сайта на WordPress.

Акрамя таго, у выпадку, калі ў вас інтэрнэт-краму, больш высокая хуткасць працы сайта можа павялічыць канверсію і прынесці дадатковы прыбытак. Паглядзім на прыкладзе.

сэрвіс Google Impact calculator дазваляе ацаніць прыкладны ўзровень росту гадавога абароту ў залежнасці ад хуткасці загрузкі сайта.

Напрыклад, калі вы паскорыце загрузку сайта з 2,2 секунд да 1,4 секунд, пры трафіку 200 000 уников у месяц, сярэднім чэку $ 50 і канверсіі 3%, вы можаце атрымаць дадаткова $ 146 000 гадавога даходу.

Тэхнікі паскарэння WordPress, актуальныя у 2018 годзе

Разгледзім найбольш эфектыўныя рэкамендацыі па аптымізацыі хуткасці сайта на WordPress, якія дапамогуць паменшыць час загрузкі старонкі.

  1. Выбар тэмы або фреймворка
  2. Настройка кэшавання WordPress
  3. падключэнне CDN
  4. Аптымізацыя базы дадзеных WordPress
  5. Аптымізацыя малюнкаў з дапамогай сціску
  6. Сціск файлаў Gzip
  7. Памяншэнне колькасці убудоў WordPress
  8. Аптымізацыя прадукцыйнасці вэб-шрыфтоў
  9. Аптымізацыя абразкоў Font Awesome
  10. Lazy Load для малюнкаў, відэа і Disqus
  11. Минификация і аб'яднанне CSS і Javascript файлаў
  12. Памяншэнне колькасці HTTP запытаў
  13. адключэнне хотлинков
  14. Адключэнне Pingback і Trackback
  15. Заданне памераў малюнкаў
  16. Рашэнне праблемы павольнай загрузкі admin-ajax.php
  17. Настройка MySQL сервера
  18. Выбар якаснага хостынгу для WordPress

1.Выбор якаснай тэмы / фреймворка

Кожны сайт на WordPress зроблены на аснове якой-то тэмы або фреймворка-пейджбилдера. Яны звычайна ўтрымліваюць шмат лішняга залішняга функцыяналу. У распрацоўнікаў тым розныя падыходы да стварэння сваіх прадуктаў, і таму тэмы для WordPress значна адрозніваюцца адзін ад аднаго. Напрыклад, дэфолтныя тэмы WordPress тыпу Twenty Seventeen звычайна зроблены даволі якасна і працуюць хутка.

Трэба вельмі старанна выбіраць тэмы для пакупкі на маркетплейсах тыпу ThemeForest або Creative Market. Большасць тым там зроблена даволі няякасна, таму што распрацоўшчыкі гоняцца за універсальнасцю і піхаюць у тэму усё запар. Гэта дае ім больш продажаў, але тэмы ў выніку выходзяць цяжкімі і павольнымі. Затое з прыгожым інтэрфейсам афарбоўкі кнопак з адмінку. На такіх пляцоўках важней знайсці адэкватных распрацоўшчыкаў, і карыстацца іх тэмамі. напрыклад, Total WordPress theme ад хлопчыкаў і дзяўчынак з WPExplorer нядрэнная тэма. Маючы даволі багаты функцыянал, сайт на ёй, напоўнены кантэнтам, загружаецца ў межах 800 мс.

Фреймворка Thesis Theme framework і Genesis таксама маюць добрую рэпутацыю, дзякуючы сваёй хуткасці і якасці кода.

2. Настройка кэшавання WordPress

Кэшаванне - яшчэ адзін магутны інструмент у барацьбе за хуткасць загрузкі старонак сайта на WordPress. Кэшаванне дазваляе захоўваць старонкі і запісы як статычныя файлы, якія хутка аддаюцца карыстачу, не ствараючы нагрузку на сервер і не марнуючы час на дынамічнае фарміраванне старонак.

Кэшаванне на WordPress арганізуецца з дапамогай убудоў, якія ствараюць кэш старонак на сэрвэры і ў браўзэры кліента.

Убудовы кэшавання WordPress

Для кэшавання сайта на WordPress часцей за ўсё выкарыстоўваюцца наступныя убудовы:

  • Cache Enabler
  • W3 Total Cache
  • WP Super Cache
  • WP Rocket

Кэшаванне ў браўзэры - ўключаем Expire Headers ў WordPress

Узмацніць эфект браузерного кэшавання рэсурсаў можна з дапамогай тэхналогіі leverage browser caching , Дадаўшы загалоўкі expire. Яны кажуць браўзэру, загружаць канкрэтныя файлы з сервера або ўзяць іх з кэша браўзэра. Гэта дазволіць паменшыць колькасць запытаў да сервера. Некаторыя Кэшуйце убудовы WordPress дазваляюць ўключыць expire headers у наладах, але гэтую функцыю таксама можна актываваць, дадаўшы наступны код у файл .htaccess.

<IfModule mod_expires.c> # Enable expirations ExpiresActive On # Default directive ExpiresDefault "access plus 1 month" # My favicon ExpiresByType image / x-icon "access plus 1 year" # Images 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" # CSS ExpiresByType text / css "access plus 1 month" # Javascript ExpiresByType application / javascript "access plus 1 year "</ IfModule>

Кэшаванне WordPress на сэрвэры

Акрамя таго, што можна ўключыць кэшаванне сайта на WordPress ў браўзэры, не лішнім будзе наладзіць сервернае кэшаванне на хостынгу. Гэта звычайна робіцца на высоконагруженных сайтах. Эфектыўным інструментам кэшавання на сэрвэры з'яўляецца Varnish, асабліва ў камбінацыі з Кэшуйце убудовай і падключэннем CDN.

Предзагрузка (prefetch) папулярных даменаў

Папярэдняя загрузка шмат у чым падобная на кэшаванне, у тым плане, што мы гаворым браўзэру праверыць налады DNS патрэбных даменаў яшчэ да таго, як яны будуць запытаны. Браўзэр скануе старонку і запытвае зададзеныя адрасы, якія яшчэ не закэшированы, і ў патрэбны момант яны загрузяцца хутчэй.

Актываваць прездагрузку (prefetch) у WordPress можна шляхам дадання наступнага кода ў файл header.php паміж тэгамі <head> і </ head>. Гэта неблокирующий загрузку старонкі працэс, і ён выконваецца, калі ёсць магчымасць. Прывядзём некаторыя прыклады:

Папярэдняя загрузка шрыфтоў Google

<Link rel = "dns-prefetch" href = "// fonts.googleapis.com">

Папярэдняя загрузка Google Code (jQuery)

<Link rel = "dns-prefetch" href = "// ajax.googleapis.com">

Папярэдняя загрузка Google Analytics

<Link rel = "dns-prefetch" href = "// www.google-analytics.com">

Remove Query Strings - Выдаляны радок запыту са статычных рэсурсаў

Гэтая налада можа даць станоўчы эфект, так як заканчэння файлаў тыпу? Ver = 4.7 могуць прывесці да праблем з кэшаваннем статыкі, асабліва пры выкарыстанні проксі і CDN. Выдаліць Query Strings ў WordPress можна некалькімі спосабамі.

  • Унесці наступныя змены ў файл functions.php - уставіць функцыю, якая выдаліць query strings.

function _remove_script_version ($ src) {$ parts = explode ( '? ver', $ src); return $ parts [0]; } Add_filter ( 'script_loader_src', '_remove_script_version', 15, 1); add_filter ( 'style_loader_src', '_remove_script_version', 15, 1);

  • Калі вы выкарыстоўваеце Кэшуйце убудова тыпу W3 Total Cache, для выдалення query strings ў ім можа быць адпаведная налада.
  • Існуюць спецыяльныя убудовы для WordPress, асноўная функцыя якіх заключаецца ў выдаленні query strings, такія як Query Strings Remover і Remove Query Strings From Static Resources.

3. Падключэнне CDN (Content Delivery Network)

Выкарыстанне CDN можа прынесці карысць любому сайту, незалежна ад яго памеру і колькасці наведвальнікаў. Content Delivery Network загружае статычныя файлы вашага сайта (CSS, Javascript, малюнкі) з бліжэйшага да карыстача сервера, зніжаючы час загрузкі сайта. Акрамя хуткасці, выкарыстанне CDN станоўчым чынам ўплывае на карыстацкі досвед наведвальнікаў сайта, зніжае паказчык адмоваў, павялічвае час, праведзены на сайце, канверсію і нават SEO.

Для выкарыстання CDN на WordPress існуюць спецыяльныя убудовы, як правіла, правайдэр CDN распрацоўвае убудова пад сваю сетку, напрыклад, KeyCDN або Селектел.

Загружайце праз CDN усё, што можна

Пераканайцеся, што вы грузіце з CDN максімальна магчымая колькасць файлаў, нават самыя дробныя, тыпу фавиконки.

<Link rel = "shortcut icon" href = "https://cdn.domain.com/favicon.ico" type = "image / x-icon" />

На прыкладзе ніжэй можна бачыць, як 100% статыкі грузяцца з CDN

На прыкладзе ніжэй можна бачыць, як 100% статыкі грузяцца з CDN

Граватары таксама можна грузіць з CDN.

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

Калі не аптымізаваць базу дадзеных, WordPress можа пачаць працаваць больш павольна. Сярод спосабаў аптымізацыі БД WordPress выдаленне і абмежаванне або адключэнне рэдакцый запісаў, выдаленне старых рэвізій, і захаванне абмежаванні на 100 старонак у WordPress.

Адключэнне і ліміт рэвізій пастоў WordPress

WordPress стварае Боьше колькасць рэдакцый пастоў падчас іх напісання. Калі за гэтым не сачыць, база дадзеных заб'ецца тысячамі рэдакцый запісаў, што адмоўна адаб'ецца на хуткасці яе працы.

Для вырашэння гэтай праблемы можна абмежаваць колькасць захоўваюцца рэвізій ці ўвогуле адключыць іх.

Адключэнне рэдакцый пастоў WordPress

Для таго, каб адключыць стварэнне рэдакцый запісаў у WordPress, дастаткова дадаць наступны код у файл wp-config.php. Ён зменіць інтэрвал аўтазахавання запісаў з 60 секунд да 5 хвілін і адключыць стварэнне рэвізій. Па змаўчанні застанецца толькі адна папярэдняя рэдакцыя запісу.

define ( 'AUTOSAVE_INTERVAL', 300); // seconds define ( 'WP_POST_REVISIONS', false);

Калі вы не хочаце калупацца ў кодзе, можна зрабіць тое ж самае з дапамогай бясплатнай убудовы Disable Post Revision.

Абмежаванне колькасці рэдакцый запісаў у WordPress

Для таго, каб абмежаваць колькасць рэдакцый запісаў у WordPress, дастаткова дадаць наступны код у файл wp-config.php. Ён зменіць інтэрвал аўтазахавання запісаў з 60 секунд да 5 хвілін і ўсталюе колькасць захоўваюцца рэдакцый да трох. Можна задаць колькасць рэвізій любым лікам.

define ( 'AUTOSAVE_INTERVAL', 300); // seconds define ( 'WP_POST_REVISIONS', 3);

Выдаленне старых рэдакцый запісаў з базы дадзеных WordPress

Пасля адключэння ці абмежавання колькасці рэдакцый трэба пачысціць базу дадзеных ад старых захаваных рэвізій. Для гэтай мэты можна часова ўсталяваць убудову WP-Optimize .

Для гэтай мэты можна часова ўсталяваць убудову   WP-Optimize

Гэты убудова дазволіць выдаліць усе непатрэбныя рэдакцыі запісаў, запісаны аўтаматычна чарнавікоў, спам, неўхвалення каментары, часовыя налады і іншае смецце. У новай версіі плагіна ён дазваляе ўключыць автоочистку па зададзеным раскладзе.

Сачыце за абмежаваннем на 100 старонак у WordPress

Пры планаванні структуры сайта варта памятаць пра тое, што WordPress не быў прызначаны для працы з вялікай колькасцю старонак, больш 100. Пры наяўнасці вялікай колькасці старонак на сайце ў адмінку пачнуцца тормазы з-за недахопу памяці. Зрэшты, на фронтенде гэта ніяк не адаб'ецца. Любое пра гэтае абмежаваньне ёсць у дакументацыі WordPress.

Старонкі маюць іерархію. І любыя дзеянні са старонкамі патрабуюць загружаць цэлае дрэва шаблонаў на бэкэндам, каб вызначыць ўзаемасувязь старонак адзін з адным. Калі ж выклікаецца запіс, яна ніяк не звязаная з іншымі запісамі, акрамя даты, і для яе апрацоўкі не патрабуецца загружаць вялікая колькасць дадзеных. Варта памятаць, што WordPress планаваўся як платформа для блогаў, а не для шматстаронкавых сайтаў.

Рашэннем гэтай праблемы можа быць выкарыстанне кастомных тыпаў пастоў. Для гэтай задачы можна выкарыстоўваць бясплатны убудова Post Type Switcher , Калі трэба вялікая колькасць старонак канвертаваць у карыстацкія тыпы запісаў.

5. Аптымізацыя малюнкаў з дапамогай сціску

На сучасных сайтах у сярэднім 56% вагі старонак складаюць малюнка. Такім чынам, аптымізацыя выявы і іх сціск павінны быць прыярытэтнай задачай пры паскарэнні сайта на WordPress.

У залежнасці ад канкрэтнага файла, малюнак можна сціснуць да 70% ад першапачатковага памеру. Сціскаць выявы можна на этапе падрыхтоўкі іх да публікацыі ў графічным рэдактары, альбо ўжо на сайце з дапамогай адмысловых убудоў сціску выявы для WordPress.

6. Сціск Gzip / Brotli

Gzip гэта яшчэ адна тэхналогія сціску, якая выкарыстоўваецца для сціску старонак, стыляў і скрыптоў на ўзроўні сервера перад адпраўкай браўзэру. Праверыць, ці працуе сціск Gzip на сайце WordPress можна з дапамогай сэрвісу Check GZIP Compression .

Apache

Наладзіць сціск на серверы Apache можна, дадаўшы наступны код у файл .htaccess

<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application / javascript AddOutputFilterByType DEFLATE application / rss + xml AddOutputFilterByType DEFLATE application / vnd.ms-fontobject AddOutputFilterByType DEFLATE application / x-font AddOutputFilterByType DEFLATE application / x-font-opentype AddOutputFilterByType DEFLATE application / x-font-otf AddOutputFilterByType DEFLATE application / x-font-truetype AddOutputFilterByType DEFLATE application / x-font-ttf AddOutputFilterByType DEFLATE application / x-javascript AddOutputFilterByType DEFLATE application / xhtml + xml AddOutputFilterByType DEFLATE application / xml AddOutputFilterByType DEFLATE font / opentype AddOutputFilterByType DEFLATE font / otf AddOutputFilterByType DEFLATE font / ttf AddOutputFilterByType DEFLATE image / svg + xml AddOutputFilterByType DEFLATE image / x-icon AddOutputFilterByType DEFLATE text / css AddOutputFilterByType DEFLATE text / html AddOutputFilterByType DEFLATE text / javascript AddOutputFilterByType DEFLATE text / plain AddOutputFilterByType DEFLATE text / xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^ Mozilla / 4 gzip-only-text / html BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip BrowserMatch \ bMSIE! no-gzip! gzip-only-text / html Header append Vary User-Agent </ IfModule>

Nginx

Калі вы карыстаецеся вэб-сервер Nginx, сціск актывуецца шляхам уключэння наступных інструкцый у файл налад nginx.conf.

gzip on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text / plain text / html text / css application / x-javascript text / xml application / xml application / xml + rss text / javascript; gzip_disable "MSIE [1-6]. (?!. * SV1)"; gzip_vary on;

Акрамя гэтага, можна таксама ўкараніць тэхналогію сціску Brotli на WordPress. Brotli гэта новы алгарытм сціску, распрацаваны Google. Brotli паказвае значную перавагу перад Gzip пры сціску файлаў.

Brotli паказвае значную перавагу перад Gzip пры сціску файлаў

7. Памяншэнне колькасці убудоў WordPress

Распаўсюджанай прычынай тармазоў WordPress з'яўляецца вялікая колькасць ўсталяваных убудоў, якія нагружаюць сервер. Для падтрымання аптымальнай прадукцыйнасці сайта на WordPress варта абмежавацца мінімальна магчымым колькасцю убудоў.

Ёсць убудовы, якія дазваляюць ацаніць ступень уплыву ўсталяваных убудоў на хуткасць працы сайта, але яны састарэлі і не падтрымліваюцца распрацоўшчыкамі. Гэта убудовы P3 Plugin Performance Profiler і WP Performance Profiler

Пры ўсталёўцы новых убудоў на сайт з WordPress варта звярнуць увагу на дату апошняга абнаўлення плагіна і на сумяшчальнасць з бягучай версіяй WordPress. Калі убудова даўно не абнаўляўся, вы ўбачыце наступнае папярэджанне:

Калі убудова даўно не абнаўляўся, вы ўбачыце наступнае папярэджанне:

Рэкамендуецца ўстрымацца ад выкарыстання падобных убудоў на сайце, паколькі яны больш не падтрымліваюцца і могуць прывесці да праблем з прадукцыйнасцю і бяспекай. Акрамя таго, калі ёсць магчымасць рэалізаваць неабходны функцыянал без выкарыстання ўбудовы, з дапамогай рэдагавання кода, гэта варта зрабіць.

Якасць убудоў таксама можа значным чынам паўплываць на прадукцыйнасць сайта на WordPress. Не ўсе ўбудовы пішуцца прафесійнымі распрацоўшчыкамі, і варта параўнаць некалькі ўбудоў, якія вырашаюць аднолькавую задачу, з мэтай выбраць самы хуткі і аптымізаваны з іх.

8. Аптымізацыя прадукцыйнасці вэб-шрыфтоў

Па дадзеных даследаванняў, у 2018 годзе 57% сайтаў выкарыстоўваюць не стандартныя шрыфты, гэта рост на 850% у параўнанні з 2011 годам. Вельмі важна выкарыстоўваць толькі тыя шрыфты, якія патрэбныя, у фарматах WOFF і WOFF2. Сэрвісы тыпу Typekit base64 пераўтвораць шрыфты ва ўсе магчымыя фарматы, запавольваючы тым самым хуткасць загрузкі сайта.

Па выніках тэстаў, шрыфты Google паказваюць добры ўзровень прадукцыйнасці, таму што выкарыстоўваюць CDN для загрузкі і прадастаўляюцца толькі ў фарматах WOFF. Open Sans - самы хуткі з 10 папулярных шрыфтоў.

Важна таксама памятаць пра розніцу паміж шрыфтамі Google і бяспечнымі вэб шрыфтамі, яна можа дасягаць 200 мс. Гэта пераважна з-за хуткасці загрузкі і дадатковых HTTP запытаў да сервераў Google.

Гэта пераважна з-за хуткасці загрузкі і дадатковых HTTP запытаў да сервераў Google

Яшчэ адной магчымасцю аптымізацыі можа быць перасоўванне шрыфтоў Google на вашу CDN. У параўнальных тэстах загрузка шрыфтоў з сваёй CDN адбываецца хутчэй, чым з Google, таму што вырабляецца менш HTTP запытаў, пошукаў DNS, і дае большы кантроль над кэшаваннем.

Можна пайсці яшчэ далей і змясціць усе шрыфты ў асобны css файл і захоўваць іх у localStorage. Браузерный кэш скідаецца даволі часта, асабліва на мабільных прыладах. А захоўваючы файлы ў localStorage, можна захоўваць іх у карыстальніка пастаянна. Smashing Magazine зэканомілі 700 мс пры загрузцы старонкі з дапамогай localStorage .

Рэкамендуем выкарыстоўваць сэрвіс localFont tool ад Jaime Caballero. Можна перацягнуць свой шрыфт у акно і канвертаваць яго ў CSS і Javascript для размяшчэння на сайце WordPress.

Можна перацягнуць свой шрыфт у акно і канвертаваць яго ў CSS і Javascript для размяшчэння на сайце WordPress

9. Аптымізацыя абразкоў Font Awesome

Калі вы выкарыстоўваеце Font Awesome, можна паскорыць іх загрузку, змясціўшы файлы на CDN. Калі вы выкарыстоўваеце тэму WordPress з Font Awesome, яе прыйдзецца трохі дапрацаваць.

Захоўванне Font Awesome на сваёй CDN паменшыць колькасць запытаў да сервера і пошукаў DNS.

10. Lazy Load для малюнкаў, відэа і Disqus

Lazy loading - гэта тэхналогія загрузкі аб'екта толькі ў той момант, калі ён патрэбны. У выпадку WordPress гэта азначае, што элемент не загружаецца да таго часу, пакуль карыстач не Пракруціць старонку да яго. Lazy load можна ўжыць для любых элементаў старонкі, ад малюнкаў і відэа, да блока каментарыяў Disqus.

Адкладзеная загрузка малюнкаў

Для адкладзенай загрузкі малюнкаў на сайце WordPress можна выкарыстоўваць добры бясплатны убудова BJ Lazy Load . Ён замяняе ўсе выявы, цэтлікі і фрэймы на старонцы плейсхолдерами і загружае кантэнт па меры набліжэння яго да мяжы акна пры прагортцы карыстальнікам. Гэта таксама працуе і для тэкставых віджэтаў. Калі вы карыстаецеся убудовай WP Rocket, у ім ёсць налады для ўключэння Lazy Load.

Адкладзеная загрузка відэа

Для адкладзенай загрузкі відэа на WordPress можна выкарыстоўваць бясплатны убудова Lazy Load for Videos . Ён замяняе убудаванае відэа Youtube і Vimeo клікабельнасць выявай прэв'ю. Калі ў вас на сайце шмат відэа, гэты убудова дапаможа значна палепшыць хуткасць загрузкі старонак.

Адкладзеная загрузка Disqus

Disqus - гэта вельмі зручная сістэма каментавання, якая вельмі добра змагаецца са спамам. Але стандартны убудова Disqus стварае больш за 10 HTTP запытаў, якія могуць значна запаволіць загрузку старонкі. Каб вырашыць гэтую праблему, распрацоўшчык James Joel зрабіў убудова Disqus Conditional Load , Які адкладае загрузку Disqus. Ён у тым ліку не шкодзіць SEO, то ёсць пошукавыя сістэмы ўсё роўна могуць індэксаваць каментары.

11. Минификация і аб'яднанне CSS і Javascript файлаў

Минификация і аб'яднанне файлаў стыляў і скрыптоў можа згуляць значную ролю ў паскарэнні сайта на WordPress.

Минификация

Минификация файлаў азначае выдаленне лішніх сімвалаў з файлаў HTML, Javascript, і CSS, такіх як:

  • прабелы
  • перанос па
  • каментары
  • падзельнікі блокаў

Гэтая аптымізацыя памяншае колькасць загружанага кода і станоўча ўплывае на хуткасць сайта.

Аб'яднанне (канкатэнацыя)

Канкатэнацыя гэта працэс аб'яднання некалькіх файлаў стыляў або скрыптоў у адзін, для таго каб мінімізаваць колькасць HTTP злучэнняў. Часам гэта можа даць станоўчы эфект, але часам можа запаволіць загрузку старонкі, з-за таго, што прыходзіцца загружаць вялікія файлы. Эфект ад гэтай функцыі трэба тэставаць ў кожным канкрэтным выпадку.

Для минификации і канкатэнацыі файлаў у WordPress можна выкарыстоўваць убудовы, напрыклад, WP Rocket

Большасць убудоў кэшавання для WordPress мае наладу для ўключэння гэтых функцый, але можна таксама выкарыстоўваць асобныя убудовы, такія як Better WordPress Minify І Autoptimize . Добрай практыкай у WordPress лічыцца размяшчэнне файлаў стыляў уверсе старонкі, а файлаў скрыптоў знізу.

12. Памяншэнне колькасці HTTP запытаў

Памяншэнне колькасці HTTP запытаў, якія робіць сайт на WordPress ў момант загрузкі, вельмі важна для аптымізацыі хуткасці.

Разгледзім некалькі важных спосабаў па памяншэнні колькасці запытаў да сервера.

Граватары

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

Калі ў вас шмат каментароў на старонцы, яна будзе генераваць велізарную колькасць патрэбных і непатрэбных рэдырэкт

Ёсць некалькі спосабаў вырашэння гэтай праблемы.

Варыянт 1 - адключыць граватары

Можна проста адключыць усе граватары карыстальнікаў, і выкарыстоўваць лакальныя аватары. Не ідэальнае рашэнне, але працоўнае.

Для гэтага трэба ўсталяваць бясплатны убудова WP User Avatar . І ў наладах ўключыць опцыю «Адключыць Граватары і выкарыстоўваць толькі лакальныя аватары»

Варыянт 2 - выкарыстоўваць Disqus

Можна выкарыстоўваць каментары Disqus разам з убудовай lazy load Disqus . Здаецца дзіўным, што падключаць дадатковы убудова, скрыпты, рабіць выклік да іншым сэрвісам пераважней выкарыстання роднага функцыяналу. Але калі параўнаць хуткасць на запісы з 5 або больш каментарамі, апынецца, што Disqus хутчэй з-за меншага колькасці HTTP запытаў.

адключэнне Emoji

З выхадам WordPress 4.2 з'явілася падтрымка Emoji. Гэта прывяло да дадання лішняга скрыпту wp-emoji-release.min.js? Ver = 4.3.1 ў хедэры. Гэты скрыпт стварае дадатковы HTTP-запыт, ад которго трэба пазбавіцца, калі вы не збіраецеся выкарыстоўваць Emoji.

Гэты скрыпт стварае дадатковы HTTP-запыт, ад которго трэба пазбавіцца, калі вы не збіраецеся выкарыстоўваць Emoji

У інструкцыі ніжэй пакажам, як адключыць Emoji і пазбавіцца ад лішняга HTTP запыту.

У наладах «Напісанне» адключыце "convert emoticons".

Варыянт 1 - WordPress убудова

Усталюйце бясплатны убудова для WordPress " Disable Emojis "By Ryan Hellyer. Гэты убудова адключае функцыянал emoji ў WordPress 4.2.

Варыянт 2 - функцыя WordPress

Каб не перагружаць сайт лішнімі ўбудовамі, можна пазбавіцца ад emoji шляхам дадання ў functions.php наступнага коду:

/ ** * Disable the emoji's * / function disable_emojis () {remove_action ( 'wp_head', 'print_emoji_detection_script', 7); remove_action ( 'admin_print_scripts', 'print_emoji_detection_script'); remove_action ( 'wp_print_styles', 'print_emoji_styles'); remove_action ( 'admin_print_styles', 'print_emoji_styles'); remove_filter ( 'the_content_feed', 'wp_staticize_emoji'); remove_filter ( 'comment_text_rss', 'wp_staticize_emoji'); remove_filter ( 'wp_mail', 'wp_staticize_emoji_for_email'); add_filter ( 'tiny_mce_plugins', 'disable_emojis_tinymce'); } Add_action ( 'init', 'disable_emojis'); / ** * Filter function used to remove the tinymce emoji plugin. * * @Param array $ plugins * @return array Difference betwen the two arrays * / function disable_emojis_tinymce ($ plugins) {if (is_array ($ plugins)) {return array_diff ($ plugins, array ( 'wpemoji')); } Else {return array (); }}

Адключэнне скрыптоў на старонцы

Звычайна мы стараемся пазбавіцца ад лішніх убудоў, але ёсць адзін убудова Gonzalez , Які дазваляе адключаць невыкарыстоўваныя скрыпты на ўзроўні старонкі або ўсяго сайта. Напрыклад, убудова Contact Form 7 загружае свае скрыпты на ўсіх старонках сайта, а не толькі на той, дзе выкарыстоўваюцца формы. Тое ж самае з ўбудовамі шаринга ў соцсеть. Адключыўшы непатрэбныя на дадзенай старонцы скрыпты, можна пазбавіцца ад некалькіх лішніх HTTP запытаў. Убудова ня бясплатны, але сваіх грошай варта.

Убудова ня бясплатны, але сваіх грошай варта

адключаем Embeds

З версіі 4.4 у WordPress загружаецца новы скрыпт wp-embed.min.js, які дазваляе спрасціць ўстаўку відэа, малюнкаў, твітаў, і да т.п. Напрыклад, WordPress аўтаматычна пераўтворыць URL у YouTube ўстаўку і зробіць прэв'ю ў візуальным рэдактары. Але не ўсім патрэбна падобная функцыя, можна проста скапіяваць гатовы код для ўстаўкі з YouTube або Twitter. Праблема з гэтай функцыяй у тым, што яна загружае свой скрыпт на кожнай старонцы. Ёсць некалькі спосабаў пазбавіцца ад яго.

Варыянт 1 - WordPress убудова

Усталюйце WordPress убудова " Disable Embeds "By Pascal Birchler. Ён робіць наступнае:

  • Прадухіляе іншых ад устаўкі вашага сайта.
  • Не дае вам ўставіць сайты не з дазволенага спісу.
  • Адключае ўсе скрыпты, звязаныя з гэтай функцыяй.

Варыянт 2 - функцыя WordPress

Можна дадаць наступны код у файл functions.php, гэта адключыць функцыю ўстаўкі.

// Remove WP embed script function speed_stop_loading_wp_embed () {if (! Is_admin ()) {wp_deregister_script ( 'wp-embed'); }} Add_action ( 'init', 'speed_stop_loading_wp_embed');

адключаем каментары

Незалежна ад таго, карыстаецеся вы ці не сістэму каментароў WordPress, скрыпт comment-reply.min.js далучаецца на кожнай старонцы сайта. Гэта не заўсёды апраўдана, на сайце могуць быць не патрэбныя каментары наогул ці падлучаны Disqus. Тады можна адключыць гэты непатрэбны скрыпт.

Тады можна адключыць гэты непатрэбны скрыпт

Для гэтага можна дадаць наступны код у файл functions.php.

// Remove comment-reply.min.js from footer function comments_clean_header_hook () {wp_deregister_script ( 'comment-reply'); } Add_action ( 'init', 'comments_clean_header_hook');

13. Адключэнне хотлинков

Хотлинкинг гэта калі хтосьці выкарыстоўвае выявы з вашага сайта, спасылаючыся на іх. Гэта стварае непатрэбную нагрузку на сервер і лішні трафік. Забараніць падобныя рэчы можна, дадаўшы наступны код у файл .htaccess:

RewriteEngine on RewriteCond% {HTTP_REFERER}! ^ $ RewriteCond% {HTTP_REFERER}! ^ Http (s)?: // (www \.)? Yourdomain.com [NC] RewriteRule \. (Jpg | jpeg | png | gif) $ - [NC, F, L]

Пасля гэтага малюнка на чужых сайтах, якія спрабуюць спаслацца на ваш, будуць выглядаць так:

14. Адключэнне Pingback і Trackback

Pingback і trackbacks лічацца састарэлымі зараз, і могуць запаволіць сайт пры загрузцы старонак. Ёсць шмат сучасных інструментаў, якія дазваляюць адсочваць спасылкі на ваш сайт.

Адключыць pingback і trackback можна ў наладах абмеркавання. Гэта змяненне закране толькі новых запісаў.

15. Заданне памераў малюнкаў

Усе бачылі падобныя рэкамендацыі пры праверцы хуткасці сайта Google Pagespeed:

Гэтыя рэкамендацыі ставяцца да малюнкаў на сайце, якія маштабуюцца браўзэрам. Напрыклад, калі малюнак мае шырыню 500 пікселяў, а на старонцы змешчана ў калонку шырынёй 400 пікселяў. У выніку яно будзе паменшана да 400 пікс.

Правільным рашэннем будзе падрыхтоўка малюнкаў патрэбнага памеру ў графічным рэдактары перад загрузкай на сайт. Гэта зэканоміць рэсурсы сервера і будзе адпавядаць рэкамендацый Google Pagespeed. Яшчэ можна загрузіць на сайт выявы ў розных памерах для розных прылад.

16. Рашэнне праблемы павольнай загрузкі admin-ajax.php

У WordPress 3.6 баль прадстаўлены WordPress Heartbeat API , Які дазволіў WordPress мець зносіны з серверам і браўзэрам. Гэта палепшыла кіраванне сесіямі, кантроль рэвізій і запісаны аўтаматычна.

WordPress Heartbeat API выкарыстоўвае admin-ajax.php для AJAX запытаў з браўзэра. Гэта можа прывесці да павышанай нагрузкі на працэсар і вялікай колькасці выклікаў PHP. Напрыклад, калі пакінуць адкрытай старонку з адмінку, яна будзе пасылаць POST запыты да гэтага файлу пастаянна з зададзеным інтэрвалам.

Існуе бясплатны убудова Heartbeat control , Які дазваляе задаць частату зваротаў WordPress heartbeat API.

Варта памятаць, што распрацоўшчыкі іншых убудоў таксама выкарыстоўваюць гэты файл. Калі вы заўважылі затрымкі ў працы сайта, гэта можа быць выклікана убудовай, які запытвае admin-ajax.php. Каб разабрацца, у чым справа, трэба запусціць тэставанне хуткасці загрузкі сайта, знайсці выклік admin-ajax.php і паглядзець інфармацыю аб запыце.

Такім чынам можна вылічыць, якой убудова выконвае запыт. У гэтым прыкладзе гэта быў убудова соцсетей, для якога не было ўключана кэшаванне. Як толькі кэшаванне плагіна актывавалі, пастаянныя звароты да admin-ajax.php спыніліся.

php спыніліся

17. Налада MySQL сервера

Аптымізацыя працы сервера баз дадзеных MySQL таксама вельмі важная для хуткай працы сайта на WordPress. Налады MySQL ў вялікай ступені залежаць ад канфігурацыі сервернага акружэння на вашым хостынгу, таму няма універсальных рэкамендацый па аптымізацыі MySQL. Звычайна налады MySQL / MariaDB знаходзяцца ў файле /etc/my.cnf. Вось некалькі параметраў, на значэнне якіх варта звярнуць увагу:

  • tmp_table_size
  • query_cache_type
  • query_cache_size
  • query_cache_size
  • join_buffer_size
  • max_heap_table_size

Вельмі карысны інструмент - скрыпт MySQL Tuner . Ён робіць агляд прадукцыйнасці сервера і дае некаторыя базавыя рэкамендацыі па магчымай аптымізацыі. Вось яшчэ некалькі інструментаў, якія могуць спатрэбіцца пры наладзе MySQL:

18. Выбар якаснага хостынгу для WordPress

І апошні, але немалаважны фактар ​​аптымізацыі сайта на WordPress - выбар надзейнага прадукцыйнага хостынгу. Не рэкамендуемы выкарыстаць танныя шаред хостынгі, якія забітыя сайтамі. Лепшым рашэннем будзе выкарыстоўваць VPS або WordPress хостынг з падтрымкай.

Спадзяемся, наша кіраўніцтва дапаможа вам палепшыць паказчыкі хуткасці вашага сайта.

Арыгінал артыкула - https://www.keycdn.com/blog/speed-up-wordpress/

Js?
Http (s)?