book

Jump Start Web Performance

by Craig Buckler

February 2020

Intermediate to advanced

141 pages

2h 9m

English

SitePoint

Read now

Unlock full access

Notice of RightsNotice of LiabilityTrademark NoticeAbout SitePointAbout SiteGroundAbout Craig Buckler
Who Should Read This Book?Conventions UsedCode SamplesTips, Notes, and WarningsSupplementary Materials
The Cost of Poor PerformanceUser CostsBusiness CostsEnvironmental CostsThe Reason for the Woeful WebExcuse #1: “We Don’t Have a Performance Problem!”Excuse #2: “Our Users Never Complain?”Excuse #3: “Our Users Have High-end Devices”Excuse #4: “Our Customers Use Modern Browsers”Excuse #5: “We’ll Address Performance Later”Excuse #6: “Some Systems Require More Bandwidth and Processing”Excuse #7: “Expanding Page Weight is the Price of Progress”Excuse #8: “Slimming Pages Means Dumbing Down, with Fewer Features and Effects”Excuse #9: “Improving Performance Increases Complications and Maintenance”Excuse #10: “Our Client is Happy!”Where do I Start?
Create a Test PlanIdentify Performance BottlenecksPerformance Tool ConceptsThe Browser Rendering ProcessGoogle Lighthouse/Chrome AuditsDevTools’ Network PanelChrome’s Performance MonitorDeveloper Tools’ Performance PanelDevTools’ Console Logsperformance.now()Performance Marks and MeasuresWebPageTest.orgWebPageTest APIMore Performance Assessment Tools
Consider Your Hosting PlanShared HostingDedicated Server HostingVirtual Private Server (VPS) HostingCloud HostingSwitch to a More Appropriate Hosting OptionScale ResourcesSwitch HostsUse a Content Delivery NetworkUse Image and Video CDNsAsset ManagementOptimal Formatting and CompressionArt Direction, Sizing, and EffectsActivate Server CompressionActivate HTTP/2Leverage Browser CachingEnable CMS Page CachingAre Videos Necessary?Check Your Primary ImagesResize Large BitmapsChoose an Appropriate Image FormatAvoid Base64 EncodingCompress Images EffectivelyConcatenate and Minify CSSConcatenate and Minify JavaScriptMinify HTMLLoad JavaScript at the End of the PagePreload AssetsRemove Unused AssetsAssess Analytics PerformanceSomething More Substantial?
Optimize Your DatabaseUse a Query AnalyzerCreate IndexesSimplify QueriesCreate Additional Database ConnectionsConsider a Server or Memory UpgradeCache ResultsUse Background ProcessingUse Alternative Data SystemsRemove or Optimize Social Media ButtonsUse URL-based Share LinksUse the Web Share APIBe Wary of Third-party ScriptsUse Responsive ImagesDefine Responsive Image Aspect RatiosImplement Art DirectionLazy Load Images and IframesPlay Audio and Video on DemandReplace Images with CSS3 EffectsUse SVGs Effectively1. Add SVGs Using an <img> Tag2. Add SVGs as CSS Background Images3. Embed SVGs into the PageConsider Image SpritesConsider OS FontsEmbed Web Fonts with <link>Limit Font Styles and TextUse a Good Font-loading StrategyConsider Variable FontsUse Modern CSS3 LayoutsRemove Unused CSSBe Wary of Expensive CSS PropertiesEmbrace CSS3 AnimationsAvoid Animating Expensive PropertiesIndicate Which Elements Will AnimateUse CSS ContainmentCheck the Save-Data HeaderAdopt Progressive Web App Technologies1. Enable HTTPS2. Create a Web App Manifest3. Create a Service WorkerPower Down Inactive TabsConsider Inlining Critical CSSProvide Accelerated Mobile Pages (AMP)Feeling Full Yet?
Evaluate CMS Templates and PluginsReduce Client-side CodeOptimize JavaScript CodeUse JavaScript SparinglyAvoid Long-running TasksBind Events SparinglyAnalyze Modified CodeModify the DOM EffectivelyCache Regularly Used NodesMinimize ReflowsBatch-update StylesBatch-update ElementsUse requestAnimationFrameConsider Progressive RenderingUse Server-side RenderingDo You Need a JavaScript or CSS Framework?Use a Static Site GeneratorUse a Build SystemUse Progressive EnhancementAdopt a Performance BudgetCreate a Style GuideSimplify and StreamlineLearn to Love the Web

Content preview from Jump Start Web Performance

Preface

Despite working on the web every day, few developers have a good word to say about the monster they’ve created. Achingly slow sites with annoying overlays, cookie agreements, instant notifications, and obtrusive ads litter the web landscape.

While there may be some excuses for complex web applications, there’s little justification for sluggish content-based and ecommerce sites. People are notoriously impatient, and an unresponsive site receives fewer visitors and conversions.

This book provides advice, tips, and best practice for improving website performance.

Who Should Read This Book?

The performance options described in the following chapters range from quick, five-minute configuration changes to major website overhauls. We primarily ...