Как использовать CDN для обслуживания сторонних скриптов и шрифтов для значительного увеличения скорости
Недавно я начал использовать Nextcloud, мощный файловый менеджер PHP с открытым исходным кодом. Он работает очень хорошо, и есть много плагинов, которые позволяют добавлять дополнительные функции, включая поддержку внешнего хранилища через Amazon S3 и многое другое.
Недавно установленный сайт Nextcloud может быть немного медленным, поскольку все файлы обслуживаются локально, что влияет на производительность, особенно если вы находитесь на сервере без HTTP/2. Я решил немного покопаться, чтобы посмотреть, смогу ли я улучшить производительность.
Обслуживание шрифта из CDN Google
Nextcloud использует локально обслуживаемый шрифт Open Sans только в формате файла WOFF. Вместо этого, используя CDN Google, мы можем воспользоваться меньшим и более быстрым форматом файла WOFF2, а также более длительным сроком службы кеша. Для этого просто добавьте:
<link href='https://fonts.gstatic.com' rel='preconnect' crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600">в следующие три файла чуть ниже <?php emit_css_loading_tags($_); ?>:
/core/templates/layout.base.php
/core/templates/layout.guest.php
/core/templates/layout.user.phpОбслуживание сторонних скриптов из CDN
Nextcloud загружает огромное количество JavaScript, что действительно снижает скорость загрузки страниц (если только вы не используете HTTP/2). Есть файл vendor/core.js, содержащий все сторонние плагины, размером чуть более 1 МБ и включающий 16 скриптов (из них 7 неминифицированных):
"jquery/dist/jquery.min.js",
"jquery-migrate/jquery-migrate.min.js",
"jquery-ui/ui/minified/jquery-ui.custom.min.js",
"underscore/underscore.js",
"moment/min/moment-with-locales.min.js",
"handlebars/handlebars.min.js",
"blueimp-md5/js/md5.min.js",
"bootstrap/js/tooltip.js",
"backbone/backbone.js",
"es6-promise/dist/es6-promise.js",
"davclient.js/lib/client.js",
"clipboard/dist/clipboard.min.js",
"autosize/dist/autosize.min.js",
"DOMPurify/dist/purify.min.js",
"snapjs/dist/latest/snap.js",
"select2/select2.js"Я решил удалить содержимое vendor/core.js (так что это 0 КБ), а затем добавить следующее:
<script defer src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script defer src="https://code.jquery.com/jquery-migrate-1.4.0.min.js"></script>
<script defer src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-md5/2.7.0/js/md5.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/twbs/[email protected]/js/tooltip.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/2.3.0/es6-promise.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/owncloud/[email protected]/lib/client.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.20/autosize.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.3/purify.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/gh/jakiestfu/[email protected]/dist/2.0.0-rc1/snap.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.4.8/select2.min.js"></script>в следующие файлы — вместо <?php emit_script_loading_tags($_); ?> и чуть ниже <?php emit_css_loading_tags($_); ?>:
/core/templates/layout.base.php
/core/templates/layout.guest.php
/core/templates/layout.user.phpЭто значительно улучшило скорость загрузки первой страницы.
Настройка политики безопасности контента
Важно, чтобы вы настроили политику безопасности контента (CSP) для внесения в белый список ресурсов, загружаемых с cdn.jsdelivr.net, cdnjs.cloudflare.com, code.jquery.com, fonts.gstatic.com и fonts.googleapis.com, иначе они выиграли. не загружается.
Резюме
Обслуживая активы из CDN, вы можете значительно повысить скорость загрузки Nextcloud за счет использования меньших размеров файлов (поскольку все скрипты минимизированы), увеличения срока службы кеша и шардинга домена.
Эта статья была опубликована с сайта: https://christianoliff.com/blog/improving-the-performance-of-nextcloud.
