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

Chapter 6: Check, Please!

I hope you’re feeling full after your extensive buffet of performance delicacies. Not all dishes will have been to your taste, but you should have found a few recipes to try.

The main reason we don’t have a fast and responsive web is because we let it become slow and bloated. Performance is rarely given equal priority with other features. In most cases, it’s never even acknowledged until someone complains about speed. Like SEO or usability, it’s possible to improve performance toward the end of a project—but it’s far more effective to implement it from the start.

Software development is a complex process, and it will always be possible to make optimizations. However, if you target the big, easy wins first, the tougher ...