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

    • 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), отримуючи повільні сайти, створити сайт, здатний витримати високе навантаження, не так складно. Але потрібно сподіватися не тільки на залізо і програмне забезпечення, а й на себе. За рахунок використання кешування можна значно скоротити кількість запитів до бази даних, якщо вони використовуються для отримання даних, які змінюються відносно рідко.

    Отже, для того, щоб підвищити швидкість генерації сторінок, потрібно відключити кешування тільки там, де воно дійсно заважає: скрипти, що обробляють дані і т. Д. Як відомо, щоб відключити кешування, досить поставити знак оклику перед ім'ям сниппета, чанка або плейсхолдера ( сніппети, що викликаються програмно, тобто $ modx-> runSnippet ( 'snippetName', []), не піддаються кешуванню). Відключати кешування також варто під час розробки та налагодження проекту, щоб кешування не гальмувати процес розробки.

    Приклад виклику без кешування:

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

    Приклад виклику з кешуванням:

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

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

    Для того, щоб дізнатися, скільки запитів і часу потрібно для генерації сторінки, досить в будь-якому місці шаблона або чанка розмістити наступне: 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. Мужская и женская обувь, сумки и аксессуары