- Как загружается веб-страница?
- Что такое LazyLoad?
- Как работает LazyLoad?
- Пример LazyLoad в действии
- Ресторан - это наша веб-страница, в меню - изображения, а официантом - сценарий LazyLoad.
- Завершение
Этим постом мы продолжаем серию статей об оптимизации производительности, которые объясняются простыми терминами, понятными для разработчиков.
После поста о кеширование для WordPress а также кеширование в браузере Теперь перейдем к загрузке изображений : вы узнаете, как изображения влияют на производительность веб-сайта и как можно ускорить их загрузку на веб-странице.
В частности, мы сосредоточимся на скрипте LazyLoad .
Изображения являются важным способом привлечь внимание к нашему сообщению или продукту, но мы всегда должны быть осторожны с обработкой и загрузкой этих изображений.
Мы не хотим предоставлять плохой пользовательский опыт ради наших изображений!
Как загружается веб-страница?
Прежде всего, давайте кратко напомним, что происходит каждый раз, когда мы просматриваем веб-страницу.
Когда мы запрашиваем у нашего браузера URL-адрес, нам обычно приходится ждать загрузки следующих элементов:
- HTML-код (от 15 до 120 КБ)
- Файлы JavaScript и CSS (от 5 до 200 КБ кода)
- Изображения и фреймы (от 200 КБ до многих МБ [иногда слишком много!])
Я думаю, вы все очень хорошо знаете, что чувство разочарования возрастает, когда вы слишком долго ждете отображения веб-страницы: последнее, что вам нужно, это то, чтобы ваши пользователи испытывали такое же чувство и в конечном итоге покидали ваш сайт.
Независимо от технических деталей, всегда полезно помнить две основные характеристики, которые мы все склонны показывать при посещении веб-сайта:
- мы нетерпеливы
- мы почти никогда не увидим реальную скорость загрузки сайта или блога, которые мы посещаем
Поскольку это не место, чтобы говорить о том, как Интернет подрывает нашу способность концентрироваться и проявлять терпение (но кто-то еще ), давайте перейдем прямо к пункту b.
В случае веб-производительности, восприятие имеет решающее значение В большинстве случаев реальная скорость загрузки сайта почти никогда не совпадает с той, которую воспринимает пользователь.
Что такое LazyLoad?
LazyLoad - это скрипт, который откладывает загрузку изображений на странице, пока вы не прокрутите страницу вниз.
Основная идея заключается в том, чтобы загружать изображения или кадры только тогда, когда пользователям необходимо их отобразить . Таким образом, ему не придется ждать загрузки всех элементов на странице и, следовательно, он может начать использовать веб-страницу раньше. Пользователь будет видеть только изображения над сгибом . Остальные придут, как только он прокрутит.
С точки зрения производительности, эта функция уменьшит количество HTTP-запросов во время загрузки первой страницы от пользователя.
Как работает LazyLoad?
LazyLoad сохраняет все изображения и фреймы на странице, а затем устанавливает прозрачные обложки с тем же размером реальных изображений, что и заполнитель.
Вы помните те старые фотоальбомы, где завеса из папиросной бумаги защищала каждую картинку на странице?
LazyLoad «прячет» изображения и фреймы одинаково.
Каждый раз, когда пользователь прокручивает страницу вниз, запрашивая изображения ниже сгиба, сценарий удаляет «завесу из папиросной бумаги» и отображает реальное изображение.
Этот трюк в прятки не будет беспокоить пользователя, но некоторые версии LazyLoad добавляют эффект затухания, когда изображения отображаются в видимой части страницы.
Пример LazyLoad в действии
Если вы хотите увидеть LazyLoad в действии, выберите страницу, содержащую много изображений и где активирован скрипт.
WP Rocket имеет опцию LazyLoad, но есть определенные плагины LazyLoad WordPress, которые вы можете использовать; если вы разработчик, вы можете самостоятельно интегрировать скрипт LazyLoad ,
Теперь откройте консоль вашего браузера, чтобы проверить активность страницы (щелкните правой кнопкой мыши веб-страницу и выберите «Проверить»).
Вот простое сравнение той же страницы, загруженной с и без LazyLoad:
- без LazyLoad все изображения на странице загружаются вместе.
Как только страница загрузится, все ее элементы, включая изображения, появятся:
- с активной LazyLoad :
Вы можете легко увидеть, как имена файлов изображений появляются в нижней части списка консоли, как только я прокручиваю страницу.
Попробуйте представить весь процесс как обед в хорошем ресторане, где вас обслужит опытный официант, а меню богато фирменными блюдами.
Ресторан - это наша веб-страница, в меню - изображения, а официантом - сценарий LazyLoad.
Вся еда, которую вы можете заказать, появляется в меню; Вы просматриваете его и подтверждаете свой заказ официанту, который записывает его в свой блокнот (т. е. скрипт сохраняет URL-адрес изображений и устанавливает пустые изображения).
Никто не любит ждать слишком долго, чтобы еда была подана в ресторане, и официант это знает очень хорошо.
Вот почему, между курсом и другим, официант подает вам вино или приносит вам закуски.
Часть его работы состоит в том, чтобы уменьшить ощущение ожидания вашей еды и дать вам приятное впечатление от еды (то есть вы видите изображения выше и продолжаете прокручивать страницу).
Представьте, как досадно было бы долго ждать еду, а затем получать ее ВСЕ, поданную сразу!
Во время ожидания вы начнете нервничать, и в итоге ваша еда прибудет в холодном состоянии. Гораздо приятнее есть каждый курс, когда вы готовы, не дожидаясь его .
Завершение
С помощью LazyLoad производительность или ваш веб-сайт, несомненно, будут оптимизированы: это происходит только потому, что они будут отображать нужные вам изображения только тогда, когда вы их попросите.
LazyLoad позволяет вам сохранить ваши красивые изображения, не расстраивая посетителей во время ожидания.
Как вы обычно управляете своими изображениями? Вы когда-нибудь пробовали скрипт LazyLoad? Поделитесь своим мнением в комментариях!
PS. Помните, что, в общем, независимо от того, используете ли вы LazyLoad или нет, вы всегда хотите максимально оптимизировать ваши изображения (например, с помощью нашего нового инструмента сжатия, Imagify ). Вы также можете прочитать наш блог о оптимизация изображения ,
Похожие
Что такое SEO оптимизация, как она работает?SEO (поисковая оптимизация) - это поисковая оптимизация. Это набор действий, направленных на оптимизацию определенных веб-сайтов и контента для поисковых систем, таких как Google, Bing, Yahoo, Yandex ... с целью достижения лучших позиций в результатах этих поисковых систем путем написания конкретного ключевого слова или термина. Как запятая
... как, идти! Ты должен выиграть это, как, ну, так, как, мы оба!» Это лайк когда персонаж, как, постоянно бросает слово «как» в свои предложения. Часто используемые персонажами-девочками-подростками, которые, например, немного тусклые ? И, как, конец каждого предложения, как, с восходящим перегибом? Кажется, что использование не ограничивается Как проверить, использует ли сайт WordPress?
... ваю сайт, когда я делаю проверку SEO, я сначала хочу узнать, на какой платформе сделан сайт, подходит ли он для мобильных устройств и т. Д. И первым шагом является проверка того, создан ли сайт на платформе WordPress, той платформе, которая с 2003 года (с момента создания) находится в постоянном росте и развитии. Как вы можете видеть на Infograph ниже, WordPress владеет монополией, около 60% сайтов созданы на этой платформе. Прежде чем увидеть инфографику, я предлагаю вам чрезвычайно Узнайте, как работает SEO 2016
M Теперь мы учимся работать в SEO 2016. Работает ли поисковая система Google в 2016 году так же, как в 2015 году? Этот вопрос может быть немного важным, мы знаем, как блоггер. Работа поисковой системы Google в 2016 году остается такой же, как и в прошлом году, или как она выглядит? Поэтому, если вы чувствуете необходимость узнать больше о том, как работать, о работающей Сайт Грейдер дает ваш сайт SEO балл
Грейдер сайта это бесплатный инструмент SEO, который дает оценку SEO для вашего сайта с индивидуальной поисковой оптимизацией и советами по маркетингу Инструменты Google для веб-мастеров - что это такое?
Агенты по недвижимости, которые серьезно относятся к расширению своего веб-сайта и привлечению большего количества трафика из поисковых систем, должны подключиться к инструменту для веб-мастеров. Отслеживание эффективности ваших сайтов имеет решающее значение для того, чтобы увидеть, насколько хорошо он работает. Возможно, вы тратите деньги на онлайн-рекламу, чтобы привлечь новых клиентов, Что такое поисковая оптимизация SEO
... как поисковыми системами, так и пользователями интернета, то есть весь трафик в интернете. Как? Поисковая система Есть много разных способов его оптимизации: конечно, технические вопросы, такие как подготовка кода страницы, должны быть решены, но также должен быть подготовлен оригинальный контент, который Как добавить код отслеживания Google Analytics на ваш сайт Wordpress
... вствуйте! Итак, у вас есть сайт WordPress? Потрясающие! Мы любим WordPress. И теперь вы хотите отслеживать свой трафик и получать ценные сведения с помощью Google Analytics. Это тоже здорово! Мы всегда рекомендуем и, как правило, автоматически настраиваем и устанавливаем Google Analytics на всех создаваемых нами сайтах. Причина проста: это бесплатный, но мощный инструмент, который поможет вам получить больше знаний о посетителях вашего сайта. Вы можете использовать эти данные, чтобы помочь Интернет-маркетинг: что такое SEM / SEO?
* Обновление 2014 * Вопрос о разнице между SEM и SEO по-прежнему затрагивает многих людей сегодня, и мы видим многочисленные хиты в этой статье блога каждый день в 2010 году. Однако многое изменилось за последние четыре года. Причина достаточно, чтобы сделать небольшое обновление. По сути, все чаще и чаще говорят о поисковой рекламе (SEA), когда говорят о платных результатах поиска. Термин поисковый маркетинг (SEM) в настоящее время используется как общий Отзывчивый феномен веб-дизайна: что это такое и что это значит для высшего образования
Адаптивный веб-дизайн (RWD) является растущей тенденцией в веб-дизайне в последние пару лет. По мере того, как все больше колледжей и университетов внедряют практику RWD и видят ее преимущества, люди в высших учебных заведениях вступают в разговор. Что такое RWD? Что это может сделать для вашей школы? Что включает в себя RWD? Это всегда лучшее решение? Что такое адаптивный веб-дизайн? Адаптивный веб-дизайн - это метод, используемый для создания веб-сайта, Что такое SEO и как оно помогает онлайн-бизнесу?
В этой статье специалист по SEO Георгий Георгиев из Ganbox расскажет вам, что такое SEO, что изменилось за последние годы и чего можно достичь с его помощью в пользу вашего бизнес-сайта. Мы начнем с нескольких вводных понятий и терминов. SEO - это процесс поисковой оптимизации (Google, Bing, Yandex и т. Д.), Часто используемый на болгарском языке как «SEO оптимизация». По мнению экспертов из Ganbox цель заключается
Комментарии
Что такое Pogo Stick, что такое LSI, как увеличивается показатель отказов и как выполняется анализ обратных ссылок?Что такое Pogo Stick, что такое LSI, как увеличивается показатель отказов и как выполняется анализ обратных ссылок? Этот человек, возможно, получил университетское образование, или SEO обучение возможно, взял. Если вы скажете, что будете использовать такие методы, как пакеты обратных ссылок, вас могут оштрафовать. 100% гарантированное ключевое слово, результаты на первой странице или в верхнем ряду, если этого В более ранней статье Партнерский маркетинг: что это такое и как это работает?
Что такое Pogo Stick, что такое LSI, как увеличивается показатель отказов и как выполняется анализ обратных ссылок? Этот человек, возможно, получил университетское образование, или SEO обучение возможно, взял. Если вы скажете, что будете использовать такие методы, как пакеты обратных ссылок, вас могут оштрафовать. 100% гарантированное ключевое слово, результаты на первой странице или в верхнем ряду, если этого Вам нужно, чтобы на ваш сайт приходили более релевантные поисковые запросы, и вы не знаете, как это сделать?
Вам нужно, чтобы на ваш сайт приходили более релевантные поисковые запросы, и вы не знаете, как это сделать? Так много вы пытались сделать свой сайт идеально оптимизированным, но это стоило им немного? Я буду рад помочь вам стать лучше в поисковых системах. Так что не спешите, посетив мой сайт, вы только что сделали первый шаг к поиску подходящего SEO-специалиста в Брно . Я всегда выступал за то, чтобы владельцы бизнеса / интернет-магазины должны были в первую Если вам нравится ссылка на Facebook, или вы ретвитите свой любимый пост в Твиттере, или даете пост, который вам понравился +1, это означает, что вам понравился пост, верно?
Если вам нравится ссылка на Facebook, или вы ретвитите свой любимый пост в Твиттере, или даете пост, который вам понравился +1, это означает, что вам понравился пост, верно? Поисковые системы в эти дни дают сообщения с хорошими социальными реакциями более приоритетными в поисковой выдаче. Бонусом будет увеличение трафика с этих сайтов социальных сетей для вашего контента. Вы можете использовать кнопки социальных сетей на своем сайте и получить эти преимущества. 20. Просмотрите и оптимизируйте Гуру никогда не говорил вам об этом, потому что это звучит слишком просто, и зачем раскрывать мощную стратегию, когда она работает?
Гуру никогда не говорил вам об этом, потому что это звучит слишком просто, и зачем раскрывать мощную стратегию, когда она работает? теперь вы знаете, что такое 301 ссылка. Даже у Google есть служба сокращения URL-адресов, известная сейчас как Goo.gl. Представьте себе, подобный этому сайт с PR 7, который чрезвычайно мощный и авторитетный, дает постоянную ссылку на ваш сайт / видео / блог / URL. Вопрос не в том, почему у вас должно быть 301 ссылка, реальный вопрос в том, сколько из них должно указывать Но что это такое, почему это так важно и как вы можете оптимизировать его для поисковых систем?
Но что это такое, почему это так важно и как вы можете оптимизировать его для поисковых систем? Что такое бюджет обхода? Проще говоря, бюджет сканирования - это воображаемое количество страниц, которые робот Google потратит, пытаясь просканировать и проиндексировать ваш сайт. Если у вас есть веб-сайт с более чем 1000 URL-адресов и всего лишь несколькими обратными ссылками, есть вероятность, что робот Googlebot не будет сканировать весь ваш сайт на регулярной Убеждены, что аутсорсинг SEO - это разумная инвестиция, чтобы вы могли продолжать делать то, что у вас хорошо получается, и что вам нравится?
Убеждены, что аутсорсинг SEO - это разумная инвестиция, чтобы вы могли продолжать делать то, что у вас хорошо получается, и что вам нравится? Вам интересно, как мы можем помочь вам сделать поиск в Google более доступным и привлечь больше релевантных посетителей, чтобы в конечном итоге вас могли найти другие потенциальные клиенты в Интернете? Тогда возьми свяжитесь с нами для введения без обязательств , Как оптимизировать ваш сайт для RankBrain и как это влияет на SEO?
Как оптимизировать ваш сайт для RankBrain и как это влияет на SEO? Как оптимизировать ваш сайт для Google RankBrain? Внедрение RankBrain компанией Google меняет ситуацию, и это особенно ощущается на сайтах, посвященных методам SEO. Объявленный как третий по важности фактор содержания и ссылок, RankBrain добавляет искусственный интеллект для поисковых систем, позволяя Google более эффективно отвечать на запросы пользователей . Кроме Февраль 2016 года: Что такое HTTP2 и как это повлияет на ваш SEO?
Как оптимизировать ваш сайт для RankBrain и как это влияет на SEO? Как оптимизировать ваш сайт для Google RankBrain? Внедрение RankBrain компанией Google меняет ситуацию, и это особенно ощущается на сайтах, посвященных методам SEO. Объявленный как третий по важности фактор содержания и ссылок, RankBrain добавляет искусственный интеллект для поисковых систем, позволяя Google более эффективно отвечать на запросы пользователей . Кроме Вам интересно узнать, как работает ваш сайт в шести основных областях?
Вам интересно узнать, как работает ваш сайт в шести основных областях? затем скачать и установить Squirrly SEO получить аудит вашего сайта сегодня. Попробуйте Squirrly сегодня 5. Аналитика постов и страниц Ваши посты хорошие Ранее мы уже обсуждали, что такое SEO и как он работает, но что делать, если вы хотите улучшить свой SEO-рейтинг?
Ранее мы уже обсуждали, что такое SEO и как он работает, но что делать, если вы хотите улучшить свой SEO-рейтинг? Существует несколько способов улучшить положение вашего сайта в результатах поиска Google. Если вы только начинаете использовать SEO и хотите знать, с чего начать, или вы уже некоторое время занимаетесь этим и задаетесь вопросом, почему вы не видите значительных улучшений, мы вас обеспечим.
Как загружается веб-страница?
Что такое LazyLoad?
Как работает LazyLoad?
Как загружается веб-страница?
Что такое LazyLoad?
Как работает LazyLoad?
Вы помните те старые фотоальбомы, где завеса из папиросной бумаги защищала каждую картинку на странице?
Как вы обычно управляете своими изображениями?
Вы когда-нибудь пробовали скрипт LazyLoad?
Часто используемые персонажами-девочками-подростками, которые, например, немного тусклые ?