Web: стратегия максимизации веб-сайт пользователя скорость отображения (работа в процессе)
Шаг 1. Сжатие & Кэширование Включить Gzip или выкачать сжатия, а также задать параметры кэша. (обычно достигается в .htaccess, если у вас есть контроль над сервером.)
Шаг 2. Шрифты Наилучший вариант придерживаться «безопасных шрифтов». (испытано «связаны Google Roboto» в Dev-Tools - 2,8 секунды, чтобы загрузить ... угробил его нулевой задержкой.)
Шаг 3. Изображения Одно изображение может быть больше, чем все другие ресурсы, поэтому изображения должны быть первыми в строке для оптимизации. Сначала обрезайте изображение до абсолютного минимально необходимого содержимого. Эксперимент с форматами сжатия - фотографии (jpg), цвет блоков (gif), пиксели (png). Затем измените размер изображения (масштабное изображение) до максимального размера, который будет отображаться на сайте (контролируется с помощью css). Уменьшенный максимальный размер дисплея, позволяет увеличить сжатие jpg. (если сайт фотографии - укажите ссылку на полный размер, чтобы разрешить пользователю). Рассмотрите задержку загрузки изображения, например, LightLazyLoader, где изображения загружаются только тогда, когда пользователь прокручивает для просмотра большего количества изображений.
Шаг 4. Упорядочить последовательность загрузки, чтобы обеспечить первоначальный пользовательский дисплей Для этого требуется последовательное позиционирование связанных ресурсов. Например. Если вы используете responsiveslides, скрипт должен быть прочитан до того, как начнут отображаться изображения, иначе будет отображаться много изображений; пока скрипт не будет прочитан. Т.е. Нарушение основного правила и загрузка скриптов на раннем этапе могут представить рабочий дисплей, в то время как другие «ненужные элементы» продолжают загружаться.
Шаг 5. Объединить CSS и JS ресурсы в соответствии с последовательностью загрузки Просто откройте ресурс CSS в Notepad ++ и скопировать его в и выше, файл «my.css» ..... и повторить для JS ,
Шаг 6.Минимизировать объединенные ресурсы Существуют различные программы для достижения этой цели ... инструменты Google предлагают это онлайн ... загрузить файл и загрузить мини-версию с вашими комментариями и пробелом. (Не забудьте указать название версии "файлы, так что вы держите ваши комментарии.)
Примечания: Держите тестирование изменений, которые вы делаете (например) в Google-DEV-инструментах Ctrl + Shift = I, Вкладка: сеть. Это графически показывает время загрузки элементов и общую временную шкалу до полной загрузки.
Если несколько элементов начинают загружаться одновременно ... это идеальный вариант. Как правило, другая группа начнет загружаться, когда закончится предыдущая партия. Предпочтительно, чтобы все элементы загружались одновременно. Нам сообщили, что это может быть достигнуто путем хранения различных элементов в разных местах, чтобы облегчить многопоточную загрузку (где элементы нельзя комбинировать).
Комментарий Использования 2Mb/с дросселированием и чистая нагрузкой, мой первый дисплей изображения теперь готов @ 2 секунды (по сравнению с 15 секунд). Задержка 2s связана с занятием других потоков.
Моя цель - начать загрузку «1-го изображения» раньше, гарантируя, что менее чем за 500 мс 2-го изображения готовы к отображению.
Это незавершенное производство.
Я бы порекомендовал взглянуть на [Gulp] (http://gulpjs.com) или [Grunt] (http://gruntjs.com), чтобы помочь вам минимизировать и объединить ваши файлы. Если вы используете большое количество библиотек, [Bower] (http://bower.io) также полезна - если вы уже не используете его. – bunnmatt
JS Скомпилируйте все файлы в один и снимите код. Вы можете использовать для этого браузер. CSS Скомпилируйте все файлы в один, используя и уменьшите. Фотографии Помните о сжатии изображений, и вы можете использовать графическую ленивую загрузку для более быстрой загрузки страницы. [Пример] (http://singerxt.github.io/LightLazyLoader/) –
@bunmatt Спасибо ... Я пока не использую ни одного из них. Я их видел. Я отвечу на ваш совет и проведу их. @ Człowiek Fin Śpiewak благодарит за консультацию и ссылку на «ленивый загрузчик». Концепция выглядит неплохо, но OMG их веб-сайт занял много времени, чтобы загрузить ... глядя на совершенно чистый белый экран !!! Я был на грани увольнения, когда он начал появляться. Я помню, как думал «эта ленивая загрузка»: D Как насчет этой концепции «многопоточных загрузок», распространяя изображения вокруг ..... любые идеи или опыт этого? –