В этой работе я хотел бы поговорить о методах оптимизации загрузки. Я скорей всего не открою тут никакой тайны для опытных Web программистов, но для начинающих информация точно будет полезна, а остальным я надеюсь будет хотя бы интересна.
В моей практике было несколько случаев много лет назад, еще до высокоскоростных сетей и кажется даже до облачных технологий, когда я работал над сайтом WheelOfFortune, этот сайт несколько раз начинал нереально тормозить и причиной тому была слишком большая картинка.
В этой части все больше будет похоже на рассуждение, а не на практику. Тут не будет конкретных готовых решений, а размышления, в какую сторону двигаться.
Были времена, когда браузеры блокировали рендеринг страницы, пока не произойдет полная загрузка и выполнение JavaScript файлов. Если поместить все файлы с JS в самое начало, то как только браузер столкнется кодом или необходимостью загрузить код из внешнего файла, то весь рендеринг останавливается, пока код не выполниться.
Если мы расположили файлы JS в самом низу страницы, то это будет плюсом с точки зрения рендеринга, но можно пойти дальше и уменьшить размер файлов. Когда мы пишем JS код, то для повышения его читабельности добавляем пустые строки между методами, добавляем много отступов и комментариев и все это прекрасно, но совершенно ненужно брайзеру для выполнения кода.
Вместо того, чтобы минимизировать CSS файлы, я использую GZIP. По умолчанию Web сервер передаёт файлы ресурсов как есть и это вполне нормально для картинок, но не эффективно для текстовой информации, которая очень хорошо жмётся архиваторами. Минимизация – это только первый шаг, который очень простой и нереально эффективный для JavaScript файлов и может быть эффективным для CSS, если вы пишите размашисто. Как я уже сказал, я пишу CSS достаточно компактно, поэтому от минимизации мало выигрываю. А вот архивирование реально даёт выгоду.
Как и в случае с картинками объединение таких ресурсов как JavaScript и CSS файлов в один может сыграть свою положительную роль за счет сокращения расходов на необходимость создания соединения. Загружая 10 файлов может потребоваться 10 раз создавать соединение, чтобы скачать сами файлы.
Для того, чтобы расшарить youtube ролик на странице google предлагает нам использовать iframe подход с ссылкой на определенный URL, например: