Что быстрее: инлайновые подключения css или тег link?

Question

[Максим Иванов]

Знаю, вопрос глупый, но все-таки, никогда не задавался вопросом, что лучше

использовать в index.html

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" >
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
  <link rel="stylesheet" href="public/css/app.css">

или в одном файле main.css прописывать все и подключать в index.html

@import("http://fonts.googleapis.com/icon?family=Material+Icons");
  @import("http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css");
  @import("https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css");
  @import("public/css/app.css");

разницы, наверное, нет, но чисто семантически или с точки зрения удобства, что лучше?
Скрипты, во всяком случае, я сборщиком в один файл склеиваю, а вот css файлы не получается, они там какие-то зависимости имеют по url, поэтому если локальные хранить, то все ломается

Answer 1

[xmoonlight]

Идеально: один CSS и один JS, всё минимизировано и находится в тэгах <style> и <script> соответственно, в теле самой страницы.
Внешние надо полностью превращать в локальные (скачивать целиком со всеми зависимостями с удалённого сервера) или использовать @import внутри единого CSS-файла (или тэга <style>).

Answer 2

[GreatRash]

www.stevesouders.com/blog/2009/04/09/dont-use-import

TL;DR
Линки грузятся асинхронно, а импорты асинхронно грузятся не во всех браузерах (привет ИЕ).