Оптимизация подключаемых файлов

mainОколо 80% времени загрузки тратится фронтэндом – конечной страницей пользователя, которая собирается из -разметки или динамически, с помощь. скриптов. Большая часть времени уходит на загрузку компонентов страницы: картинок, -файлов, скриптов, flash. Уменьшение количества этих компонентов уменьшает количество запросов к серверу, необходимых до того, как клиентское приложение может отрендерить страницу.

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

1. Если на странице необходимо использовать только определенные стили, содеожащиеся в CSS-файле, нет смысла подключать (на всякий случай) и другие файлы с таблицей стилей.

2. В случае, если все стили равно правно присутствуют на страницах, не стоит разносить из по разным файлам (например, я раньше все основные стили размещал в файле styles.css, а стили из библиотек в файлы fancybox., dhonishow.css, divs.css итд). Правильным путем по оптимизации скорости загрузки страницы будет либо поместить все стили в один файл (разделив блоки, относяшиеся к верстке и скриптам комментриями), либо, если Вы все таки сторонник структуризации файлов использовать вместо 3-5 CSS-файлов всего лишь два – 1 для стилей верстки, другой для стилей JS-скриптов. Это снизит нагрузку на сервер и даст Вашей странице фору в 1-3 секунды.

3. Минимизируйте . Этого можно добиться путем удаление из кода всех несущественных символов с целью уменьшения объема файла скрипта и ускорения его загрузки. В минимизированном коде удаляются все комментарии и незначащие пробелы, переносы строк, символы табуляции.

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

4. Обфускация JS-кода является альтернативным способом сокращения исходного кода. Также, как минимизация, она удаляет пробельные символы и вырезает комментарии, но в дополнение она измененяет сам код. К примеру, во время обфускации имена функций и переменных заменяются на более короткие, что делает код более компактным, но менее читабельным. Обычно этот прием используется для усложнения реверс-инжиниринга программы. Но обфускация помогает также уменьшить код настолько, насколько это не получится сделать одной минимизацией. Думаю, что самая распространенная утилита для этого — Dojo Compressor (ShrinkSafe).

5. Избегайте CSS-выражений. CSS-выражения являются мощным (и опасным) способом динамического задания стилей. Проблема с этими выражениями в том, что они вычисляются гораздо чаще, чем многие могли бы ожидать. Они вычисляются не только во время рендеринга страницы и изменения размеров окна, но также при скроллинге и даже когда пользователь просто водит мышкой над страницей. Это несложно отследить, достаточно добавить счетчик в выражение. Обычное движение мышкой над страницей запросто может вызвать вычисление выражения более 10000 раз.

6. Сжатие CSS-кода, так же приносит свои плоды, ускоряя загрузку страницы в среднем на 80%. Сжатие CSS-кода по принципу крайне схоже с Минимизированием JavaScript., так же убираются все комментарии и незначащие пробелы, переносы строк, символы табуляции. Помимо всего прочего, оптимизируются и HEX-цвета (#ffffff -> #fff) и (font-size: 10px; font-weight: bold; -> font: 10px bold;).

7. По возможности очищайте html-код от “мусора”. К сожалению, больших изменений в очистке html-кода добится сложно, так как именно с этим кодом приходится довольно часто работать и ухудшать его читабельность обчно не хочется. Так что в этом случае только 2 пути. Либо ограничится вычисткой комментариев и абсолютно н нужных переносов строк (не путать с тегом <br>). Либо загружать на сервер оптимизированный однострочный html-файл, храня на сервере последнюю модификацию для последующей редактуры.

Когда я только начал тестировать страницу одноо из своих проектов, возможность оптимизации достигала 293% (именно на столько можно было увеличить скорость загрузки страницы), после проведенного комплекса мероприятий, возможность оптимизации достигла 90%. Выигрых в секундах (при скорости 100 кб/сек) возросла с 14, 02 сек до 8,19 сек, то есть увеличилась в полтора раза.

  • Гилёв

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

Запись навигация

Top