Как определить вес страницы сайта


Как узнать, сколько весит страница вашего сайта – semantica.in

Мы увеличиваем посещаемость и позиции в выдаче. Вы получаете продажи и платите только за реальный результат, только за целевые переходы из поисковых систем

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

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

Зачем это нужно?

Сайтам тоже нужно худеть к лету. Чем больше объем страницы, тем медленнее она загружается, тем дольше пользователь не получает доступа к контенту и тем хуже они выглядят в глазах поисковиков. Узнать размер страницы и сайта целиком стоит по двум причинам: оценить, сколько места на хостинге у вас осталось и как быстро он загружается в браузере. Второе особенно важно – скорость загрузки страниц учитывается поисковиками при формировании выдачи. Соответствующий алгоритм работает аж с 2010 года и если сайт тяжелый и медленный, на попадание в топ рассчитывать не стоит.

Как узнать сколько весит страница сайта?

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

Как узнать, сколько весит страница сайта в браузере

Чтобы найти нужную информацию, зайдите в инструменты разработчика браузера Google Chrome («Настройки» >> «Дополнительные инструменты» >> «Инструменты разработчика» или просто F12).Нужную информацию можно получить во вкладке Network. Главный минус – это очень неудобно. Там отображается вес каждого элемента страницы, а скорость их загрузки в миллисекундах можно посмотреть на временной шкале. Но на этом все: можно либо узнать полный размер страницы сайта в килобайтах и время загрузки (самая нижняя строка), либо уточнить эти же параметры для типа элемента. Если вы шарите в JavaScript и CSS, можно посмотреть, какие скрипты и стили подгружаются медленнее других, но полноценным анализом это назвать сложно.

Переходим к сервисам.

2ip.ru

Простой, попсовый и удобный сервис, который обычно используют для проверки IP-адреса. Он выдает необходимый минимум информации. Чтобы узнать, сколько весит страница сайта, нужно выбрать в списке инструментов «Информация о сайте». Вбиваете URL и радуетесь.

pingdom.com

Еще один очень удобный и красивый сервис. Помогает узнать размер страницы сайта и время загрузки. По итогам теста ставит оценку и подсказывает, как улучшить положение. Есть удобная временная шкала загрузки элементов страницы, разбивка по типу контента и количеству запросов к серверу. Результат теста можно скачать или поделиться им в социальных сетях (зачем – загадка). Ссылка на инструмент спрятана в футере сайта (кнопка Tools), все остальное на страничке «продает».

GTmetrix

Почти полностью дублирует функции инструмента pingdom.com. Отличается раздутым (он примерно вдвое длиннее) списком критериев оценки, возможностью посмотреть CMS сайта и графиком изменения скорости загрузки страницы за несколько недель/месяцев. Дополнительный плюс – чтобы добраться до нужной информации, не нужно долго скроллить, все данные разбиты по вкладкам.

Есть еще собственный инструмент «Гугл» – PageSpeed Insights. Сколько весит страница сайта он не показывает, но помогает определить основные проблемы, снижающие скорость загрузки. Правда, никаких особых подробностей он не дает, только краткую справку о том, как сделать все правильно. Список критериев проверки у него тоже небольшой, поэтому для детального анализа страницы лучше воспользоваться другими сервисами.

Больше всего подробностей дает GTmetrix. Он проверяет сайт по 46 параметрам, указывает на ошибки и возле каждой подрисовывает кнопочку «What’s This mean?», чтобы вы точно не запутались в терминах. Заботливый. Помимо стандартных советов по оптимизации скриптов и подобных, GTmetrix советует минимизировать количество http-запросов, поработать с фавиконом и сжатием элементов gzip.

Что делать, если сайт загружается медленно

Отсекайте лишнее

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

Не все сразу

Загружайте самые тяжелые и объемные элементы в последнюю очередь. Да, размер страницы сайта не изменится, но пользователь быстрее получит доступ к полезному контенту.

Полное руководство по уменьшению веса страницы

Общий вес страницы увеличился на 32% в 2013 году, достигнув смехотворных 1,7 МБ и 96 отдельных HTTP-запросов. Это средняя цифра; половина всех сайтов будет больше. Ожирение веб-сайтов стало эпидемией, и виноваты мы, веб-разработчики. Нет никаких оправданий.

Сайт с избыточным весом отрицательно скажется на вашей прибыли:

  1. Чем больше загрузка, тем медленнее работает. Не у всех есть соединение 20 Мбит / с, и это особенно актуально в развитых западных странах со стареющей медной инфраструктурой.Неважно, насколько хорош ваш сайт: пользователей не будут ждать .
  2. Мобильный доступ в Интернет стремительно расширился и достиг почти каждого четвертого пользователя. При обычном 3G-подключении страница размером 1,7 МБ появится почти за минуту. Есть ли смысл применять методы адаптивного веб-дизайна, если ваш сайт не работает эффективно на этих устройствах?
  3. Алгоритмы скорости загрузки страниц Google понизят рейтинг вашего сайта и нанесут вред поисковой оптимизации.
  4. Чем больше у вас кода, тем больше времени требуется на обновление и обслуживание.

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

Первые три на самом деле не делают ваш сайт стройнее, но добавляют корсет и красивую одежду…

1.Активировать сжатие GZIP

По данным W3Techs.com, почти половина всех веб-сайтов не поддерживает сжатие. Обычно это параметр сервера, который должен быть включен вашим веб-хостом , хотя его можно настроить самостоятельно.

2. Поощряйте кеширование браузера

Если браузер может легко кэшировать файл, нет необходимости повторно загружать его. Простые решения включают установку соответствующего заголовка Expires, даты последнего изменения или принятие тегов ETag в заголовке HTTP.

Вы можете настроить свой сервер для автоматической обработки, например вот параметр Apache .htaccess для кеширования всех изображений в течение одного месяца:

   ExpiresActive On  ExpiresDefault "доступ плюс 1 месяц"    

3. Используйте сеть доставки контента (CDN)

Браузеры устанавливают ограничение от четырех до восьми одновременных HTTP-запросов на домен.Если на вашу страницу загружено 96 ресурсов из вашего домена, в лучшем случае потребуется двенадцать наборов одновременных запросов, прежде чем все появятся. (На самом деле размеры файлов различаются, поэтому это не происходит именно так, но ограничение по-прежнему действует.)

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

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

4. Удалить неиспользуемые активы

Веб-сайты развиваются. Если вы больше не используете виджет, вы можете удалить связанные CSS и JavaScript. Если они содержатся в отдельных файлах, это простая задача. В противном случае вам может потребоваться использовать такие инструменты, как Chrome Audit Developer Tool, JSLint, Dust-Me Selectors, CSS Usage, unused-css.com или инструменты сборки, такие как grunt-uncss.

5. Объединение и минимизация CSS

В идеале вам потребуется один файл CSS (хотя может потребоваться пара, если вы используете RWD для поддержки старых версий IE). Хотя может быть разумным создавать и поддерживать отдельные файлы CSS, вам следует присоединиться к ним и удалить ненужные пробелы перед размещением на рабочем сервере.

Препроцессоры, такие как Sass, LESS и Stylus, могут сделать за вас тяжелую работу. Инструменты сборки, включая Grunt.js или Gulp, могут автоматизировать ваш рабочий процесс или, если вы предпочитаете графический интерфейс, Koala предоставляет бесплатное кроссплатформенное приложение.

Если это звучит слишком сложно, вы можете вручную объединить файлы в текстовом редакторе или из командной строки, например в Windows:

  скопировать file1.css + file2.css file.css  

или Mac / Linux:

  cat file1.css file2.css> file.css  

Полученный файл можно запустить с помощью онлайн-минификатора CSS, такого как cssminifier.com, CSS Compressor & Minifier или CSS Compressor.

Наконец, не забудьте загрузить весь CSS в заголовок , чтобы браузер знал, как стилизовать следующий HTML-код, и ему не нужно было заново перерисовывать страницу.

6. Объединение и минимизация JavaScript

Средняя страница загружает 18 отдельных файлов сценариев. Хотя практично хранить библиотеки, такие как jQuery, в виде отдельных файлов, ваш собственный код JavaScript должен быть объединен и уменьшен на вашем рабочем сервере. Опять же, инструменты сборки могут помочь, или вы можете использовать онлайн-инструменты, такие как YUI Compressor, Closure Compiler или, мой личный фаворит, JavaScript CompressorRater, который передает ваш код нескольким движкам, чтобы вы могли выбрать лучший.

По общему признанию, вам нужно быть немного более осторожным, поскольку компрессор JavaScript может выйти из строя, если у вас плохой код - даже если у вас отсутствует точка с запятой. Однако простое объединение файлов повысит производительность, так как вы будете делать меньше HTTP-запросов.

Наконец, лучше всего загружать JavaScript непосредственно перед закрывающим тегом HTML body . Это гарантирует, что сценарии не блокируют загрузку другого содержимого, а содержимое страницы будет доступно для чтения до загрузки и выполнения сценариев.

7. Используйте правильный формат изображения

Использование неправильного формата изображения может привести к увеличению объема ваших страниц. Всего:

  1. использовать JPG для фотографий
  2. использовать PNG для всего остального.

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

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

  • JPG - это формат с потерями с качеством от 0 (плохой, меньший файл) до 100 (лучший, большой файл). Большинство изображений будут выглядеть нормально где-то между 30 и 70, но поэкспериментируйте, чтобы найти наименьшее приемлемое значение.
  • PNG доступен в 256 и 24-битных цветовых вариантах. Если вам не нужна прозрачность и вы можете ограничить цветовую палитру, 256-цветная версия может лучше сжать.

8. Изменение размера больших изображений

Смартфон начального уровня с 3-мегапиксельной камерой создает изображение, слишком большое для отображения на веб-странице.К сожалению, редакторы контента загружают изображения прямо со своей камеры. Рекомендуется небольшое образование и автоматическая система изменения размера.

Размеры изображения никогда не должны превышать максимальный размер контейнера. Если ваш шаблон имеет максимальное пространство 800 пикселей по горизонтали, изображение не будет нуждаться в большей ширине. Тем не менее, те, кто использует дисплеи высокой плотности / Retina, могут оценить изображение двойной ширины 1600 пикселей, но это все равно меньше, чем у стандартной камеры.

Изменение размера изображений существенно влияет на вес страницы.Уменьшение размеров изображения на 50% уменьшает общую площадь на 75% и должно значительно уменьшить размер файла.

9. Сжать изображения дальше

Даже если вы переключились на правильный формат и изменили размеры, можно дополнительно уменьшить файлы изображений с помощью инструментов, которые анализируют и оптимизируют графику. К ним относятся OptiPNG, PNGOUT, jpegtran и jpegoptim. Большинство из них можно установить как автономные исполняемые файлы или интегрировать в процесс сборки. В качестве альтернативы онлайн-инструменты, такие как Smush.он может работать в облаке.

10. Удалите ненужные шрифты

Веб-шрифты произвели революцию в дизайне и снизили потребность в графическом тексте. Однако пользовательские шрифты имеют определенную стоимость и могут добавить на вашу страницу несколько сотен килобайт. Если вы используете более двух или трех шрифтов, возможно, вы перестарались. Вашему клиенту / начальнику могут нравиться ужасные рукописные шрифты, но если они используются только для одного заголовка, стоит ли загружать файл шрифта размером 200 КБ?

Я подозреваю, что многие сайты могут снизить свой вес на 30-50% с помощью нескольких часов усилий со стороны не разработчика.Для обычного сайта это экономия более 800 КБ, и он станет заметно быстрее.

У вашего сайта все еще избыточный вес? Некоторые более жесткие решения

Но если после выполнения этих действий ваши страницы все еще страдают ожирением, вы можете рассмотреть более радикальные варианты диеты.

1. Удалить кнопки социальных сетей

Есть ли на ваших страницах кнопки публикации в Facebook, Twitter, Google+ и LinkedIn? Это 580 КБ контента, который вы предоставляете разочарованным конечным пользователям.По большей части это JavaScript, который должен выполняться браузером, а некоторые сети требуют, чтобы он был загружен до того, как появится ваш контент.

Раздутые социальные виджеты совершенно не нужны - вы можете добавить обезжиренные социальные кнопки на свои страницы с помощью нескольких строк HTML. Небольшой объем JavaScript может постепенно улучшить работу и показать всплывающее окно на настольных устройствах.

Хотя простые кнопки не отображают статистику кликов, вы можете получить гораздо больше информации с помощью отслеживания событий в Google Analytics.

2. Проверить все сторонние виджеты

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

Если вам необходимо использовать виджет, подумайте о том, что лучше написано. В идеале JavaScript виджета должен быть легким, загружаться в конце страницы, но иметь возможность размещать контент в указанном HTML-контейнере.В качестве альтернативы…

3. Рассмотрите возможность отложенной загрузки или содержимого по запросу

Предположим, вы показываете видео, размещенное у специализированного провайдера. Хотя видео загружается только тогда, когда пользователь нажимает кнопку «воспроизведение», вы, вероятно, загружаете код API видео и другие связанные ресурсы, независимо от того, воспроизводит пользователь видео или нет. Почему бы не загрузить весь этот контент по запросу пользователя?

Вы также можете рассмотреть изображения и контент по запросу, загружаемые по мере прокрутки страницы пользователем.Я не фанат этой техники; потенциально это может отрицательно повлиять на удобство использования или SEO. Однако это полезно для некоторых типов веб-приложений, например для галерей изображений.

4. Заменить изображения эффектами CSS3

Вы нарезаете изображения для создания градиентов, закругленных границ и теней? Надеюсь, что нет - CSS3 делает такие методы излишними.

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

Эффекты

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

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

5. Замените JavaScript эффектами и анимацией CSS3

Ваш JavaScript засорен эффектами $ ("# x"). Fade () и $ ("# y"). SlideDown () ? Возможно, это было необходимо несколько лет назад, но анимация, переходы и преобразования CSS3 в значительной степени вытеснили эффекты JavaScript. Причины:

  1. CSS3-анимация изначально обрабатывается браузером; если все сделано правильно, это часто будет намного быстрее и плавнее, чем выполнение JavaScript.
  2. CSS3-анимацию проще писать и требует значительно меньше кода.
  3. CSS3 предлагает трехмерные преобразования, которые чрезвычайно сложно - если не невозможно - в одном только JavaScript без специальной библиотеки.

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

6. Рассмотрите возможность масштабирования векторной графики (SVG)

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

SVG

подходят не для всех ситуаций. Фотографии и сложные изображения всегда будут лучше в формате JPG или PNG. Однако обычно уместны логотипы, диаграммы и диаграммы. Более того, SVG-файлами можно управлять на клиенте с помощью CSS и JavaScript.

Существуют инструменты, которые конвертируют растровые изображения в векторный формат, но если начать с нуля, это даст наилучшие результаты.Такие пакеты, как Illustrator, Inkscape и SVG edit, обеспечивают хорошее начало, хотя изучение основ XML поможет вам создать более чистый код.

7. Заменить изображения иконочными шрифтами

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

Вы можете использовать специальный шрифт или, для оптимальной экономии трафика, использовать такой инструмент, как Fontello, IcoMoon или Flaticon, для создания пакета шрифтов, содержащего нужные вам значки.

8. Используйте спрайты изображений

Растровые изображения должны быть последним выбором после отклонения параметров CSS3, SVG и значков. Часто используемые растровые изображения могут быть упакованы в один файл спрайта, поэтому отдельные изображения могут быть доступны в CSS, например

  .sprite { ширина: 16 пикселей; высота: 16 пикселей; фон: url ("спрайт.png ") 0 0 без повтора; } .sprite.help {background-position: 0 -16px; } .sprite.info {background-position: 0 -32px; } .sprite.user {background-position: 0 -48px; }  

Достоинства:

  1. Для загрузки спрайта требуется один HTTP-запрос.
  2. Один спрайт обычно приводит к меньшему общему размеру файла, чем общий вес отдельных изображений.
  3. Все изображения появляются после загрузки спрайта.

Спрайты изображений могут быть созданы в графическом пакете или с помощью таких инструментов, как Sprite-Cow и Instant Sprite.Вы также можете включить создание спрайтов в свой рабочий процесс Grunt.

9. Используйте URI данных

URI данных кодируют двоичные и текстовые ресурсы, как если бы они были внешними ресурсами. Растровые изображения и SVG можно кодировать непосредственно в HTML, JavaScript или, что более полезно, в CSS:

  .bullet { фоновое изображение: URL ( "данные: изображения / PNG; base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD /// + l2Z / dAAAAM0lEQVR4nGP4 / 5 / ч / 1 + G / 58ZDrAz3D / McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA / A6P9 / AFGGFyjOXZtQAAAAAElFTkSuQmCC"); }  

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

Инструменты, такие как DataURL.net и data: URI Generator, преобразуют файлы в URI данных за вас.

10. Используйте инструменты оценки веб-сайта

Вы не узнаете, была ли ваша диета успешной, если не будете отслеживать вес своей страницы и, как следствие, повышение скорости загрузки. Могут помочь консоли разработчика браузера и бесплатные онлайн-инструменты, такие как Google Page Speed ​​Insights. Полный список будет представлен в моей следующей статье, прежде чем мы обсудим более радикальные, похожие на липосакцию техники снижения веса страницы в последней части этой серии.

Сайт все еще недостаточно развит? Еще несколько радикальных решений

Веб-страницы жесткие диеты. Вы можете внести быстрые исправления. Возможно, вы предприняли более жесткие меры, например, оптимизировали CSS и JavaScript. Но вся ваша огромная работа отбрасывается, как только ваш босс / клиент требует еще один блестящий новый виджет, легкомысленную кнопку социальных сетей или дурацкий шрифт.

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

1. Никогда не доверяйте стороннему коду

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

2.Одной библиотеки JavaScript более чем достаточно

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

Также стоит рассмотреть более крайние варианты:

  1. Можно ли получить индивидуальную сборку, если вы не используете все функции библиотеки?
  2. Существуют ли облегченные альтернативы, такие как Zepto.js или Minified.js, которые обеспечивают API-четность с основными методами jQuery?
  3. Требуется ли библиотека? Если он в первую очередь используется для устранения несоответствий в браузере, возможно, этих проблем больше не существует.Вы пользуетесь библиотекой, потому что она знакомая и удобная?

3. Остерегайтесь шаблонов CMS

Некоторые системы управления контентом создают лишние страницы… , но затем вы начинаете добавлять материал .

Бесплатный или коммерческий шаблон может иметь финансовый смысл. Зачем нанимать разработчика, если готовый код делает все, что вам нужно, за несколько долларов? Они могут быть идеальными для сайтов с простыми брошюрами, но здесь есть скрытая стоимость. Общие шаблоны должны продаваться сотнями, если не тысячами копий, чтобы окупить затраты на разработку.Чтобы привлечь покупателей, разработчики объединяют все возможные функции; вы можете использовать только часть из них, но они все еще существуют в коде страницы.

Возможно, мне не повезло, но темы WordPress, с которыми я сталкивался, часто имеют размер более 2 МБ. Я уверен, что есть легкие варианты, но найти один - другое дело.

4. Вырезать жир каркаса

Фреймворки

Boilerplate, такие как Bootstrap и Foundation, полезны для создания прототипов или в качестве отправной точки для нового проекта.К сожалению, как и общие шаблоны, они содержат CSS, JavaScript и другие ресурсы, которые вам никогда не понадобятся. HTML также имеет тенденцию быть довольно многословным и замусорен бессмысленными именами классов.

Лично я предпочитаю лего-подобный модульный подход в веб-разработке (это классические блоки lego, а не пакеты, которые ограничивают вас только одной конкретной вещью) . Вы начинаете с нуля и добавляете необходимые компоненты. Каркасы больше похожи на лепку из мрамора; вы отбрасываете ненужные части, пока сайт не будет готов.Так и должно быть, но проще оставить вещи внутри.

Я не скажу «не использовать фреймворки» , но имейте в виду, что они несут дополнительный объем. Такой инструмент, как grunt-uncss, может помочь удалить ненужный код, но никогда не добавлять код фреймворка может быть предпочтительнее.

5. Используйте прогрессивные улучшения

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

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

6. Принять процесс сборки

Перед развертыванием убедитесь, что вы сделали все, чтобы уменьшить количество файлов изображений, CSS и JavaScript. Это может быть ручной процесс, но инструменты автоматизации, такие как Grunt.js и Gulp.js, могут сделать его достаточно безболезненным.

7. Знай свой код

Препроцессоры CSS и JavaScript, такие как Sass, LESS, Stylus, CoffeeScript, TypeScript и Dart, возможно, революционизировали вашу производительность и рабочий процесс. Однако источник абстрагируется от окончательно сгенерированного кода.Вывод препроцессора хорош настолько, насколько хорош ввод, и можно непреднамеренно программно добавить тысячи лишних строк. Поэтому всегда проверяйте эффективность вывода.

8. Рассмотрим автономный AppCache

Веб-приложения

могут работать в автономном режиме с помощью HTML AppCache. AppCache можно использовать для дополнения или улучшения кеширования в браузере регулярно используемых ресурсов.

9. Упростите свой сайт

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

  1. ошибочно думают, что большее количество функций привлекает больше клиентов,
  2. считают, что они получают от своего разработчика более выгодное соотношение цены и качества, а
  3. они не знают ничего лучше.

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

10. Измените свой образ жизни развития

Кто виноват в том, что средний размер веб-страницы достигает 1,7 МБ? Разработчики. Неважно, как и почему сайт стал тучным; разработчик позволил этому случиться.

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

Облегченные страницы являются прямым результатом эффективных методов кодирования и должны быть важным аспектом для любого проекта. К сожалению, выполнение этого часто отправляется в корзину «сделаем позже» вместе с тестированием контента, SEO и юзабилити. Мои предложения:

  1. О проблемах с пропускной способностью легко забыть, если вы используете быстрое соединение со скоростью 50 Мбит / с. Ограничьте возможность подключения или попробуйте загрузить свой сайт в зоне с плохим приемом 3G или в загруженной сети Wi-Fi отеля. Ваше разочарование могут испытывать тысячи пользователей каждый день.
  2. Учитывайте вес страницы в каждом проекте и подвергайте сомнению каждый ресурс, добавленный на страницу. Этот шрифт нужен? Можете ли вы уменьшить размер фонового изображения? Может ли анимация CSS3 заменить эту библиотеку JavaScript? пр.
  3. Измени свое отношение. Ожирение веб-страниц - это эпидемия, но очевидно, что немногих разработчиков это волнует. Создание тонких страниц - ценный навык, который поможет вам выделиться из толпы.

Инструменты, которые помогут вам измерить свой успех

Если вы не будете постоянно контролировать вес страницы, вы не узнаете, как продвигается ваша диета.Средняя страница сейчас превышает 1,7 МБ и только за 2013 год увеличилась на 32%. Если ваши разработчики тайно пожирают жирные виджеты, любой из следующих инструментов оценки подчеркнет их прожорливость. Все они бесплатны, и их запуск занимает несколько секунд - что это за и за…

1. Pingdom

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

2. Дополнение для веб-разработчиков Firefox

Панель инструментов веб-разработчика Криса Педерика существует с самого начала создания (Firefox). Чтобы использовать его для просмотра как сжатого, так и несжатого размера страницы, выберите Просмотреть размер документа в меню Информация .

Обратите внимание, что Web Developer доступен как расширение Chrome, но, к сожалению, не имеет этой функции.

3. GTmetrix

GTmetrix показывает агрегированный отчет, созданный с помощью Google PageSpeed ​​Insights и YSlow, а также дополнительную информацию, такую ​​как общий размер страницы и количество запросов.Онлайн-инструмент лучше, чем обе системы, хотя вы все равно можете использовать их по отдельности.

4. Google PageSpeed ​​Insights

PageSpeed ​​Insights не показывает общий вес страницы или статистику скорости загрузки, но показывает, где можно внести улучшения как для настольных, так и для мобильных устройств. Сайтам присваивается 100 баллов, поэтому вы можете быстро оценить, как идут улучшения.

5. YSlow

Yahoo's YSlow - это онлайн-инструмент и подключаемый модуль, доступный для большинства браузеров.Как и PageSpeed ​​Insights, он оценивает страницы и выставляет оценку от A (вы сделали все, что могли) и F (вы терпите неудачу) по ряду факторов.

6. Консоли разработчика браузера

Если вы не хотите использовать что-либо новое, инструменты Firebug, Chrome Inspector, Firefox Web Developer и IE Developer предлагают анализаторы сети и профилировщики, которые помогут оценить размер ваших страниц. Обратите внимание, что они не обязательно будут загружать кешированные ресурсы, поэтому вам может потребоваться использовать Ctrl + F5 или очистить кеш перед тестированием.

7. Тест скорости веб-сайта PageScoring

Если вам нужен быстрый и простой инструмент, веб-сайт Speed ​​Test сделает вашу работу. Он концентрируется на времени загрузки, но также отображаются размеры файлов и время загрузки для каждого отдельного файла, что может быть полезно для выявления проблемных областей.

8. Тест скорости восходящего тренда

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

9. Инструмент Page Speed ​​Tool

Инструмент

Page Speed ​​Tool хорошо представлен и выделяет размеры файлов, ресурсы, группы ресурсов и скорость загрузки. Обратите внимание, что предполагаемое время загрузки рассчитывается только для источника HTML, а не для всех файлов. Однако вы можете получить точную оценку общего времени загрузки, изучив прилагаемую каскадную диаграмму.

10.Анализатор веб-страниц

Если вы можете простить его возраст и устаревший фиолетово-оранжевый дизайн, Web Page Analyzer предоставляет ряд статистических данных о размере файла, а также оценку времени загрузки для модемов, вплоть до 14,4 КБ!

Уф!

Надеюсь, вы нашли это исчерпывающее руководство полезным, и, по крайней мере, некоторые из представленных решений помогли избавиться от жира. Желаем удачи в новом режиме похудения!

.

Как провести внутреннюю оптимизацию сайта: подробное описание

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

Внутренние ссылки - это ссылки внутри одного и того же сайта (когда страница из одного домена ссылается на страницу того же домена). Внешние ссылки соединяют страницы из разных доменов.С точки зрения SEO у них есть существенные различия. Обратная ссылка влияет на рейтинг страницы в целом (вес), а также на привязку ссылки (фактор ссылки).
Фактор ссылки - это влияние текста (привязки) ссылки на позиции на запросы, близкие к тексту ссылки.

Вес страницы (статический вес, Page Rank) - это влияние ссылки на позиции для всех запросов. Вес страницы не зависит от поискового запроса. Поэтому он называется статическим. Если текст страницы не имеет отношения к запросу, сам вес не может вывести страницу наверх.В противном случае по всем запросам главная страница Википедии или Google будет ранжироваться первой.

Внутренние ссылки не обеспечивают рейтинг ссылок. Они имеют вес, то есть якоря (тексты) внутренних ссылок не нужны. Хотя, что принято во внимание:

. .

python - автоматически определять естественный язык страницы веб-сайта по URL-адресу

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий