• Главная
  • Игрушки ребенку
  • Навигаторы
  • Мужская обувь
  • Женская обувь
  • Сушилка
  • Брюки
  • Новости

    • MODX Revolution: Аптымізацыя хуткасці працы сайта

    1. Аб чым? Усім добрага часу сутак. У гэтым артыкуле я распавяду пра тое, як павялічыць прадукцыйнасць...
    2. Як?
    3. кэшаванне
    4. абнаўленне PHP
    5. Минификация CSS і JS
    6. Bootstrap
    7. jQuery
    8. Минификация HTML
    9. favicon
    10. выявы
    11. pThumb
    12. Мабільная версія сайта
    13. адаптыўная вёрстка
    14. Мабільная версія сайта
    15. мабільнае прыкладанне
    16. выснову

    Аб чым?

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

    Навошта?

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

    Як?

    Для таго, каб убачыць розніцу паміж станамі сайта да і пасля, раю скарыстацца сэрвісам PageSpeed ​​Insights ад Google. Дадзены сэрвіс ацэньвае сайт па хуткасці загрузкі і выгодзе для наведвальнікаў па шкале ад 0 да 100. Натуральна, не варта спадзявацца толькі на паказчыкі гэтага сэрвісу, але па большай частцы парады ён дае цалкам адэкватныя.

    Праверка сайта ў Google Pagespeed Insights Праверка сайта ў Google Pagespeed Insights

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

    Вынік праверкі хуткасці працы сайта Вынік праверкі хуткасці працы сайта

    кэшаванне

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

    Такім чынам, для таго, каб павысіць хуткасць генерацыі старонак, трэба адключыць кэшаванне толькі там, дзе яно сапраўды перашкаджае: скрыпты, апрацоўваюць дадзеныя і т. Д. Як вядома, каб адключыць кэшаванне, дастаткова паставіць клічнік перад імем сниппета, chunk-а ці плейсхолдера ( сниппеты, выкліканыя праграмна, то ёсць $ modx-> runSnippet ( 'snippetName', []), не паддаюцца кэшаванню). Адключаць кэшаванне таксама стаіць падчас распрацоўкі і адладкі праекта, каб кэшаванне ня тармазіла працэс распрацоўкі.

    Прыклад выкліку без кэшавання:

    [[! If? & Subject = `[[* id]]` & operand = `1` & operator =` == `& then =` Hello, world`]]

    Прыклад выкліку з кэшаваннем:

    [[If? & Subject = `[[* id]]` & operand = `1` & operator =` == `& then =` Hello, world`]]

    Але будзьце асцярожныя: ня варта кэшаваць сниппеты, якія апрацоўваюць POST-запыты (напрыклад, формы зваротнай сувязі).

    Для таго, каб даведацца, колькі запытаў і часу патрабуецца для генерацыі старонкі, досыць у любым месцы пра шаблон або chunk-а размясціць наступнае: 96 0.4282 s. У першым тэгу будзе ўтрымлівацца колькасць запытаў да базе дадзеных, у другім - час стварэння старонкі.

    абнаўленне PHP

    Звычайна ў навінах пра новыя выпускі PHP пішуць пра падвышэнне яго прадукцыйнасці, што не можа не радаваць. Таму для сваіх праектаў я выкарыстоўваю самую актуальную версію. На жаль, не ўсе прытрымліваюцца гэтага і часта можна сустрэць сайт, які працуе на PHP 5.3 (я нават бачыў сервер з 5.2, у 2015-та годзе). На шчасце, большасць хостеров падаюць карыстачам выбар версіі PHP. Таму я, як з куста, змяніў на адным сайце версію PHP з 5.3 на 5.6, павялічыўшы хуткасць стварэння старонкі ў 2 разы (з 0,06 с. Да 0,03). Як бачна, абнаўленне версіі PHP - гэта не проста змена циферок, але і павышэнне хуткасці і бяспекі сайта.

    Як даведацца версію PHP Як даведацца версію PHP

    Минификация CSS і JS

    Водступы і пераклады радкоў паляпшаюць, вядома ж, чытэльнасць кода, але толькі для чалавека. Браўзэру жа можна аддаваць минифицированные версіі гэтых рэсурсаў: без лішніх прабелаў і перакладаў радкоў. Спачатку я сціскаў CSS і JS з дапамогай онлайн-сэрвісаў, але гэта не зусім зручна, так як пры чарговым абнаўленні арыгіналаў гэтых файлаў мне даводзілася нанова минифицировать гэтыя файлы і заліваць на сайт. Тады я знайшоў сниппет SmartOptimizer, які минифицирует CSS і JS на лета. Акрамя SmartOptimizer ёсць MinifyX, які таксама прызначаны для минификации і злепвання статычных рэсурсаў. Такія папулярныя фреймворка як jQuery, Bootstrap і інш. Выпускаюцца ў минифицированном выглядзе, рэкамендуецца выкарыстоўваць менавіта гэтыя версіі. Напрыклад, замест bootstrap.css лепш падключыць bootstrap.min.css.

    Правераны сэрвіс для минификации CSS: http://cssminifier.com/

    Для минификации JavaScript: http://jscompress.com

    На самай справе, ёсць больш дзейсны спосаб: минификация падчас распрацоўкі. Гэта значыць ёсць зыходнікі - файлы ў лёгкачытальным выглядзе, а значыць зборка - ужо минифицированные файлы, якія варта падключаць на сайце. Пры распрацоўцы сайта я выкарыстоўваю: SASS, gulp - для CSS, webpack - для JavaScript.

    Bootstrap

    Калі на сайце выкарыстоўваецца Bootstrap, можна зрабіць сваю зборку, якая змяшчае толькі неабходнае. Напрыклад, самая выкарыстоўваная частка гэтага фреймворка - сетка, і часцяком дастаткова пакінуць толькі яе. Стварыць сваю зборку можна на афіцыйным сайце: https://getbootstrap.com/customize/ .

    Праверыць, наколькі эфектыўна выкарыстоўваецца Bootstrap на сайце, можна з дапамогай Coverage, я напісаў пра гэта артыкул: https://quasi-art.ru/library/it/using-chrome-devtools-coverage .

    jQuery

    Не выкарыстоўвайце jQuery. Сучасны JavaScript дазваляе пісаць даволі лаканічны код, а з дапамогай транспайлеров будзе працаваць нават у старых версіях Internet Explorer.

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

    Минификация HTML

    Калі адкрыць код старонкі, аддаванай браўзэру, можна ўбачыць тое, што ў кодзе шмат лішніх прабелаў (пры ўмове, што не праігнаравана фарматаванне кода пры распрацоўцы). Зноў жа, браўзэру глыбока ўсё адно на фарматаванне, бо ўнутры элементаў прабелы схлопываются ў адзін, а паміж тэгаў яны ўвогуле ігнаруюцца. Натуральна, выдаляць усе гэтыя прабелы і пераносы радкоў ўнутры Чанк вельмі па-дурному. Таму для гэтага я дадаў убудова, які спрацоўвае пры падзеі OnWebPagePrerender.

    $ Output = & amp; $ modx-> resource -> _ output; $ Output = preg_replace ( '| \ s + |', '', $ output); $ Modx-> resource-> set ( 'content', $ output); $ Output = & amp; $ modx-> resource -> _ output; $ Output = preg_replace ( '| \ s + |', '', $ output); $ Modx-> resource-> set ( 'content', $ output); Да і пасля минификации HTML Да і пасля минификации HTML

    На самай справе, даволі спрэчны спосаб паскорыць сайт. Хутчэй за ўсё ён стане працаваць яшчэ больш павольна (не адчувальна, але ёсць аб'ектыўныя аргументы), так як рэгулярныя выразы даволі рэсурсаёмістыя і больш эфектыўна выкарыстоўваць сервернае сціск, больш падрабязна можна прачытаць тут: https://varvy.com/pagespeed/enable-compression.html .

    favicon

    Браўзэр, упершыню загружаючы сайт, таксама шукае favicon. Нават калі спасылка на favicon не паказаная ў мета-тэгах, браўзэр паспрабуе загрузіць яе па адрасе site.ru/favicon.ico. Гэтая простая аперацыя хоць і займае адзін запыт, і пры загрузцы наступнай старонкі браўзэр возьме favicon з уласнага кэша, але яе таксама можна выключыць. Робіцца гэта вельмі проста - трэба закадаваць favicon ў base64 і ўставіць наўпрост у старонку. Закадаваць favicon ў base64 можна, напрыклад, на сайце http://xaviesteve.com/pro/base64.php . Затым атрыманы код ўставіць у загаловак старонкі.

    Напрыклад, калі раней favicon даваўся так:

    <Link rel = "icon" href = "http://quasi-art.ru/favicon.ico" />

    То гэты тэг можна замяніць наступным:

    <Link rel = "icon" type = "image / x-icon" href = "data: image / x-icon; base64, data: image / x-icon; base64, AAABAAEAEBAQAAAAAAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAD / AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAREREREREAABABEAEQAQAAEAEQARABAAAREREREREAABERAAAREQAAEAEAABABAAAQAQAAEAEAABERAAAREQAAERERERERAAAQARABEAEAABABEAEQAQAAERERERERAAAAAAAAAAAAAAAAAAAAAAD // wAA // 8AAMADAADZmwAA2ZsAAMADAADDwwAA29sAANvbAADDwwAAwAMAANmbAADZmwAAwAMAAP // AAD // wAA "/>

    Дзічыну? Дзічыну.

    выявы

    Якім бы банальным ні быў гэты савет, многія цалкам ігнаруюць гэты момант. А бо ўсяго толькі трэба памяншаць памеры малюнкаў фізічна, выкарыстоўваючы графічныя рэдактары і пашырэння (phpThumbOf, да прыкладу), а не візуальна, усталёўваючы памеры ў атрыбутах height і width (што не адпавядае стандартам, дарэчы) або з дапамогай CSS. Дарэчы, калі вы выкарыстоўваеце phpThumbOf, то аптымізаваць сайт можна, дэактываваць убудова phpThumbOfCacheManager, які выдаляе кэш малюнкаў пры ачыстцы кэша сайта.

    Аптымізацыі скразных малюнкаў (тых, што прысутнічаюць на большасці старонак) трэба надаць асаблівую ўвагу. Лагатыпы, спрайты і фонавыя малюнкі можна аптымізаваць без змены якасці з дапамогай онлайн-сэрвісаў, напрыклад, http://compresspng.com/ .

    На малюнку ніжэй паказана, што людзі вельмі спяшаліся папіць піўка ў пад'ездзе, таму забыліся зрабіць так, каб замест арыгінала, які мае вагу амаль 1 МиБ, загружалася сціплая мініяцюра, якая эканоміць час наведвальніка. На дадзены момант сэрвіс PageSpeed ​​Insights ацэньвае гэты сайт на 0/100. Гэта вам не Танцы на лёдзе з шчодрымі 5.9 з 6.0.

    Асобны кацёл гэтым пане Асобны кацёл гэтым пане

    pThumb

    Варта згадаць пра выдатную альтэрнатыву phpThumbOf - pThumb. Як запэўніваюць распрацоўшчыкі, pThumb працуе хутчэй (асабіста я не праводзіў бенчмаркі, паверу на слова). Для ўстаноўкі pThumb досыць выдаліць phpThumbOf і ўсталяваць pThumb. Не варта баяцца за тое, што пасля гэтай замены нешта зламаецца на сайце, так як абодва сниппета выкарыстоўваюць аднолькавыя прасторы назваў.

    Мабільная версія сайта

    Ёсць два спосабу аптымізаваць сайт для мабільных наведвальнікаў:

    • адаптыўная вёрстка
    • Мабільная версія сайта

    адаптыўная вёрстка

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

    Мабільная версія сайта

    Стварэнне мабільнай версіі сайта залежыць ад выкарыстоўванай сістэмы, на якой створаны сайт (MODX, CodeIgniter, Phalcon і інш.). Асаблівасць гэтага спосабу ў тым, што карыстальнікам настольных кампутараў і карыстальнікам мабільных прылад аддаюцца розныя версіі сайта (разная вёрстка, CSS і JavaScript-скрыпты). Я ўжо пісаў артыкул пра ( стварэнні мабільнай версіі сайта на CodeIgniter і для MODX Revolution .

    мабільнае прыкладанне

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

    выснову

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

    Аб чым?
    Як?
    Навошта?
    Як?
    If?
    Последние новости:

    Все права защищены © 2013 Интернет-магазин SHOP-MODA. Мужская и женская обувь, сумки и аксессуары