Autoptimize

ЧПП

Шта додатак ради да би убрзао мој сајт?

Смањује све скрипте и стилове и подешава ваш веб сервер да их сажима уз добра expires заглавља. JavaScript ће подразумевано постати неблокирајући, а CSS може такође додавањем кључног CSS-а. Можете га подесити да спаја CSS и JS датотеке, у ком случају се стилови премештају у заглавље странице, а скрипте у подножје. Такође смањује HTML кôд и може оптимизовати слике и Google словне ликове, чинећи вашу страницу заиста лаганом.

Али користим HTTP/2, па ми Autoptimize није потребан?

HTTP/2 је свакако велики корак напред, знатно смањује утицај више захтева са истог сервера коришћењем исте везе за више истовремених захтева и из тог разлога Autoptimize на новим постављањима више неће спајати CSS и JS датотеке. Ипак, спајање CSS-а/ JS-а и даље може имати много смисла, као што је описано у овом чланку на css-tricks.com и овом чланку једног од Ebay инжењера. Закључак: подесите, тестирајте, поново подесите, поново тестирајте, дотерајте и погледајте шта најбоље ради у вашем контексту. Можда је то само HTTP/2, можда HTTP/2 + спајање и смањивање, можда HTTP/2 + смањивање (што AO такође може, једноставно одштиклирајте могућности „aggregate JS-files“ и/ или „aggregate CSS-files“). А Autoptimize наравно може много више од „само“ оптимизације вашег JS-а и CSS-а 😉

Да ли ће ово радити са мојим блогом?

Иако Autoptimize долази без икаквих гаранција, углавном ће радити беспрекорно ако га исправно подесите. Погледајте „Решавање проблема“ испод за податке о подешавању у случају проблема. Ако желите, можете тестирати Autoptimize на новом бесплатном пробном сајту, захваљујући tastewp.com.

Зашто jquery.min.js није оптимизован при спајању JavaScript-а?

Од AO 2.1 jquery.min.js из језгра Вордпреса се не оптимизује из једноставног разлога што многи популарни додаци убацују уметнути JS који се такође не спаја (због могућих проблема са величином кеша због јединственог кода у уметнутом JS-у), а који зависи од доступности jquery-ја, па изузимање jquery.min.js обезбеђује да већина сајтова ради без додатног подешавања. Ако желите да оптимизујете и jquery, можете га уклонити са списка изузетака JS оптимизације (можда ћете морати да укључите и „also aggregate inline JS“ или пређете на „force JS in head“).

Зашто JS који је обрадио Autoptimize блокира приказ?

Ово се дешава при спајању JavaScript-а и штиклирању могућности „force in head“ или када се не спаја и не одлаже. Размислите о промени подешавања.

Зашто се CSS који је обрадио Autoptimize и даље наводи као CSS који блокира приказ?

Уз подразумевана подешавања Autoptimize-а CSS је повезан у заглављу, што је безбедна подразумевана вредност, али се Google PageSpeed Insights жали. Можете размотрити „inline all CSS“ (лако) или „inline and defer CSS“ (боље), што је такође објашњено у овом ЧПП-у.

Чему служи „inline and defer CSS“?

CSS углавном треба да буде у заглављу документа. Недавно је, између осталих, Google почео да промовише одлагање небитног CSS-а, уз уметање стилова потребних за изградњу странице изнад прелома. То је нарочито важно за што бржи приказ страница на мобилним уређајима. Од Autoptimize 1.9.0 то је лако; изаберите „inline and defer CSS“, убаците блок „CSS-а изнад прелома“ у поље за унос (текстуалну област) и спремни сте!

Али како сазнати шта је „CSS изнад прелома“?

Не постоји лако решење за то, јер „изнад прелома“ зависи од тога где је прелом, што опет зависи од величине екрана. Ипак, постоје неке алатке које покушавају да утврде шта је тачно „изнад прелома“. Овај списак алатки одлична је почетна тачка. Sitelocity генератор кључног CSS-а и Jonas Ohlsson-ов criticalpathcssgenerator су лепа основна решења, а http://criticalcss.com/ је премијум решење истог Jonas Ohlsson-а. Као алтернатива, овај bookmarklet (само Chrome) такође може бити од помоћи.

Или треба да уметнете цео CSS?

Кратак одговор: вероватно не. Иако ће уметање целог CSS-а учинити CSS неблокирајућим, ваша основна HTML страница постаће знатно већа, па ће захтевати више „повратних путовања“. Уз то, када се у једној сесији прегледања затражи више страница, уметнути CSS шаље се сваки пут, док би се без уметања служио из кеша. Коначно, уметнути CSS ће померити мета ознаке у HTML-у на место где их Facebook или Whatsapp можда више неће тражити, што квари нпр. сличице при дељењу на тим платформама.

Мој кеш постаје огроман, зар Autoptimize не чисти кеш?

Autoptimize нема сопствени механизам за чишћење кеша, јер би то могло уклонити оптимизовани CSS/JS на који се и даље упућује у другим кешевима, што би покварило ваш сајт. Уз то, кеш који брзо расте указује на друге проблеме које треба да избегнете.

Уместо тога, величину кеша можете држати на прихватљивом нивоу на један од следећих начина:

• искључивањем могућности „aggregate inline JS“ и/ или „aggregate inline CSS“
• изузимањем JS променљивих (или понекад CSS селектора) које се мењају по страници (или по учитавању странице). Како то да урадите можете прочитати у овом чланку.

Упркос наведеним примедбама, постоје решења трећих страна за самостално чишћење AO кеша, нпр. коришћењем овог кода или овог додатка, али из наведених разлога треба их користити само ако заиста знате шта радите.

„Clear cache“ изгледа не ради?

При притиску на везу „Delete Cache“ у падајућем изборнику Autoptimize на траци администрације можете добити „Your cache might not have been purged successfully“. У том случају идите на страницу подешавања Autoptimize-а и притисните дугме „Save changes & clear cache“.

Уз то, не брините ако ваш кеш никад не падне на 0 датотека/ 0KB, јер ће Autoptimize (од издања 2.2) самостално унапред напунити кеш одмах пошто је очишћен, да би се даље смањивање знатно убрзало.

Мој сајт изгледа покварено када очистим кеш Autoptimize-а!

При чишћењу AO кеша, ниједан кеш страница не би требало да садржи странице (HTML) које упућују на уклоњени оптимизовани CSS/ JS. Иако у ту сврху постоји спајање између Autoptimize-а и неких кешева страница, оно не покрива 100% подешавања, па ћете можда морати ручно да очистите кеш страница.

Могу ли и даље да користим Cloudflare-ов Rocket Loader?

Cloudflare Rocket Loader је прилично напредан, али наметљив начин да JavaScript не блокира приказ, који Cloudflare и даље сматра бета издањем. Понекад Autoptimize и Rocket Loader раде заједно, а понекад не. Најбољи приступ је да искључите Rocket Loader, подесите Autoptimize, а затим поново укључите Rocket Loader (ако мислите да може помоћи) и тестирате да ли све и даље ради.

Тренутно (јун 2017.) изгледа да RocketLoader може покварити AO могућност „inline & defer CSS“, која се заснива на Filamentgroup-овом loadCSS, због чега се одложени CSS не учитава.

Autoptimize је испробан, али се Google Pagespeed резултат једва побољшао

Autoptimize није једноставан додатак за „поправку мојих Pagespeed проблема“; он „само“ спаја и смањује (локални) JS и CSS и слике и омогућава неке лепе додатке као што су уклањање Google словних ликова и одлагање учитавања CSS-а. Тако ће вам Autoptimize омогућити да побољшате перформансе (време учитавања мерено у секундама) и вероватно ће вам помоћи да решите нека конкретна Pagespeed упозорења. Ако желите даља побољшања, вероватно ћете морати да се позабавите нпр. кеширањем страница и подешавањем веб сервера, што ће побољшати стварне перформансе (опет, време учитавања мерено нпр. на https://webpagetest.org) и ваше pagespeed оцене „најбољих пракси перформанси“.

Шта могу да радим са API-јем?

Много тога; постоје филтери које можете користити за условно искључивање Autoptimize-а по захтеву, промену изузетака за CSS и JS, промену ограничења за уметање позадинских слика у CSS, одређивање које JS датотеке се премештају иза спојене, промену атрибута defer на ознаци спојеног JS-а, … Примери за неке филтере налазе се у autoptimize_helper.php_example и у овом ЧПП-у.

Како ради CDN?

Од издања 1.7.0, CDN се укључује уносом основног CDN директоријума блога (нпр. http://cdn.example.net/wordpress/). Ако та адреса постоји, користиће се за све датотеке које прави Autoptimize (тј. спојени CSS и JS), укључујући позадинске слике у CSS-у (када се не користе data-uri).

Ако желите да и ваше отпремљене слике буду на CDN-у, можете променити upload_url_path у Вордпрес подешавањима (/wp-admin/options.php) на циљни CDN директоријум за отпремања (нпр. http://cdn.example.net/wordpress/wp-content/uploads/). Имајте у виду да ово ради само за слике отпремљене од тог тренутка, а не за већ отпремљене слике. Хвала BeautyPirate-у на савету!

Зашто се и моји словни ликови не стављају на CDN?

Autoptimize ово подржава, али није подразумевано укључено јер нелокални словни ликови могу захтевати додатно подешавање. Али ако је ваша политика захтева између изворишта у реду, можете рећи Autoptimize-у да стави словне ликове на CDN повезивањем на API, постављањем autoptimize_filter_css_fonts_cdn на true на овај начин;

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' );

Користим Cloudflare, шта треба да унесем као основни CDN директоријум

Ништа, када сте на Cloudflare-у, ваш CSS/ JS који је обрадио Autoptimize самостално је на Cloudflare-овом CDN-у.

Како да приморам да спојене датотеке буду статични CSS или JS уместо PHP-а?

Ако је ваш веб сервер исправно подешен за сажимање (gzip или deflate) и истек кеша (expires и cache-control уз довољну могућност кеширања), није вам потребно да Autoptimize то ради уместо вас. У том случају можете штиклирати могућност „Save aggregated script/css as static files?“, која ће приморати Autoptimize да спојене датотеке чува као .css и .js датотеке (што значи да за служење тих датотека није потребан PHP). Ово подешавање је подразумевано од Autoptimize 1.8.

Како ради „exclude from optimizing“?

И CSS и JS оптимизација могу прескочити спајање и смањивање кода додавањем „идентификатора“ на списак изузетака раздвојен запетама. Тачна ниска идентификатора која се користи може се утврдити на овај начин:

• ако желите да изузмете одређену датотеку, нпр. wp-content/plugins/funkyplugin/css/style.css, можете једноставно изузети „funkyplugin/css/style.css“
• ако желите да изузмете све датотеке одређеног додатка, нпр. wp-content/plugins/funkyplugin/js/*, можете изузети на пример „funkyplugin/js/“ или „plugins/funkyplugin“
• ако желите да изузмете уметнути кôд, мораћете да пронађете конкретну, јединствену ниску у том блоку кода и додате је на списак изузетака. Пример: да бисте изузели <script>funky_data='Won\'t you take me to, Funky Town'</script>, идентификатор је „funky_data“.

Решавање проблема са Autoptimize-ом

Погледајте упутства за решавање проблема на https://blog.futtta.be/2022/05/05/what-to-do-when-autoptimize-breaks-your-site/

Датотеке су изузете, али их Autoptimize и даље обрађује?

AO смањује изузети JS/ CSS ако име датотеке указује да датотека још није смањена. Од AO 2.5 ово можете искључити на језичку „JS, CSS & HTML“ у разним могућностима, одштиклирањем „minify excluded files“.

Помоћ, имам празну страницу или internal server error после укључивања Autoptimize-а!!

Уверите се да истовремено са Autoptimize-ом не користите друге додатке за смањивање HTML-а, CSS-а или JS-а (BWP minify, WP minify, …) или искључите ту функционалност у додатку за кеширање страница (W3 Total Cache, WP Fastest Cache, …). Покушајте да укључите само CSS или само JS оптимизацију да видите која изазива грешку сервера и пратите опште кораке за решавање проблема да бисте пронашли заобилазно решење.

Али и даље имам празне CSS или JS датотеке које је обрадио Autoptimize!

Ако користите Apache, .htaccess датотека коју пише Autoptimize у неким случајевима може бити у сукобу са подешавањима AllowOverrides вашег Apache подешавања (као што је случај са подразумеваним подешавањима неких Ubuntu постављања), што доводи до „internal server errors“ на CSS и JS датотекама које обрађује Autoptimize. То се може решити постављањем AllowOverrides на All.

Не могу да се пријавим на мрежи сајтова са мапираним доменима

Мреже сајтова са мапираним доменима захтевају да се Autoptimize покрене на другој Вордпрес радњи, додајте овај ред кода у wp-config.php да бисте га повезали, на пример, на setup_theme:

define( 'AUTOPTIMIZE_SETUP_INITHOOK', 'setup_theme' );

Не добијам грешку, али моје странице уопште нису оптимизоване?

Autoptimize обавља низ провера пре стварне оптимизације. Када је тачно нешто од следећег, ваше странице неће бити оптимизоване:

• када сте у прилагођивачу
• ако нема почетне ознаке <html
• ако у одговору постоји <xsl:stylesheet (што указује да излаз није HTML, већ XML)
• ако у одговору постоји <html amp (јер су AMP странице већ оптимизоване)
• ако је излаз RSS довод (функција is_feed())
• ако је излаз Вордпрес администраторска страница (функција is_admin())
• ако је страница затражена уз ?ao_noptimize=1 додато на адресу
• ако се код повезује на Autoptimize да би искључио оптимизацију (погледајте тему о Visual Composer-у)
• ако други додаци користе излазни бафер на несагласан начин (избирљиво искључујте друге додатке да бисте пронашли кривца)

Visual Composer, Beaver Builder и слична решења за прављење страница су покварена!!

Искључите могућност да Autoptimize буде активан за пријављене кориснике и слободно превлачите и спуштајте 😉

Помоћ, плаћање/ наплата у мојој продавници не ради!!

Искључите могућност оптимизације страница корпе/ плаћања (ради за WooCommerce, Easy Digital Downloads и WP eCommerce).

Revolution Slider је покварен!

Уверите се да је js/jquery/jquery.min.js на списку изузетака JS оптимизације раздвојеном запетама (ово је изузето у подразумеваним подешавањима).

Добијам грешке „jQuery is not defined“

У том случају имате несједињени JavaScript који захтева да jQuery буде учитан, па ћете морати да додате js/jquery/jquery.min.js на списак изузетака JS оптимизације раздвојен запетама.

Користим NextGen Galleries и много JS-а није спојено/ смањено?

NextGen Galleries ради неке паметне ствари за додавање JavaScript-а. Да би Autoptimize могао то да споји, можете или искључити управљач ресурсима Nextgen Gallery-ја овим исечком кода add_filter( 'run_ngg_resource_manager', '__return_false' ); или рећи Autoptimize-у да се покрене раније, додавањем овога у wp-config.php: define("AUTOPTIMIZE_INIT_EARLIER","true");

Шта је noptimize?

Од издања 1.6.6 Autoptimize изузима све унутар noptimize ознака, нпр.:
<!--noptimize--><script>alert(‘this will not get autoptimized’);</script><!--/noptimize-->

То можете урадити у садржају странице/ чланка, у виџетима и у датотекама теме (размислите о прављењу подређене теме да ажурирања теме не би преписала ваш рад).

Могу ли да променим директоријум и име кешираних датотека Autoptimize-а?

Да, ако желите да служите датотеке из нпр. /wp-content/resources/aggregated_12345.css уместо подразумеваног /wp-content/cache/autoptimize/autoptimize_12345.css, додајте ово у wp-config.php:

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

Да ли ово ради са WP_CONTENT_URL који није подразумеван?

Не, Autoptimize не подржава WP_CONTENT_URL који није подразумеван, али се то може постићи са неколико редова кода који се повезују на API Autoptimize-а.

Могу ли направљени JS/ CSS бити унапред сажети gzip-ом?

Да, али је ово подразумевано искључено. Можете га укључити прослеђивањем ´true´ у ´autoptimize_filter_cache_create_static_gzip´. Наравно, и даље ћете морати да подесите веб сервер да користи ове датотеке уместо несажетих да бисте избегли додатно оптерећење сажимања у ходу.

Шта ради „remove emojis“?

Ова нова могућност у Autoptimize 2.3 уклања уметнути CSS, уметнути JS и повезану JS датотеку које додаје језгро Вордпреса. Тако може имати мали позитиван утицај на перформансе вашег сајта.

Да ли је „remove query strings“ корисно?

Иако ће неке онлајн алатке за процену перформанси истаћи „ниске упита за статичне датотеке“ као проблем перформанси, њихов утицај је углавном готово непостојећи. Зато Autoptimize од издања 2.3 омогућава уклањање ниске упита (тачније параметра „ver“), али штиклирање „remove query strings from static resources“ имаће мали или никакав утицај на перформансе вашег сајта мерене у (мили)секундама.

(Како) треба да оптимизујем Google словне ликове?

Google словни ликови обично се учитавају повезаном CSS датотеком која „блокира приказ“. Ако имате тему и додатке који користе Google словне ликове, можете завршити са више таквих CSS датотека. Autoptimize (од издања 2.3) сада вам омогућава да смањите утицај Google словних ликова тако што ћете их или потпуно уклонити или оптимизовати начин њиховог учитавања. Постоје две врсте оптимизације; прва је „combine and link“, која замењује све захтеве за Google словне ликове једним захтевом, који ће и даље блокирати приказ, али ће омогућити да се словни ликови учитају одмах (што значи да нећете видети промену словних ликова док се страница учитава). Алтернатива је „combine and load async“, која користи JavaScript за учитавање словних ликова без блокирања приказа, али може изазвати „бљесак необликованог текста“.

Да ли треба да користим „preconnect“

Preconnect је донекле напредна функција која упућује прегледаче (ако је подржавају) да успоставе везу са одређеним доменима чак и ако веза није одмах потребна. Може се користити нпр. за смањење утицаја ресурса трећих страна на HTTPS-у (јер се DNS захтев, TCP веза и SSL/TLS преговарање извршавају рано). Користите опрезно, јер унапред повезивање са превише домена може бити контрапродуктивно.

Када (не) могу асинхроно да учитам JS?

JavaScript датотеке које Autoptimize не обрађује (јер су изузете или хостоване негде другде) обично блокирају приказ. Додавањем у поље „async JS“ раздвојено запетама, Autoptimize ће додати ознаку async због које ће прегледач те датотеке учитавати асинхроно (тј. без блокирања приказа). Међутим, ово може покварити ваш сајт (страницу), нпр. ако асинхроно учитате „js/jquery/jquery.min.js“, врло вероватно ћете добити грешке „jQuery is not defined“. Користите опрезно.

Како ради оптимизација слика?

Када је оптимизација слика укључена, Autoptimize ће тражити png, gif, jpeg (.jpg) датотеке у ознакама слика и у вашим CSS датотекама које се учитавају са вашег домена и променити src (извор) на ShortPixel CDN за њих. Важно: ово може да ради само за јавно доступне слике, у супротном прокси за оптимизацију слика неће моћи да преузме слику ради оптимизације, па заштитни зидови, проксији, заштита лозинком или чак спречавање директног повезивања могу покварити оптимизацију слика.

Могу ли да користим оптимизацију слика за свој интранет/ заштићени сајт?

Не; оптимизација слика зависи од тога да ли спољна услуга оптимизације слика може да преузме изворну слику са вашег сајта, оптимизује је и сачува на CDN-у. Ако ваше слике не могу да преузму анонимни посетиоци (због заштитног зида/ проксија/ заштите лозинком/ заштите од директног повезивања), оптимизација слика неће радити.

Где могу да добијем више података о оптимизацији слика?

Погледајте Shortpixel ЧПП.

Могу ли да искључим да AO слуша чишћења кеша страница?

Од AO 2.4 AO „слуша“ чишћења кеша страница да би очистио сопствени кеш. Ово понашање можете искључити овим филтером;

add_filter('autoptimize_filter_main_hookpagecachepurge','__return_false');

Неки не-ASCII знакови се губе после оптимизације

AO подразумевано користи методе за ниске које нису безбедне за вишебајтне знакове, али ако ваш PHP има проширење mbstring, можете укључити функције безбедне за вишебајтне знакове овим филтером;

add_filter('autoptimize_filter_main_use_mbstring', '__return_true');

Critical CSS ми не ради

Погледајте ЧПП о (застарелом) „power-up“ овде, ови подаци биће укључени у овај ЧПП касније.

Да ли ми је и даље потребно проширење Critical CSS када имам Autoptimize 2.7 или новији?

Не, проширење Critical CSS више није потребно, сва функционалност (и многе исправке/ побољшања) сада су део Autoptimize-а.

Шта ради „enable 404 fallbacks“? Зашто би ми то било потребно?

Autoptimize кешира спојени и оптимизовани CSS/ JS, а везе ка тим кешираним датотекама чувају се у HTML-у, који ће бити сачуван у кешу страница (што може бити додатак, на нивоу хостинга, код треће стране, у Google кешу, у прегледачу). Ако у кешу страница постоји HTML који упућује на CSS/ JS који је Autoptimize обрадио, а који је у међувремену уклоњен (када је кеш очишћен), страница из кеша неће изгледати/ радити како се очекује јер CSS или JS нису пронађени (грешка 404).

Ово подешавање има за циљ да спречи кварење служењем „резервног“ CSS-а или JS-а. Резервне датотеке су копије првих CSS и JS датотека које је Autoptimize направио после пражњења кеша и као такве биће засноване на почетној страници. То значи да се CSS/ JS можда неће 100% применити на друге странице, али ће утицај недостајућег CSS-а/ JS-а бити умањен (често знатно).

Када је могућност укључена, Autoptimize додаје ErrorDocument 404 у .htaccess (како га користи Apache) и такође се повезује на template_redirect из језгра Вордпреса да би ухватио 404 грешке које обрађује Вордпрес. При коришћењу NGINX-а требало би да ради нешто попут доњег (нисам NGINX стручњак, али код мене ради);

location ~* /wp-content/cache/autoptimize/.*\.(js|css)$ {
    try_files $uri $uri/ /wp-content/autoptimize_404_handler.php;
}

А ово је леп алтернативни приступ (пружио fboylovesyou);

location ~* /wp-content/cache/autoptimize/.*\.(css)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/css/autoptimize_fallback.css;
}
location ~* /wp-content/cache/autoptimize/.*\.(js)$ {
    try_files $uri $uri/ /wp-content/cache/autoptimize/js/autoptimize_fallback.js;
}

Који софтвер/ пројекти отвореног кода се користе у Autoptimize-у?

Следећи одлични пројекти отвореног кода користе се у Autoptimize-у у овом или оном облику:

• Mr Clay’s Minify за смањивање JS-а и HTML-а
• YUI CSS compressor PHP Port за смањивање CSS-а
• Lazysizes за лењо учитавање
• Persist Admin Notices Dismissal за обавештења на администраторским екранима
• Plugin Update Checker за самостална ажурирања са Github-а за бета издање
• LoadCSS за одлагање целог CSS-а
• jQuery cookie за чување избора категорије „futtta about“ у колачићу
• jQuery tablesorter за приказ правила/ задатака кључног CSS-а
• jQuery unslider за мини клизач у горњем десном углу главне странице подешавања (складиште више не постоји)
• JavaScript-md5 за уређивање правила кључног CSS-а
• Speed Booster Pack за напредно одлагање JS-а
• Disable Remove Google Fonts за додатно уклањање Google словних ликова

Где могу да добијем помоћ?

Помоћ можете добити на форуму подршке wordpress.org. Ако сте 100% сигурни да ваш проблем не може да се реши подешавањем Autoptimize-а и да сте заправо открили грешку у коду, можете отворити пријаву на GitHub-у. Ако тражите премијум подршку, погледајте наше услуге Autoptimize Pro подршке и оптимизације веб перформанси.

Желим да престанем да га користим, како да уклоним Autoptimize?

• Искључите додатак (ово ће уклонити могућности и кеш)
• Уклоните додатак
• Очистите сваки кеш који би могао и даље да садржи странице које упућују на CSS/JS који је обрадио Autoptimize (нпр. кеш додатка за кеширање страница као што је WP Super Cache)

Како могу да помогнем/ допринесем?

Једноставно направите fork Autoptimize-а на Github-у и почните да кодирате!