Если ваш сайт движется как один из этих ленивцев из DMV в Zootopia, есть способы, которыми вы можете исправить то, что замедляет его. Выяснить, что является причиной проблемы, - это полдела, поэтому, как только вы определите причины, у вас, по крайней мере, будут ответы на решение проблемы.
Низкокачественный хостинг - наиболее вероятный виновник
Когда речь заходит о веб-хостинге, концепция низкого качества не всегда означает то же самое, что и в других контекстах. Например, цена, которую вы платите за хостинг, не всегда является точным отражением качества, которого вы можете ожидать. Не популярность сервиса и не известность бренда.
Фактически, некоторые из самых популярных брендов хостинга - худший выбор, просто потому что слишком много людей используют их. Это зависит немного от качества их инфраструктуры. Если они правильно инвестируют в свои технологии, то у вас могут не возникнуть существенных проблем с производительностью. С другой стороны, вы можете использовать один сервер совместно с сотнями других сайтов, и эта проблема будет увеличиваться по мере увеличения емкости дискового хранилища.
Поэтому в этой ситуации возможно, что переключение на меньшую, менее известную службу веб-хостинга с хорошей технологией может быть лучшим выбором. Это также может означать, что вы получите больше персонального обслуживания клиентов на более высоком уровне качества, чем вы бы получили от бегемота. Об этом стоит подумать, и это легко проверить, просто купив месячную подписку на новом хосте и сравнив производительность с вашим существующим сайтом.
Используйте свой ключ F12
Большинство веб-браузеров настроены на доступ к их консоли отладки через ключ F12, и ваш, скорее всего, не исключение. И если говорить об исключениях, это почти то, что вы ищете, или, если быть точным, ошибки в вашем JavaScript-коде, которые вызывают исключения и влияют на производительность.
Вы найдете эти ошибки как в своем собственном коде, так и в импортированных библиотеках кода, таких как jQuery. Тот факт, что jQuery большой и популярный, не означает, что он безупречен. Вот пример того, что вы ищете:
Ошибки, помеченные синим цветом, являются просто ошибками CSS, и вы, как правило, можете ожидать, что они появятся из-за большого количества мерцаний, которые приходится делать разработчикам при создании таблиц стилей, просто потому, что до сих пор нет единого стандарта, который был бы принят во всех браузерах. Обычно они не должны влиять на производительность, если вы не используете много анимации или эффектов перехода.
Но эта ошибка, помеченная оранжевым, является ошибкой JavaScript, и не только это, в данном случае это джекпот, потому что он говорит нам, что именно эта ошибка приведет к очень медленному выполнению кода.
Получите бесплатный совет от Google
Знаете ли вы, что Google может бесплатно проанализировать вашу веб-страницу и дать советы о том, как решить любые проблемы? Все, что вам нужно сделать, это посетить страницу Google Page Speed Insights и ввести URL-адрес страницы, которую вы хотите проанализировать.
Это действительно не может быть проще, хотя вы не обязательно хотите неукоснительно следовать всем их советам. Система Google хороша в определении того, что может замедлить работу вашей страницы, но некоторые исправления могут решить не столько проблем, сколько они создают.
В идеале вы хотите видеть оценки выше 85. Хотя никто не знает наверняка, считается, что время загрузки страницы оказывает значительное влияние на рейтинг страницы в Google. Не отчаивайтесь, если ваш сайт находится не на вершине зеленой зоны, потому что многие крупные сайты не получают фантастических результатов.
Некоторые известные примеры включают в себя:
- http://bbc.com (70m/77d)
- http://cnn.com (47m/65d)
- http://whitehouse.gov (58m/56d)
- http://microsoft.com (49m/71d)
- http://apple.com (61m/72d)
- http://linux.com (33m/44d)
- http://ubuntu.com (69m/81d)
- http://linuxmint.com (59m/67d)
- http://youtube.com (53m/69d)
- http://facebook.com (49m/81d)
Ни один из этих примеров не является оправданием того, что ваш собственный сайт работает плохо, но они доказывают, что вялый сайт не обязательно является синонимом сбоя.
Используйте изображения правильно
Если бы кто-нибудь знал правильное изображение formatы использовать и когда, это должны быть дизайнеры, не так ли? Но удивительно, что многие из вас не знают, а когда знают, то думают, что это не имеет значения. Что ж, вот новости: это всегда имеет значение.
Эта проблема набирает обороты с тех пор, как определенный стиль шаблона был принят в качестве стандарта defacto для бизнес-сайтов, и эта тенденция не имеет признаков замедления. Как профессиональный дизайнер, вы должны сами и своим клиентам не попасться в ловушку ленивых ярлыков дизайна.
Одним из этих неудачных ярлыков было использование больших изображений PNG для героев в верхней части страницы (или где-либо еще, но там вы обычно их найдете). Теперь само собой разумеется, что вы никогда не должны этого делать, даже если вам требуются прозрачные участки на изображении.
Вот основные принципы, которые вы должны учитывать при создании этого шедевра:
- Используйте большие изображения экономно, если вообще
Большие изображения - ужасная идея, потому что чем больше изображение, тем больше времени требуется для его загрузки. Теперь есть несколько различных методов, которые вы можете использовать для того, чтобы большие изображения работали намного эффективнее, но прежде чем мы углубимся в это, давайте просто скажем, что вы должны использовать меньшие изображения большую часть времени и сохранять большие для тех случаев, когда они действительно необходимо.
- Установите значение PPI / DPI соответствующим образом
В зависимости от того, какой графический редактор вы используете, он может отображать значения для DPI или PPI. Последнее лучше, потому что это означает, что ваш графический редактор предназначен для использования в Интернете, а не для печати. Проблема с изменением DPI в некоторых версиях PhotoShop заключается в том, что они будут настраивать не только DPI, но и физические размеры вашего изображения. Это не проблема в последней версии PhotoShop (которая использует PPI), поэтому, если вы используете более старую версию, пришло время обновить. Или используйте вместо этого GIMP.
- Нарезать большие изображения
Здесь начинается магия. Вы найдете много людей, говорящих вам, что нарезка изображений не улучшает время загрузки, потому что вы все еще загружаете такое же количество байтов, и любое воспринимаемое улучшение является просто психологическим. Эти люди используют самую ленивую версию нарезки изображений, поэтому они не знают истинных возможностей.
После нарезки изображения у вас есть возможность оптимизировать его. Предположим, исходное изображение было в формате PNG. format, теперь вы можете конвертировать любые непрозрачные части в JPG format, и сэкономите много байтов, оставив части, требующие прозрачности, в виде изображений PNG.
Затем вы можете поиграть с уровнем сжатия каждого вdiviдвойной срез, пока он не будет идеально оптимизирован. Общий эффект от этой оптимизации может привести к экономии более 50% по сравнению с исходным неоптимизированным изображением.
Видео тоже можно оптимизировать
Искусство сжатия видео опирается на две вещи: цель format и кодек, который вы используете для кодирования. Который format вы выбираете полностью зависит от ваших потребностей. В общем, если вам нужно высокое качество, MP4 с кодировкой H.264 обеспечит наилучшее качество при высоком сжатии, но когда вам не нужно такое высокое качество, WebM и FLV обеспечат файлы меньшего размера. Ваше программное обеспечение для редактирования видео может по-прежнему предлагать FLV в качестве опции, но использовать его не рекомендуется. format.
Если вам нужно качество DVD, MP4 с кодировкой H.264 даст отличные результаты, но его стоимость будет стоить огромной загрузки. Для потокового видео WebM дает намного лучшее сжатие. Проблема в том, что еще не все мобильные операционные системы поддерживают WebM (они должны, но, похоже, у них есть какая-то сумасшедшая причина не делать этого, возможно, следуя золотому правилу разработчика мобильных приложений: вы будете доставлять неудобства и вводить в заблуждение клиента столько, сколько сможете).
Стоит ли использовать кодек MPEG-4 вместо H.264 с видео MP4? Как правило, нет, потому что это приводит к увеличению размера файла при том же уровне качества. Но если ваше видео будет иметь небольшие физические размеры и вам нужна идеальная передача видео для потоковой передачи, MPEG-4 является хорошим кодеком, поскольку он имеет встроенную коррекцию ошибок для обеспечения целостности данных.
Как насчет WMV? Ну, это особый случай. Он обеспечивает практически то же качество видео, что и MP4, но с еще лучшим сжатием. Недостатком является то, что пользователи Mac и iOS могут просматривать ваше видео только в том случае, если они используют платный видеопреобразователь, что приводит к задержке воспроизведения, чего мы и старались избегать при оптимизации нашей страницы.
Файлы WMV не имеют проблем для пользователей Android, Windows или Linux. Но с 12.5% интернет-сообщества, использующего устройства Apple, вам придется решить, стоит ли им причинять неудобства. Лично я бы не советовал вам делать это просто, чтобы ускорить загрузку.
И, наконец, поскольку это интернет-видео, если вы не разрешаете воспроизведение в полноэкранном или театральном режиме, уменьшите физический размер видео до размера, который вы будете показывать на своей странице, и посмотрите, сколько байтов вы можете сохранить. ,
Комментарии Ответы 0