Безплатна JavaScript книга!

Напишете мощен, изчистен и поддържаем JavaScript.

страниците

Тази статия е спонсорирана от Hosting Facts. Благодарим ви, че подкрепяте спонсорите, които правят възможна SitePoint.

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

Средното тегло на страницата е достигнало 2300 KB и се увеличава с около 15% всяка година. Възходът на проекти като Google Accelerated Mobile Pages, незабавни статии във Facebook и рекламни блокери подчертават разочарованието на потребителите от създадената от нас мрежа. Страници със затлъстяване:

  • се зареждат и изобразяват по-бавно
  • борба в мобилни мрежи и може да струва на потребителите пари
  • са по-малко отзивчиви на по-бавни устройства и смартфони
  • ще повлияе на класирането на вашата търсачка
  • са по-трудни за актуализиране и поддръжка.

Малко разработчици си правят труда да оптимизират своите сайтове, така че защо трябва?

Причината: няма недостатък. Класирането на вашата търсачка се подобрява. Потребителите ви се възползват от по-лъскавото изживяване. Вашите реализации се увеличават. Вашите хостинг такси падат. За разлика от реалния живот, най-драстичното отслабване може да бъде постигнато с минимални усилия ...

Инструменти за анализ на сайта

Оценете мащаба на всички проблеми, преди да направите промени. Предлагат се няколко безплатни инструмента, които отчитат броя на заявките, размерите на файловете и скоростта на отговор на сървъра. Някои предоставят предложения за подобрение.

Като алтернатива използвайте Мрежа или Инструменти за профилиране в инструментите за разработка на вашия браузър, за да оцените вашия сайт. Направете копие на статистическите данни, за да можете по-късно да сравнявате подобренията.

Следващите раздели предлагат предложения за оптимизация, започвайки с най-лесните промени.

Намерете подходящ уеб хост

Вашият сайт може да е отнел значително време и пари за създаването му. Ако наистина го хоствате на услуга от $ 5 на месец?

Отделете време, за да прецените дали имате нужда от място на споделен сървър, собствен личен сървър или облачен виртуален сървър. Прочетете отзиви за хостинг на сайтове като Hosting Facts и потърсете съвет от други с подобни изисквания. В този момент те предлагат да се използва A2 хостинг или малък оранжев.

Използвайте мрежа за доставка на съдържание (CDN)

Браузърите ограничават HTTP заявките между четири и осем едновременни връзки на домейн. Зареждането на 40 страници активи наведнъж не е възможно - файловете се поставят на опашка във всяка нишка на заявката.

Освен това вашите потребители могат да се намират на различно географско местоположение от вашия сървър. Потребител във Франция ще види по-бърза реакция от сървър, базиран в Обединеното кралство, отколкото подобен хардуер в Австралия.

CDN увеличава скоростта на изтегляне, като разпространява активите на уебсайта на други сървъри. Тези машини могат да бъдат физически по-близо до потребителя и да работят от различни домейни, което повече от удвоява ограниченията за HTTP заявки.

CDN стават по-лесни за използване и много автоматично обработват активи, след като сте конфигурирали настройките на DNS. Популярните опции включват:

Активирайте GZIP компресия

Около една трета от уебсайтовете не позволяват компресиране на Gzip, но това може драстично да намали количеството данни, изпратени до браузъра. Gzip компресията често се задава от вашия уеб хост на сървъра - свържете се с тях за допълнителни съвети.

Активиране на кеширането

Кеширането гарантира, че браузърът изтегля файлове с активи веднъж. Локалната версия се запазва, докато уебсайтът ви не го инструктира да изтегли актуализация. Зареждането на първата страница няма да бъде по-бързо, но последващото зареждане на страницата ще бъде значително подобрено.

Има приставки за системи за управление на съдържанието като WordPress, които улесняват кеширането, напр. W3 Общ кеш или WP Супер кеш.

Други системи могат да възприемат технологии като Expires, Last-Modified, Keep-Alive или Etag в HTTP заглавката. Вашият хост може да предостави опции за конфигуриране или вие можете да определите свои собствени. Например настройка на Apache .htaccess за кеширане на всички изображения за един месец:

Оптимизирайте медиите си

Изображенията представляват повече от 60% от теглото на страницата. Средната страница изисква 55 отделни изображения с 1,457KB, 126KB шрифтове, 400KB видео и 45KB Flash. Това изглежда леко абсурдно, като се има предвид настоящата тенденция към опростени, едноцветни плоски дизайни!

Първата стъпка: премахнете ненужните активи. Имате ли нужда от този фонов видеоклип, изображение на герой, курсив шрифт или 300 икони, които малко хора някога ще видят? Можете ли да използвате подмножество на шрифт? Бихте ли могли да замените някои изображения с CSS3 ефекти като градиенти или граници?

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

  • SVG е подходящ за линейни диаграми
  • Уеб шрифтовете може да са опция за едноцветни икони
  • PNG или може би GIF е най-подходящ за по-малки изображения с ясни цветови дефиниции като икони, бутони и екранни снимки
  • JPG е най-подходящ за снимки или всичко, където фините детайли са по-малко важни.

Ако се съмнявате, експериментирайте с различни типове, докато намерите най-добрия компромис между качеството и размера на файла.

Големите изображения трябва да бъдат преоразмерени, за да се намали разделителната способност. Камерата за смартфон от начално ниво създава снимки с висока разделителна способност от няколко мегабайта, но рядко се нуждаете от изображение с широчина над 2000 пиксела за най-доброто от днешните екрани.

След това: уверете се, че вашите изображения са с оптимален размер. Малко графични пакети премахват всички възможни данни и повечето ще запазят ненужните цветове или EXIF ​​метаданни като дати, местоположения и настройки на камерата. Еднократни задачи за компресиране могат да бъдат постигнати с помощта на онлайн инструменти като TinyPNG/JPE или smush.it. Инсталируемите инструменти за обработка като OptiPNG, PNGOUT, jpegtran и jpegoptim могат да компресират групово изображения. Можете да въведете системи за компресиране като imagemin във вашия процес на изграждане или потребителите на CMS имат опции като WP Smush, които автоматично компресират качени файлове.

По-малки изображения могат да се комбинират в един спрайт за изображения, за да се намали броят на HTTP заявките. Това има по-малко предимство в HTTP/2, но иконите, използвани на всяка страница, все още могат да се възползват от комбинирането.

И накрая, помислете за кодирани от Base64 вградени URI данни за по-малки, редовно използвани изображения, напр.

Това намалява броя на заявките, въпреки че поддръжката може да бъде по-трудна. Онлайн инструменти като DataURL.net и data: URI Generator са подходящи за еднократни реализации. Може да има и приставки за кодиране за вашия редактор/IDE, но най-лесното решение е PostCSS Assets - приставка PostCSS - която магически преобразува всяко изображение, напр.

Обединете и умалете CSS и JavaScript

Средната страница зарежда 360KB JavaScript, разпределени в 22 отделни файла и 76KB CSS в 8 таблици със стилове. Някои от тях могат да бъдат предоставени от външни социални медии или рекламни джаджи, но вашите собствени файлове могат да бъдат:

  1. Обединени за присъединяване на целия код в един файл за намаляване на HTTP заявки и
  2. Минимизиран за премахване на ненужни коментари и празно пространство. По-екстремните инструменти могат да преименуват променливи и функции на по-кратки алтернативи, напр. launchWidget () става w () .

За по-опростен графичен интерфейс инструмент като Koala предоставя опции за компресиране на CSS и JavaScript.

Предварителните процесори като Sass, LESS и Stylus или инструменти за изграждане, включително cssnano за PostCSS, могат да оптимизират CSS всеки път, когато направите промяна.

JavaScript може да бъде малко по-труден, тъй като редът на източника ще бъде критичен. Бихте могли да помислите за система като Browserify, за да групирате зависимости. Често използвам по-прости Gulp плъгини, включително:

  • gulp-deporder за контрол на зависимостите. Незадължителен коментар в горната част на всеки изходен файл определя подходящ ред, напр. // изисква: config.js, lib.js
  • gulp-concat за обединяване в един файл
  • gulp-strip-debug за премахване на конзолни и дебъгерни изрази
  • gulp-uglify за минимизиране.

HTTP/2 може да направи някои от тези техники излишни, ако използвате различни CSS и JavaScript активи на всяка страница, но все пак трябва да се има предвид при файлове, които се променят по-рядко.

Премахнете ненужния код

По-лесно е да добавите групово, отколкото да го премахнете, но подозирам, че можете да премахнете половината код от повечето сайтове, без да правите забележима разлика. Основните виновници:

CMS теми и шаблони

Повечето теми са общи, за да се харесат на широк кръг потребители. Можете да използвате само част от функциите, така че проверете дали е налична по-лека алтернатива.

CMS приставки

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

CSS рамки

Рамки като Bootstrap съдържат редица стилове - повечето от които никога няма да използвате. Инструменти като UnCSS могат да анализират вашите страници и да идентифицират ненужни правила.

JavaScript Frameworks

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

JavaScript ефекти

Прости ефекти като плъзгане и избледняване могат да бъдат приложени с помощта на леки CSS3 анимации и трансформации, а не по-малко ефективен JavaScript.

Приспособления за социални медии

Този безвреден бутон може да носи половин мегабайт скрит код. Те са рядко необходими - връзката е всичко, от което се нуждаете.

Реклама

Ако регистрирате до 57 рекламни мрежи, всяка ще предостави своя част от кода, която забавя вашия сайт. Оценете приходите си и пуснете по-малко печеливши джаджи.

По-нататъшни оптимизации

Горните опции ще направят забележима разлика в скоростта на уебсайта ви без отнемащи време промени. Повторно пуснете страниците си чрез инструментите по-горе, за да проверите спестяванията и да проверите дали използването и конверсиите са се увеличили.

За по-радикални оптимизации ...

Приемете процес на изграждане

Най-съвестният разработчик ще забрави да компресира изображение или да обедини CSS, когато е ръчна задача. Процесът на изграждане може да автоматизира досадни задачи в движение; лесно е да минимизирате JavaScript, когато е направено вместо вас, когато правите промяна.

Двете най-популярни опции са Gulp и Grunt, но има решения за повечето езици и системи. Първоначалната настройка ще отнеме малко време, но подобреният ви работен процес ще спести часове усилия по-късно.

Опростете своя дизайн

Много съвременни уебсайтове и приложения избягват сложността, за да осигурят рационализирано, фокусирано върху клиентите изживяване. Опростяването може да бъде трудно и често е по-лесно да започнете проекта отново. Поставете под въпрос всички заявки за функции или поискайте дадена функция да бъде премахната за всяка добавена от вас.

Помислете за статичен сайт

CMS е прекалено голям за повечето уебсайтове. Малцина получават повече от няколко актуализации седмично, но системата за управление на съдържанието продължава да работи във фонов режим, като изхвърля съдържанието на страницата, което рядко се променя. Алтернатива е статичният генератор на сайтове. Те предлагат много предимства на CMS като шаблони, но генерират поредица от плоски HTML файлове с по-добра производителност, сигурност и надеждност.

Променете начина си на развитие

Има малко оправдание за 2,3 МБ страници, когато съдържанието рядко надхвърля няколкостотин думи. Лесно е да пренебрегнете производителността, когато бързо разработвате сайт с минимални разходи. Но какъв е смисълът, когато резултатът е бавен, тромав продукт, който никой не иска да използва?

Планирайте изпълнението от самото начало. Вашите клиенти може да не оценят предимствата веднага, но дългосрочните награди от по-висок ранг и подобрената ангажираност ще помогнат на вашия проект да се открои. Обмисли:

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

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