Как мне оптимизировать очень длинную страницу с тоннами изображений на ней? - PullRequest
2 голосов
/ 06 февраля 2012

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

Все, что я бы предположил, это более 30 страниц на одной странице (должно быть так, и все должно быть изображениями по причинам конверсии).

Вот что я сделал до сих пор, но я не уверен, что что-то еще мне не хватает

  1. Я повторно сжал более 140 jpg на странице до чуть меньших размеров
  2. Я играл со спрайтами, но большинство изображений все большие (например, целые рамки для отзывов шириной 600 пикселей). Спрайт изображения в конечном итоге, как 2 МБ. По какой-то причине загрузка этой страницы заняла больше времени (почти на 2 с), поэтому я снял их
  3. Самым важным является то, что все сразу вверху загружается настолько быстро, насколько это возможно для человека, и прежде всего так, чтобы продажа не была потеряна кем-то, начинающим с набора изображений, загружаемых не по порядку. Я использовал некоторые проповедующие изображения с помощью этого метода: http://perishablepress.com/press/2009/01/18/css-image-caching/ - Кажется, он работал довольно хорошо на меньших изображениях, но когда я добавляю фон (который очень интенсивно использует графику), кажется, что все сразу замедляется, например, его пытается сделать определенное количество (5?) изображений за один раз. В идеале я хотел бы сгруппировать первые 4 меньших изображения, которые предварительно кэшируются, а затем выполнить фокусировку всей полосы пропускания на заднем плане, а затем всю оставшуюся часть страницы в стандартном порядке.
  4. Оценка Google Page Speed ​​составляет 90/100. единственное, что его беспокоит, - это неиспользуемые стили, но меня это не особо беспокоит, потому что его общий объем составляет около 2 КБ ... издержки от 7 МБ изображений намного важнее.
  5. У меня есть возможность использовать CDN для изображений, но я не уверен, как бы я поступил так или это могло бы помочь?

Я чувствую, что сделал все, что мог, но опять же я мог что-то упустить ...

Ответы [ 3 ]

1 голос
/ 06 февраля 2012
  • CDN определенно поможет.И я надеюсь, что с 140 картинками в нем будет больше, чем просто сервер.Просто связывайтесь напрямую с IP-адресами серверов, чтобы избежать ненужного поиска DNS.

  • Минимизируйте HTTP-запросы.Вы упоминаете, что экспериментировали со спрайтами.Я все еще верю, что спрайты - это путь, но вы можете не захотеть создавать только один огромный образ.Если у вас 140 изображений, у вас должно быть около 10 спрайтов.

  • Убедитесь, что вы установили заголовки, чтобы клиент кэшировал весь контент.Помните ETags.

  • Gzip / сжатый контент для браузеров, которые позволяют это.

  • Если исходный код длинный, обязательно очистите буферрано.

1 голос
/ 06 февраля 2012

Рассматриваете ленивую загрузку изображений ниже сгиба?Есть несколько плагинов javascript для выполнения этого

0 голосов
/ 06 февраля 2012

прокрутка страниц + объединение изображений в виде спрайтов для каждой страницы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...