- важнасць аптымізацыі У апошні час усё больш на слыху паказчык хуткасці загрузкі сайта. І гэта сапраўды...
- Дакладнасць паказчыкаў Pagespeed Insights
- Рабіце бэкапы загадзя, а не пасля таго як усё страцілі
- Вымярэнне хуткасці загрузкі WordPress з дапамогай анлайн сэрвісаў
- Паменшыце вагу старонкі
- Выдаліце лішні код
- Знізьце колькасць запытаў
- Налады на боку сервера для павелічэння хуткасці загрузкі WordPress
- Аптымізацыя кода WordPress і запытаў да базе даных
- Аптымізацыя з дапамогай CDN і зніжэнне нагрузкі на сервер
- Спіс дапаможных анлайн сэрвісаў і іх прызначэнне
- Пакінуць заяўку на рашэнне праблем з хуткасцю загрузкі сайта
важнасць аптымізацыі
У апошні час усё больш на слыху паказчык хуткасці загрузкі сайта. І гэта сапраўды актуальна па дзвюх прычынах.
Па-першае, сайты становяцца больш функцыянальнымі і цяжкімі, але пры гэтым час рэакцыі чакання карыстальніка не моцна змянілася. Ніхто не любіць павольныя старонкі.
Па-другое, пашукавікі пры індэксаванні і ранжыраванні старонак у выдачы, натуральна, таксама імкнуцца паказаць карыстачу лепшыя вынікі.
Таму важныя не толькі змест і афармленне, але таксама тэхнічная аптымізацыя і хуткасць працы сайта.
На гэтай старонцы я сабраў усе вядомыя мне, пратэставаныя, якія працуюць тэхнікі паскарэння сайтаў на WordPress. Матэрыял падыдзе як для пачаткоўцаў, так і для больш дасведчаных вэб-майстроў. Вы заўсёды знойдзеце прыдатныя для сябе ідэі.
І калі вы выканаеце прапанаваныя рэкамендацыі, то зможаце атрымаць высокую ацэнку па Pagespeed Insights. Але першачарговая задача, проста зрабіць старонкі візуальна максімальна хуткімі.
да зместу ↑
Працэс павелічэння хуткасці загрузкі сайта
Перш чым узяцца за працу, вы павінны зразумець усе маючыя адбыцца крокі або этапы. Вось іх кароткі агляд.
- Збор інфармацыі - вымярэнне бягучай хуткасці загрузкі сайта
- Вылучэнне крытычных пунктаў - тыя фактары, якія больш за ўсё запавольваюць ваш сайт і дадуць вам найбольшы вынік
- Этап рэалізацыі - вы прымаеце рашэнне зрабіць усё самастойна або дэлегаваць
У гэтым артыкуле і на іншых старонках майго блога я пакажу вам, што вы можаце паскорыць ваш WordPress сайт з дапамогай нескладаных дзеянняў.
Ці зможаце вы дамагчыся стопрацэнтнага ўзроўню прадукцыйнасці і гарантаваць стабільнасць гэтага выніку? Няма. Ёсць шмат розных фактараў у хуткасці загрузкі сайта, кожны з якіх можна ўвесь час дапрацоўваць і ў чымсьці паляпшаць. Паскарэнне сайта гэта не аднаразовая задача, па тыпу «зрабіў і забыўся». Хаця многія тэхнікі працуюць перманентна, ваш сайт па-ранейшаму мае патрэбу ў своечасовай і запланаванай прафілактыцы.
Час ад часу (асабліва, пасля абнаўлення) вы здымаеце паўторна паказчыкі хуткасці загрузкі, і калі нешта перастала працаваць належным чынам, вы проста папраўляеце гэта.
да зместу ↑
Дакладнасць паказчыкаў Pagespeed Insights
Калі людзі звяртаюцца да мяне паглядзець і выправіць хуткасць загрузкі, вельмі часта звяртаюць асаблівую ўвагу паказчыку Google Pagespeed.
Нічога не маю супраць яго, але вы павінны разумець - ён прадстаўляе ўсяго толькі рэкамендацыі. Не заўсёды самыя аптымальныя, ці карысныя ў названай сітуацыі.
Калі вас цікавяць падрабязнасці, пашукайце ў пошуку міфы пра Google Pagespeed Insights.
Я ж асабіста карыстаюся для вымярэння хуткасці сэрвісам GTMetrix.com, а таксама кансоллю браўзэра, таму што яны паказваюць фактычную лінейную гісторыю загрузкі (waterfall).
Менавіта рэальная аптымізацыя важная для вас, вашых карыстальнікаў, і для прасоўвання сайта.
да зместу ↑
Рабіце бэкапы загадзя, а не пасля таго як усё страцілі
Рабіце бэкапы перад любымі сур'ёзнымі зменамі!
А яшчэ лепш, скапіруйце ваш сайт на лакальны сервер або ў асобны субдомен на хостынгу. Тэстуе змены, і толькі затым пераносіце.
Вазьміце ў дапамогу наступныя артыкулы:
Ужо даўно карыстаюся ўбудовамі All in One WP Migration і Duplicator. Яны падтрымліваюцца ў актуальным стане і пратэставаны мільёнамі карыстальнікаў.
да зместу ↑
Вымярэнне хуткасці загрузкі WordPress з дапамогай анлайн сэрвісаў
Вы заўсёды можаце паглядзець дрэва і гісторыю загрузкі ў вашым браўзэры. Але гэта патрабуе вызначанага навыку працы з інструментамі распрацоўніка. Перавага выкарыстання сэрвісаў у тым, што яны даюць нагляднае візуальнае ўяўленне - табліцы, графікі і рэкамендацыі.
Я пакажу вам як вымераць хуткасць загрузкі WordPress з дапамогай трох онлайн інструментаў.
З-за вялікага ўтрымання давялося вывесці ў асобную артыкул. Чытайце тут - Онлайн інструменты для вымярэння хуткасці.
У наступных раздзелах дадзены асноўныя рэкамендацыі для павелічэння хуткасці загрузкі сайта на WordPress.
да зместу ↑
Паменшыце вагу старонкі
У цяперашні час сайты становяцца ўсё больш дынамічнымі, мультымедыйнымі і маляўнічымі. Але за ўсё трэба плаціць. Чым больш малюнкаў, скрыптоў і ўбудоў, тым больш памер гэтай старонкі, і тым даўжэй яна грузіцца ў карыстальніка. Больш за тое, скрыпты, убудовы і стылі тармозяць не толькі загрузку, але таксама генерацыю і адлюстраванне старонкі.
Тэкставыя дакументы вельмі добра сціскаюцца, сюды ўваходзяць HTML, CSS, JS, г.зн. асноўныя рэсурсы вашага сайта, якія перадаюць змест, афармленне, функцыянал. На сайце WordPress такіх рэсурсаў вялікая колькасць, таму вы можаце літаральна ў некалькі разоў скараціць агульны памер старонкі.
На добрым хостынгу сціск ўключана па змаўчанні. Калі гэта не так, вам прыйдзецца запісаць некалькі інструкцый у канфігурацыйны файл сервера .htaccess.
Вы можаце ўзяць, напрыклад, код адсюль enable gzip compression via .htaccess .
Для хостынгу nic.ru аптымізацыя крыху іншая. Вось самая тлумачальная і рабочая артыкул, якую мне ўдалося знайсці і я ёю паспяхова карыстаюся. Ўключэнне сціску і кэшавання на хостынгу Ru-Center .
У ёй распісана як ўключыць не толькі сціск, але і наладзіць тэрміны кэшавання браўзэрам. Настойліва рэкамендую, калі вы карыстаецеся гэтым хостынгам.
Далей.
- Паменшыце памер зыходнага кода - скароціце код HTML, JS і CSS. Для гэтых мэтаў я рэкамендую выкарыстоўваць убудова Autoptimize , Таму што ён просты ў выкарыстанні і досыць функцыянальны.
А самае галоўнае, я яго выкарыстоўваю не толькі для минификации (з мэтай скарачэння памеру), але таксама для зняцця блакавання стыляў і скрыптоў, а таксама скарачэння колькасці запытаў. Пра гэта чытайце ніжэй.
Ну і.
- «Лідэрамі» па складанні вагі для старонкі, безумоўна з'яўляюцца выявы.
Паспрабуйце скараціць іх лік. Калі карцінка не нясе ніякай сэнсавай нагрузкі, быць можа яе варта выдаліць?
Максімальна сцісніце і аптымізуе ўсе выявы. Пра гэта я напісаў асобную артыкул аптымізацыя малюнкаў .
Вы таксама можаце скарыстацца кампутарнай праграмай або тымі сэрвісамі, якія я паказаў у канцы старонкі.
Калі ў вашай медыябібліятэка ўжо загружана вялікая колькасць файлаў, скарыстайцеся ўбудовамі EWWW Image Optimizer або Robin Image Optimizer для пакетнага сціску. Абразайце вельмі вялікія памеры фатаграфій да загрузкі на хостынг.
Яшчэ адна вельмі частая праблема з выявамі - маштабаванне ў браўзэры.
Калі вы выкарыстоўваеце сэрвіс Gtmetrix, верагодна вы заўважылі радок Serve scaled images (у перакладзе, аддавайце маштабаваць малюнак).
Што гэта значыць? У тэме выкарыстоўваецца большы памер малюнка, чым гэта неабходна. Яно спампоўваецца цалкам, але сціскаецца ў браўзэры да неабходных для адлюстравання памераў. Гэта актуальна для ўсіх экранаў, не толькі для мабільных.
Праблема з маштабаваннем малюнкаў часта ўзнікае пры змене тэмы. Бывае, шаблон рэгіструе новыя памеры, але пры гэтым вашы старыя ўжо загружаныя выявы не апрацоўваюцца.
Трэба перарабіць новыя памеры ўсіх малюнкаў з дапамогай простага плагіна Regenerate Thumbnails.
Прэміум тэмы і пэўныя убудовы ствараюць уласныя наборы памераў малюнкаў, таму кіраваць імі становіцца складаней. У гэтых выпадках я часта карыстаюся убудовай Simple Image Sizes.
На старонцы Налады -> медыяфайлы ён адлюстроўвае ўсе зарэгістраваныя памеры, дазваляе змяніць іх (!), А таксама перегенерировать для пэўных тыпаў запісаў.
Часам, прасцей замяніць павольны або аб'ёмны функцыянал на нешта іншае. На адным сайце, напрыклад, я бачыў звыш 30 зарэгістраваных памераў, 10 з якіх ствараў убудова галерэі. Прычым гэтая галерэя выкарыстоўвалася толькі на некалькіх старонках, таму апраўдана было ад яе адмовіцца і замяніць на ўбудаваны функцыянал з мэтай спрашчэння працы з сайтам і яго падтрымкі.
Таму надасце асаблівую ўвагу графічным элементам вашага сайта - у большасці выпадкаў адносна хуткасці загрузкі гэта вырашальны фактар.
да зместу ↑
Выдаліце лішні код
Упэўнены, у вас ўстаноўлены некалькі убудоў карыснасць якіх не вельмі высокая. У мяне такія таксама ёсць. Бывае, шукаеш функцыянал, дадаеш праз убудова, потым перастаеш карыстацца яго функцыямі і забываеш пра яго.
Паглядзіце спіс усіх усталяваных убудоў на вашым сайце. Нават тыя, якія здаюцца вам карыснымі. Старанна абдумайце каштоўнасць, якую вам нясе кожны з іх, - ці можаце вы замяніць іх функцыянал, або наогул адмовіцца?
Вы не пашкадуеце выдаткаванага часу. Лішнія убудовы тармозяць дзейнасць вашага сайта, робяць яго менш бяспечным і павялічваюць кошт яго падтрымкі.
да зместу ↑
Знізьце колькасць запытаў
Калі вы пачысцілі непатрэбныя убудовы, - віншую, у вас ужо істотна скарацілася колькасць запытаў! Цяпер у вас застаўся толькі патрэбны код, і вы можаце яго аптымізаваць.
- Аб'яднаеце скрыпты і стылі, каб скараціць лік запытаў, - убудова Autoptimize выдатна з гэтай задачай спраўляецца. Інфармацыю па наладзе гэтага плагіна глядзіце на старонцы, якую я адмыслова для гэтага напісаў - аптымізацыя загрузкі скрыптоў і стыляў .
Вельмі часта налада плагіна Autoptimize не патрабуе тэхнічных ведаў у працы сайта.
Як павялічыць хуткасць загрузкі сайта на WordPress з дапамогай Autoptimize
Калі вам пашанцуе, вы можаце проста адзначыць Аптымізаваць HTML, CSS і JS. Але так на жаль, адбываецца не заўсёды. На сайтах з вялікім функцыяналам і колькасцю убудоў, на няправільна звярстаць сайтах або падлучаных рэсурсах могуць узнікаць канфлікты, таму пішыце ў каментарах або проста звяртайцеся па дапамогу.
- Наладзьце кэш браўзэра - усталюеце тэрміны захоўвання рэсурсаў і дакументаў у кліенце карыстальніка;
Зноў жа, я вылучыў у асобны артыкул .
Глядзіце вышэй наладу кэшавання для хостынгу ru-center. Для большасці іншых сервераў досыць дадаць наступны код у файл .htaccess.
прыклад - Add Expires Header to WordPress .
- Калі ў вашай тэме шмат дробных малюнкаў - паспрабуйце аб'яднаць іх у CSS спрайт .
З павальным выкарыстаннем иконочных шрыфтоў у тэмах, гэтая праблема становіцца не так актуальная. Усё ж яна сустракаецца. І калі яна прысутнічае на вашым сайце, няма сэнсу яе ігнараваць.
Я паспяхова карыстаўся бясплатным онлайн сэрвісам для генеравання спрайт карцінкі разам са стылямі - CSS Sprites Generator .
да зместу ↑
Налады на боку сервера для павелічэння хуткасці загрузкі WordPress
Вельмі важна не скупіцца на якасны хостынг. Гэта забяспечыць добры час водгуку, стабільнасць і пастаянны up-time, высокі ўзровень абароны і хуткую тэхпадтрымку.
- Не забывайце абнаўляць код вашага сайта
WordPress актыўна развіваецца. Распрацоўшчыкі і аўтары убудоў робяць пастаянныя аптымізацыі і закрываюць знойдзеныя дзіркі. Пераканайцеся, што ў вас усталяваныя апошнія версіі.
Я вам скажу шчыра, гэта самая частая прычына зламаных сайтаў. Зламаўся які-небудзь убудова, доўга генеруецца старонка на серверы, і ўся аптымізацыя пайшла на нішто.
Таму яшчэ раз падкрэслю.
Важна! Трымаеце код вашага сайта абноўленым.
- Уключыце і наладзьце кэшаванне на сэрвэры, стварэнне статычных старонак - вы можаце выкарыстоўваць папулярны і просты убудова WP Super Cache або іншыя альтэрнатывы.
Мне будзе цікава пачуць ваш вопыт па ўбудовам кэшавання, пішыце ў каментарах.
да зместу ↑
Аптымізацыя кода WordPress і запытаў да базе даных
Убудовы, якія працуюць на вашым сайце, запускаюць свае функцыі, хуки, тузаюць базу дадзеных, запісваюць у яе, счытваюць опцыі, - і гэта адбываецца нават тады, калі вы гэтага не бачыце.
На шчасце, ёсць зручныя спосабы паказу адладкавай інфармацыі. Напрыклад, з дапамогай папулярнага Query Monitor, вы зможаце лёгка адсачыць павольныя запыты і іх крыніца.
для больш падрабязнага прафілявання кода , Ёсць зручная каманда wp-cli profile, якая дапамагае з пошукам павольнага кода на розных стадыях загрузкі.
да зместу ↑
Аптымізацыя з дапамогай CDN і зніжэнне нагрузкі на сервер
На сваім сайце я выкарыстоўваю бясплатны план Cloudflare.
CDN павялічваюць геаграфічную даступнасць сайта, зніжае час адказу да першага байта, і ў цэлым нагрузку на сервер, прапускаючы рэсурсы праз сябе.
Папулярныя CDN прапаноўваюць вялікая колькасць магчымасцяў для кантролю трафіку, абароны, і павелічэння прадукцыйнасці.
Спіс дапаможных анлайн сэрвісаў і іх прызначэнне
Розныя онлайн інструменты, якія вам спатрэбяцца ў працэсе паскарэння сайта.
- Аналіз хуткасці вашага сайта.
- Cжатие, рэдагаванне, кадравання і канвертаванне малюнкаў
- Kraken.io Web Interface - сціск малюнкаў
- Compressor.io - яшчэ адзін інструмент сціску без страт
- PicResize - Абрэзаць, павярнуць, і змяніць памер малюнка
- WebResizer - Змяніць памер онлайн
- CSS, HTML, JS Minifier
- HTML Minifier - Скарачэнне памеру HTML, уключаючы стылі і скрыпты, прысутныя ў разметцы.
- CSS Minifier - Скарачэнне памеру каскадных стыляў
- JSCompress - Сціск скрыптоў і файлаў JS
- UnMinify - зваротны працэс, прывядзенне сціснутага кода ў чытаны выгляд.
да зместу ↑
Пакінуць заяўку на рашэнне праблем з хуткасцю загрузкі сайта
Калі па нейкай прычыне, вы не можаце выканаць самастойна вышэйпералічаныя дзеянні, але хацелі б паскорыць ваш сайт, вы можаце пакінуць мне заяўку на якаснае выкананне.
Жадаю поспехаў у працы над паскарэннем вашага сайта!
Спадабаўся артыкул, адзначайце, дзяліцеся і пакідайце каментары.
падобнае
Ці зможаце вы дамагчыся стопрацэнтнага ўзроўню прадукцыйнасці і гарантаваць стабільнасць гэтага выніку?Калі карцінка не нясе ніякай сэнсавай нагрузкі, быць можа яе варта выдаліць?
Што гэта значыць?
Старанна абдумайце каштоўнасць, якую вам нясе кожны з іх, - ці можаце вы замяніць іх функцыянал, або наогул адмовіцца?