Стоит ли оптимизировать сайт склеиванием всех файлов в один?

Question

[Тарас Сереванн]

Здравствуйте! Есть сайт. Состоит из index.html, css файла, bootstrap, jquery и ещё нескольких тяжелых js файлов. Стоит ли все эти файлы склеить в index.html? То есть чтобы все javascript были добавлены в коцне index.html через . Таким образом весь сайт загружается всего одним http запросом и это должно дать прирост в скорости. Или это не имеет смысла?

Answer 1

[Сергей Протько]

Если сайт состоит из одной страницы в этом... определенный смысл конечно же есть... если бы браузер умел загружать только один ресурс одновременно.

С другой стороны, современные браузеры спокойно справляются с паралельной загрузкой ресурсов страницы. То есть чисто теоритически время необходимое для полной отрисовки страницы и инициализации приложения будет сильно меньше, если все ресурсы будут грузиться паралельно и без блокировок.

Так что лучше держать скрипты и стили отдельно, и инлайнить только то, что на самом деле важно. Например above-the-fold стили или любые другие критичные стили. Из скриптов заинлайнить имеет смысл то, что нужно для инициализации приложения. Скажем загрузчик модулей или что-либо подобное. Но не все приложение.

Answer 2

[Дмитрий Сидоренко]

Это имеет смысл, особенно, если ваши посетители имеют медленный интернет.
Прочитать про это вы можете на примере css спрайтов - https://www.google.ru/?gfe_rd=cr&ei=U2GpVNuXIKepwQ...
Я затрагивал эту тему в своей статье - candevelop.ru/blog_current/34.php
Выдержка:

Когда мы запрашиваем страницу в интернете, то одновременно с ней, зачастую, получаем кучу дополнительных файлов: изображения, стилей, скриптов. В реальной жизни сопоставим это с количеством посылок, это может быть 10 маленьких, за которыми сложно бегать или же одна большая коробка, которую быстрее принести. Для уменьшения запрашиваемых элементов и их объема применяется множество технологий: картинки склеиваются в одну, стили CSS и JS скрипты интегрируются в код основной страницы, а не подключаются отдельно.

А в качестве инструмента, для сбора проекта в один файл очень советую вам Gulp habrahabr.ru/post/208890

Answer 3

[maaGames]

Оптимизируй картинки на сайте, от этого больше по скорости загрузки выиграешь.
А то сперва минимизатором html и css оптимизируют, а потом jpg на пару мегабайт в качестве фона пихают.

Comments

[maaGames]

Aingis: Ну отыграешь на стилях секунду, если повезёт. А на картинках счёт на десятки секунд может идти. Оптимизация html-css это самый последний этап, когда всё прочее уже оптимизированно, а скорость загрузки по прежнему не удовлетворяет. Если количество посетителей не исчисляется миллионами, то никакого профита не будет: экономить долю секунды и пару килобайт трафика не имеет смысла для маленьких порталов. Профит будет только при миллионах посетителей, когда эти килобайты и, даже, байты суммируются в гигабайты трафика, который можно сэкономить путём минификации.

Answer 4

[Оптимус Пьян]

Говорят стоит но сам не пробовал

Answer 5

[lnked]

Я склеиваю, и могу поделиться smarty плагином для склеивания js или css файлов

Taras_Serevann: celebro.ru/dl/compress.zipтут качайте, классы нужно подключить, в корне сайта создайте папку cache для сгенереных файлов

для css

{compress
    mode    = 'css'
    media   = 'screen'
    type    = 'inline'
    source  = [
        [ 'file' => 'http://fonts.googleapis.com/css?family=Titillium+Web:300|Exo+2:300,400,700&subset=latin,cyrillic' ],
        [ 'file' => 'http://fonts.googleapis.com/css?family=Six+Caps' ],
        [ 'file' => '/css/screen.css' ]
    ]
}

для js

{compress
    attr   = 'data-no-instant async' // если нужны атрибуты какие то
    mode   = 'js'
    type   = 'inline' // Это если вы хотите что бы скрипт был в контенте, для уменьшения количества запросов
    source = [
        [ 'file' => '/js/jquery.js' ],
        [ 'file' => '/js/app.js' ]
    ]
}

Comments

[Тарас Сереванн]

поделитесь

[lnked]

Taras_Serevann: Отредактировал свой ответ, если будут вопросы пишите

Answer 6

[sivabur]

css-склеивать,минимизировать.
js-jquery и etc подключайте с оф сайтов.(будет закешировано и не будет качаться)Все что модифицировано в js склеивайте в один файл+кешируйете.