Оптимізація швидкості для Joomla!

1. Вступ Aimy Оптимізація швидкості є Joomla! плагін, який оптимізує вміст для швидкості сторінки кількома...
2. Установка
3. Конфігурація
4. Увімкнення плагіна
5. Параметри: Плагін
6. Опції: Зображення
7. Параметри: Параметри експертів
8. Обмеження
9. Особливості
10. Непідтримувані розширення
11. POD ERRORS

Вступ

Aimy Оптимізація швидкості є Joomla! плагін, який оптимізує вміст для швидкості сторінки кількома способами:

Вона дозволяє мінімізувати & вбудовувати CSS у ваші сторінки та черги JavaScript асинхронно, тому обидва не перешкоджають рендерингу сторінок. Крім того, HTML-код може бути зменшений.

Можливість оптимізації способу завантаження зображень: можна просто додати відсутні розміри зображення або завантажити зображення, відкладені або віддалені .

Крім того, кешування та стиснення браузера можуть бути активовані та налаштовані автоматично (за допомогою файлу .htaccess у Apache).

Ці функції допомагають прискорити роботу Joomla! веб-сайт з більш швидким переглядом у веб-переглядачі відвідувача.

За допомогою Google ™ Speed ​​Speed ​​Insights можна перевірити швидкість вашого веб-сайту з різних точок зору. Ми вважаємо, що це не збіг, але шанс налаштувати ваш сайт для ваших відвідувачів і отримати деякі переваги SEO , а також.

Вимоги

Оптимізація швидкості Aimy вимагає:

1. Joomla! 3.2 або вище
2. PHP 5.3.10 або вище
3. Розширення для DOMDocument PHP (зазвичай включено)
4. Joomla! шаблон, який використовує HTML 5

Установка

Установка розширення слідує за загальною Joomla! процедур.

Якщо ви не знайомі з цими процедурами, виконайте наступні дії:

1. Завантажте ZIP-архів розширення
2. Увійдіть у свій Joomla! підтримувати як "Super User"
3. У меню виберіть " Розширення " → " Керування " → " Встановити "
4. Натисніть кнопку " Або переглянути файл " і виберіть архів ZIP

Після цього архів розширення буде завантажено та встановлено.

За додатковою інформацією звертайтеся до Joomla! документації Встановлення розширення .

ПРИМІТКА . Всі плагіни вимкнено за допомогою Joomla! при першому встановленні. Щоб увімкнути Aimy Speed ​​Optimization, виконайте налаштування плагіна.

Конфігурація

Після інсталяції натисніть кнопку " Налаштувати плагін зараз " на сторінці звіту про інсталяцію.

У будь-який час ви можете налаштувати плагін за допомогою Менеджера плагінів Joomla !, вибравши в меню " Розширення " → " Менеджер плагінів ". Знайдіть плагін і натисніть на його ім'я в стовпці " Назва плагіна" списку плагінів.

Увімкнення плагіна

Щоб скористатися функціональністю плагіна, потрібно спочатку ввімкнути його.

Для цього змініть статус плагіна з " Вимкнено " на " Увімкнено " і застосуйте зміни, натиснувши кнопку " Зберегти " або " Зберегти & закрити " на панелі інструментів.

За замовчуванням конфігурація Aimy Speed ​​Optimization залишає будь-яке рішення, як оптимізувати швидкість сторінки на вашій Joomla! веб-сайт, тобто конфігурація за замовчуванням не включає жодної з доступних оптимізацій.

Параметри: Плагін

Функціональність Aimy Speed ​​Optimization може відповідати вашим потребам за допомогою таких параметрів конфігурації, які згруповані в вкладках "Плагін" і "Параметри експерта":

Усуньте блокування візуалізації

Ця опція дозволяє оптимізувати елементи CSS і JavaScript, щоб вони більше не блокували рендеринг вашої сторінки.

CSS мінімізовано і безпосередньо вбудовано в HTML-код. Файли JavaScript і весь вбудований код завантажуються і виконуються асинхронно в черзі, тобто один за іншим, зберігаючи їх послідовність недоторканою.

ПРИМІТКА : Динамічно генерований і віддалений CSS обробляється подібно до JavaScript: він ставиться в чергу і завантажується після завершення первинної візуалізації вашого веб-сайту. Цей підхід зазвичай працює, як і очікувалося, для нерисових шрифтів, подібних CSS, і запобігає блокуванню вашого веб-сайту. Однак, якщо CSS є важливим для візуалізації вашого сайту (наприклад, Bootstrap з CDN), неможливо запобігти блокування. У цьому випадку рішенням буде зберегти код CSS у вашому веб-просторі, щоб його можна було вбудувати.

Зменшити HTML

Якщо цей параметр увімкнено, ваш HTML-код буде згорнутий, перш ніж він буде доставлений до веб-переглядача відвідувача.

Увімкнення цього параметра рекомендується лише в тому випадку, якщо параметр " Експертні налаштування " " Увімкнути стиск " не можна використовувати.

Опції: Зображення

Aimy Speed ​​Optimization дає вам кілька опцій для оптимізації завантаження зображень на вашому сайті (елементи <img>). Підтримуються як популярні методи відстроченого завантаження, так і ледачі завантаження . Ви можете вибрати вручну, які зображення повинні бути оптимізовані або автоматично вибирати всі завантажені зображення.

Дія

Які дії слід застосувати до ваших зображень?

Немає

Зберігайте зображення, як є.

Додати розміри

Автоматично додавати розміри відсутнього зображення (атрибути " ширина " і " висота ").

Ця опція обробляє зображення лише на місці.

Замінити всі обрані зображення прозорим заповнювачем. Для прискорення візуалізації додаються розміри відсутніх зображень вихідного зображення.

Після того, як сторінка спочатку завантажується браузером, всі замінники зображення будуть замінені на оригінальні зображення.

Примітка : Цей параметр працює для знімків на об'єкті та поза ним. Але якщо зображення завантажується з зовнішнього веб-сайту, розміри не можуть бути встановлені автоматично. У цьому випадку ми рекомендуємо додати ширину і висоту вручну.

Lazy Завантаження

Замінити всі обрані зображення прозорим заповнювачем. Для прискорення візуалізації додаються розміри відсутніх зображень вихідного зображення.

Потім оригінальні зображення автоматично завантажуються, коли вони наближаються до перегляду користувача , тобто за допомогою прокрутки.

Примітка : Цей параметр працює для знімків на об'єкті та поза ним. Але якщо зображення завантажується з зовнішнього веб-сайту, розміри не можуть бути встановлені автоматично. У цьому випадку ми рекомендуємо додати ширину і висоту вручну.

Ми рекомендуємо використовувати відкладене завантаження зображень, оскільки воно має менші побічні ефекти, ніж ліниве завантаження зображень і, таким чином, є більш надійним (див. Обмеження нижче).

Які зображення слід оптимізувати?

Завантажені зображення

Всі зображення на сайті, завантажені в каталог Joomla! 'S / images /, використовуючи com_media (" Вміст " → " Медіа ").

Зображення з класом "відкласти"

Всі зображення (на місці або за межами), що мають назву класу " відкласти ", тобто:

<img src = "/ images / pagespeed.jpg" alt = "" class = "defer" />

Більшість Joomla! редактори дозволяють легко додавати класи до зображень.

Ми рекомендуємо вручну вибирати зображення, додаючи до них клас "відкласти" . Для ручного вибору потрібний час, але в нашому досвіді найкращі результати.

Вкажіть, чи потрібно пропускати перші зображення вибраного вище вибору.

Обнести посилання?

Як відкладене завантаження, так і ліниве завантаження використовують добре відомий атрибут " data-src ", який використовує сам Google ™.

Проте цей параметр дозволяє переносити кожне зображення виділення у посилання HTML (елемент <a>), яке вказує на вихідне зображення, якщо воно вже не використовується в межах посилання. Таким чином, ви можете зробити пошукові системи більш зручними для пошуку зображень.

Ми рекомендуємо ввімкнути цю опцію, лише якщо у вас виникли проблеми з пошуковими системами, які не підбирають відкладені або ліниво завантажені зображення.

Параметри: Параметри експертів

Експертні налаштування дозволяють змінювати свій файл .htaccess безпосередньо з Joomla! backend. Вони вимагають, щоб ваш веб-сайт обслуговувався веб-сервером Apache і що файл .htaccess вже присутній у кореневому каталозі вашого Joomla! встановлення (тобто поставлене з Joomla!).

Будь ласка, не змінюйте вручну маркерні рядки, вставлені цим плагіном - вони необхідні для оновлення конфігурації відповідно до ваших налаштувань.

ПОПЕРЕДЖЕННЯ : Перш ніж увімкнути опцію експерта, переконайтеся, що веб-сервер налаштований на те, щоб дозволити перевизначення, вказані разом із параметрами, які слід використовувати. Зазвичай ці директиви доступні і дозволені. Проте, якщо ви сумніваєтеся, попросіть свого вебхостера бути впевненим!

Увімкнути кешування браузера

Якщо цей параметр увімкнено, модуль Ap_che mod_expires активується та налаштовується для надсилання кеш-інструкцій у веб-переглядачі відвідувача таким чином:

Нестатичні ресурси

(не кешовані)

HTML , XML , JSON

(кешовані протягом одного року)

PNG , GIF , JPEG , ICO

JavaScript , CSS

EOT , WOFF , TTF , SVG

Обов'язкове перевизначення Apache : індекси

Підказка: Якщо ви могли б встановити індекс користувальницького каталогу у вашому файлі .htaccess, ви також можете безпечно ввімкнути цей параметр, оскільки обоє вимагають того самого перевизначення Apache.

Якщо цей параметр увімкнено, mod_deflate Apache налаштовано на стискання вмісту наступних типів:

HTML , XML , JSON , JavaScript , CSS , SVG

Необхідне перевизначення Apache : FileInfo

Підказка: Якщо ви використовуєте SEF і успішно активовано mod_rewrite в глобальній конфігурації Joomla !, ви також можете безпечно ввімкнути цю опцію, оскільки обоє вимагають однакового перевизначення Apache.

Якщо будь-яке з цих параметрів буде змінено, файл .htaccess буде відповідним чином оновлено під час збереження конфігурації.

ПРИМІТКА : Якщо плагін видалено, рядки, вставлені за допомогою Aimy Speed ​​Optimization, будуть автоматично видалені. Якщо ви ввімкнули параметри до, а потім вимкнули розширення, рядки все ще залишатимуться у вашому файлі .htaccess. Вимкніть ці параметри та збережіть це налаштування, перш ніж вимкнути плагін.

Обмеження

Будь ласка, уважно ознайомтеся з обмеженнями, щоб дізнатися, які функції Aimy Speed ​​Optimization можна буде використовувати на вашому веб-сайті та які розширення наразі не підтримуються:

Особливості

Internet Explorer 8 не буде інтерпретувати будь-які медіа-запити в вбудованому коді CSS, навіть якщо використовується допоміжна бібліотека, подібна до respond.js .

Динамічно генерований і віддалений CSS-код не може бути вбудований (тобто CSS віддаленого webfont).

Завантаження JavaScript в чергу асинхронно, не блокуючи рендеринг вашої сторінки, тестувалося широко і, як відомо, працює з іншими фреймворками JavaScript, але тільки jQuery і jQuery UI офіційно підтримуються зараз.

Ресурси Require.js зберігаються як є, тому що вони зазвичай завантажуються асинхронно самостійно і працюють, як і очікувалося, з Aimy Speed ​​Optimization.

Код JavaScript експериментів Google Analytics (використовується для тестування A / B) та Facebook Pixel Events зберігається так, як є, і не буде в черзі.

Зображення

: Відкладене завантаження & Lazy Завантаження

Обидва параметри вимагають включення JavaScript у веб-переглядачі користувача. Усі загальні браузери та відомі пошукові системи підтримують JavaScript і за умовчанням включають його.

: Lazy Завантаження

Ліниві завантажені зображення можуть бути доступні лише у друкованій версії або в Reader View, якщо вони вже завантажені, тобто, якщо вони колись були на екрані читача.

: Wrap in Link

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

Кешування браузера та стиснення здійснюються за допомогою конфігурації файлу .htaccess. Це буде працювати лише для веб-серверів Apache .

Непідтримувані розширення

Наразі відомо, що такі розширення несумісні з Aimy Speed ​​Optimization і не підтримуються:

Кеш сторінки

(плагін системи)

Альтернатива: встановіть "Консервативне кешування" або "Прогресивне кешування" в "глобальній конфігурації" Joomla! (" Система " → " Налаштування кешу ").

(плагін captcha)

Плагін не працює, якщо активовано параметр " Усунути блокування візуалізації ".

Альтернатива: використовуйте інший плагін captcha Aimy Captcha-менш форма гвардії .

J51 - Флоренція

(шаблон)

Шаблон не працює належним чином, якщо активовано параметр " Усунути блокування візуалізації ".

(модуль)

Шаблон не працює належним чином, якщо активовано параметр " Усунути блокування візуалізації ".

Назва та логотип Joomla! ® є торговими марками Open Source Matters, Inc. у Сполучених Штатах та інших країнах.

Google і логотип Google є зареєстрованими товарними знаками компанії Google Inc.

Зазначені жорсткі та програмні засоби, а також компанії можуть бути торговими марками відповідних власників. Використання терміна в цьому посібнику не слід розглядати як вплив на дійсність будь-якого товарного знаку або знака обслуговування. Відсутня анотація торговельної марки не може привести до припущення, що жодна торгова марка не заявляється і тому може вільно використовуватися.

Aimy Speed ​​Optimization включає та використовує наступні бібліотеки з відкритим кодом:

HTML5-PHP

розроблені Matt Butcher, Matt Farina & Asmir Mustafic.

MinifyCSS & MinifyHTML

розроблена компанією Netzum Sorglos Software GmbH.

JShrink

розроблений Робертом Хафнером.

$ script.js завантажувач JavaScript & менеджер залежностей

розробив Дастін Діаз.

[be] Lazy.js JavaScript лінивий завантажувач зображень

розроблений Бьорном Клінггаардом.

POD ERRORS

Гей! У вищевказаному документі були помилки кодування, які пояснюються нижче:

Навколо лінії 539:

Символ, що не вказує ASCII, видно до = кодування в 'Bjørn'. Припускаючи UTF-8