Как узнать, слишком ли велики мои файлы js/CSS?

Ответ 1

Нулевые байты. Это звучит грандиозно, но нет такого понятия, как "оптимальный" размер файла. Чем больше это, тем дольше ваша страница будет отображаться. Как быстро устанавливается соединение с вашим сайтом для ваших посетителей? Например, если это видео-ориентированный сайт, он, вероятно, относительно быстр, поскольку люди с модемами на 64 Кбит/с не собираются пытаться передать что-либо большее. Если это простой текстовый сайт, отображающий информацию для спутниковых пользователей в Зимбабве, он может быть довольно медленным.

Итак, представьте себе, что средняя скорость составляет 1,5 Мбит/с. Реалистично, уменьшите вдвое до 750 Кбит/с. Это около 94 Кбит/с. Поэтому, если ваш файл CSS составляет 50 КБ, а ваш файл javascript - 50 КБ, потребуется немного больше одной секунды, чтобы загрузить их для своего посетителя. Является ли ваш сайт высокоинтерактивным, и пользователи ожидают, что быстро нажмут на него из одной вещи в другую? Если это так, то однократная задержка может быть крайне раздражающей. Если нет, тогда это может быть совершенно разумно.

Если вы обнаружите, что размер вашего файла становится слишком большим, вам может потребоваться рассмотреть некоторые "минитизирующие" утилиты; это утилиты, которые будут принимать ваш код, заменять имена переменных ( "my_descriptive_variable" ) короткими именами ( "a" ), удалять пробелы и комментарии и т.д. Иногда эти утилиты могут сократить ваш код до 10% от того, что было до этого.

В конечном счете, однако, "оптимальный" является полностью субъективным. Попробуйте создать минимальные файлы script/CSS, добавьте к ним кучу комментариев к ним и загрузите свою страницу в младших соединениях, пока вы не посчитаете ее слишком медленной. Это даст вам довольно хорошее представление о том, каков ваш верхний предел.

Ответ 2

Чем меньше ваши внешние файлы, тем лучше.

Но, возможно, более важно, чем меньший размер имеет меньше отдельных ресурсов, что означает меньшее количество HTTP-запросов. Например, один файл размером 1 МБ часто загружается быстрее, чем десять 100 КБ файлов. Вам лучше, когда вы объединяете несколько файлов CSS (или JavaScript, изображений и т.д.) В один.

Ответ 3

Тем не менее, одна вещь, которую вы действительно хотите использовать, - это кеширование. Поэтому поместите все ваши общие утилиты и стили в один файл, уменьшите это и включите его на каждую страницу. Большинство современных браузеров будут загружать его только один раз и быстро загружать (будучи миниатюрами). Затем также уменьшите страницы, и вы закончите.

Ответ 4

Общий размер страницы во время просмотра пользователем должен быть приблизительно ~ 100 кб. Это упростит просмотр пользователями и поисковыми системами сканирования вашего веб-сайта.

Понятие "размер страницы" определяется как сумма размеров файлов для всех элементов, составляющих страницу, включая определяющий HTML файл, а также все внедренные объекты (например, файлы изображений с изображениями GIF и JPG). Можно уйти с дизайнами страниц, которые имеют более крупные размеры страниц, пока HTML файл невелик и закодирован для уменьшения времени рендеринга браузера.

Ответ 5

Как правило, ваш Javascript файл должен быть меньше 25 КБ, а ваш CSS файл должен быть меньше 10 КБ, тем меньше, эти числа будут варьироваться в зависимости от ресурса и элементов. Иногда это невозможно, но вы можете минимизировать пробелы (пробелы, возврат и удаление комментариев). В идеале каждая строка должна быть одним определением стиля в вашем CSS, и ваш Javascript должен быть украшен (удаленный код удален и код, который используется снова и снова, чтобы быть включенным в функции) и сведен к минимуму, чтобы быть на одной строке, если это возможно.

Как правило, ваш CSS должен быть загружен в начале страницы и в JS до закрытия тега body. Это значит, что страница может загружаться в ожидании загрузки CSS или JS. Большинство браузеров и серверов будут загружать только 4 ресурса с одного сервера за раз. Если возможно, вы можете разделить свои ресурсы на несколько серверов/поддоменов для создания асинхронной загрузки.

Асинхронная загрузка применяется ко всем аспектам веб-страницы; изображения, CSS, JS и html. Все мои знания были собраны и изучены из работы на сайтах более 10 лет.