359:
Shift (CLS) and
Largest Contentful Paint (LCP) allow for website owner to gain insights into issues that might hurt the performance of their websites making it seem sluggish or slow to the user. Other metrics including Request Count (number of requests required to load a page), DOMContentLoaded (time when HTML document is completely loaded and parsed excluding CSS style sheets, images, etc.), Above The Fold Time (content that is visible without scrolling), Round Trip Time, number of Render Blocking Resources (such as scripts, stylesheets), Onload Time, Connection Time, Total Page Size help provide an accurate picture of latencies and slowdowns occurring at the networking level which might slow down a site.
236:(HTTP) request submitted when downloading a web page. These requests total the number of page elements required for download. However, a browser is limited to opening only a certain number of simultaneous connections to a single host. To prevent bottlenecks, the number of individual page elements are reduced using resource consolidation whereby smaller files (such as images) are bundled together into one file. This reduces HTTP requests and the number of "round trips" required to load a web page.
56:. Web performance also leads to less data travelling across the web, which in turn lowers a website's power consumption and environmental impact. Some aspects which can affect the speed of page load include browser/server cache, image optimization, and encryption (for example SSL), which can affect the time it takes for pages to render. The performance of the web page can be improved through techniques such as multi-layered cache, light weight design of presentation layer components and
99:
374:. Google publishes a library, the core-web-vitals library that allows for easy measurement of these metrics in frontend applications. In addition to this, Google also provides the Lighthouse, a Chrome dev-tools component and PageSpeed Insight a site that allows developers to measure and compare the performance of their website with Google's recommended minimums and maximums.
266:. Requests web browsers make are typically routed to the HTTP cache to validate if a cached response may be used to fulfill a request. If such a match is made, the response is fulfilled from the cache. This can be helpful for reducing network latency and costs associated with data-transfer. The HTTP cache is configured using request and response headers.
295:
of images and video reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on website performance. It is used to defer initialization of an object right until the point at which it is needed. The browser loads the images in a page or post
358:
In recent years, several metrics have been introduced that help developers measure various aspects of the performance of their websites. In 2019, Google introduced metrics such as Time to First Byte (TTFB), First
Contentful Paint (FCP), First Paint (FP), First Input Delay (FID), Cumulative Layout
272:
distinguishes discrepancies between codes written by web developers and how network elements interpret code. Minification removes comments and extra spaces as well as crunch variable names in order to minimize code, decreasing files sizes by as much as 60%. In addition to caching and compression,
215:. They employ several techniques that streamline web optimization tasks to decrease web page load times. This process is known as front end optimization (FEO) or content optimization. FEO concentrates on reducing file sizes and "minimizing the number of requests needed for a given page to load."
261:
to store copies of documents passing through their system. Subsequent requests from the cache may be fulfilled should certain conditions apply. Web caches are located on either the client side (forward position) or web-server side (reverse position) of a CDN. Web browsers are also able to store
76:
Steve
Souders coined the term "web performance optimization" in 2004. At that time Souders made several predictions regarding the impact that WPO as an "emerging industry" would bring to the web, such as websites being fast by default, consolidation, web standards for performance, environmental
72:
by
Patrick Killelea, some of the early techniques used were to use simple servlets or CGI, increase server memory, and look for packet loss and retransmission. Although these principles now comprise much of the optimized foundation of internet applications, they differ from current optimization
80:
One major point that
Souders made in 2007 is that at least 80% of the time that it takes to download and view a website is controlled by the front-end structure. This lag time can be decreased through awareness of typical browser behavior, as well as of how
222:—a group of proxy servers spread across various locations around the globe—is an efficient delivery system that chooses a server for a specific user based on network proximity. Typically the server with the quickest response time is selected.
247:(HTML). As web pages grow in complexity, so do their code files and subsequently their load times. File compression can reduce code files by as much as 80 percent, thereby improving site responsiveness.
304:
Since web browsers use multiple TCP connections for parallel user requests, congestion and browser monopolization of network resources may occur. Because HTTP/1 requests come with associated
68:
In the first decade or so of the web's existence, web performance improvement was focused mainly on optimizing website code and pushing hardware limitations. According to the 2002 book
277:
techniques (similar to those used with audio files) remove non-essential header information and lower original image quality on many high resolution images. These changes, such as
52:
Faster website download speeds have been shown to increase visitor retention and loyalty and user satisfaction, especially for users with slow internet connections and those on
377:
In addition to this, tools such as the
Network Monitor by Mozilla Firefox help provide insight into network-level slowdowns that might occur during transmission of data.
346:
Instead of a website's hosting server, CDNs are used in tandem with HTTP/2 in order to better serve the end-user with web resources such as images, JavaScript files and
281:
complexity or color gradations, are transparent to the end-user and do not noticeably affect perception of the image. Another technique is the replacement of
296:
when they are needed such as when the user scrolls down the page and not all images at once, which is the default behavior, and naturally, takes more time.
754:
730:
703:
679:
190:
120:
171:
577:
550:
523:
496:
124:
143:
540:
513:
821:
229:
394:
362:
Modules to measure metrics such as TTFB, FCP, LCP, FP etc are provided with major frontend JavaScript libraries such as
150:
233:
109:
773:
363:
269:
57:
128:
113:
244:
157:
953:
219:
464:
416:
139:
567:
225:
The following techniques are commonly used web optimization tasks and are widely used by web developers:
597:
486:
347:
254:
646:
797:
305:
442:
336:
330:
750:
726:
699:
675:
573:
546:
519:
492:
274:
164:
846:
286:
282:
204:
542:
Designing for
Sustainability: A Guide to Building Greener Digital Products and Services
515:
Designing for
Sustainability: A Guide to Building Greener Digital Products and Services
212:
73:
theory in that there was much less of an attempt to improve the browser display speed.
947:
208:
53:
918:
870:
350:(CSS) files since a CDN's location is usually in closer proximity to the end-user.
323:
292:
316:
98:
38:
17:
894:
240:
263:
250:
258:
34:
308:, web performance is impacted by limited bandwidth and increased usage.
367:
371:
822:"Front-End Performance Checklist 2021 (PDF, Apple Pages, MS Word)"
289:. Vector substitution is best suited for simple geometric images.
278:
342:
allows servers to "push" responses proactively into client caches
583:
207:(UX) when visiting a website and therefore is highly desired by
82:
621:
92:
49:
is the field of knowledge about increasing web performance.
798:"Measuring Web Performance in 2023: The Definitive Guide"
218:
In addition to the techniques listed below, the use of a
77:
impacts of optimization, and speed as a differentiator.
774:"Measuring performance - Learn web development | MDN"
647:"HTTP/2 – A Real-World Performance Test and Analysis"
723:
239:Web pages are constructed from code files such
262:content for re-use through the HTTP cache or
8:
27:Speed web pages are downloaded and displayed
491:. Sebastopol: O'Reilly Media. p. 480.
465:"Web performance optimization for everyone"
127:. Unsourced material may be challenged and
37:are downloaded and displayed on the user's
847:"Measuring Performance | Create React App"
417:"WPO | Preparing for Cyber Monday Traffic"
395:"Google Adds Site Speed To Search Ranking"
253:reduces server load, bandwidth usage and
191:Learn how and when to remove this message
747:Responsive Web Design with HTML5 and CSS
572:. Farnham: O'Reilly Media. p. 170.
518:. Boston: O'Reilly Media. p. 195.
386:
598:"Lazy loading - Web Performance | MDN"
545:. Boston: O'Reilly Media. p. 56.
203:Web performance optimization improves
768:
766:
717:
715:
329:can therefore use one connection for
7:
125:adding citations to reliable sources
672:Mobile Web Performance Optimization
622:"HTTP/2 Frequently Asked Questions"
919:"User-centric performance metrics"
43:Web performance optimization (WPO)
25:
257:. CDNs use dedicated web caching
97:
696:The Web Performance Collection
339:compression to reduce overhead
326:instead of ordered and blocked
1:
230:Transmission Control Protocol
60:with server side components.
33:refers to the speed in which
285:with resolution-independent
311:Compared to HTTP/1, HTTP/2
234:Hypertext Transfer Protocol
232:(TCP) connections for each
228:Web browsers open separate
970:
485:Killelea, Patrick (2002).
58:asynchronous communication
569:High Performance Websites
245:Hypertext Markup Language
251:Web Caching Optimization
220:content delivery network
566:Souders, Steve (2007).
89:Optimization techniques
488:Web Performance Tuning
443:"Web First for Mobile"
70:Web Performance Tuning
778:developer.mozilla.org
602:developer.mozilla.org
348:Cascading Style Sheet
871:"@nuxtjs/web-vitals"
851:create-react-app.dev
121:improve this section
47:website optimization
539:Frick, Tim (2016).
512:Frick, Tim (2016).
300:HTTP/1.x and HTTP/2
626:HTTP Working Group
463:Bellonch, Albert.
319:instead of textual
826:Smashing Magazine
270:Code minification
201:
200:
193:
175:
140:"Web performance"
16:(Redirected from
961:
941:
933:
932:
930:
929:
915:
909:
908:
906:
905:
895:"vue-web-vitals"
891:
885:
884:
882:
881:
867:
861:
860:
858:
857:
843:
837:
836:
834:
833:
818:
812:
811:
809:
808:
794:
788:
787:
785:
784:
770:
761:
760:
743:
737:
736:
719:
710:
709:
692:
686:
685:
668:
662:
661:
659:
657:
643:
637:
636:
634:
632:
618:
612:
611:
609:
608:
594:
588:
587:
586:on 8 March 2019.
582:. Archived from
563:
557:
556:
536:
530:
529:
509:
503:
502:
482:
476:
475:
473:
471:
460:
454:
453:
451:
449:
441:Souders, Steve.
438:
432:
431:
429:
427:
412:
406:
405:
403:
401:
391:
196:
189:
185:
182:
176:
174:
133:
101:
93:
21:
18:Web optimization
969:
968:
964:
963:
962:
960:
959:
958:
954:Web development
944:
943:
939:
937:
936:
927:
925:
917:
916:
912:
903:
901:
893:
892:
888:
879:
877:
869:
868:
864:
855:
853:
845:
844:
840:
831:
829:
820:
819:
815:
806:
804:
802:Request Metrics
796:
795:
791:
782:
780:
772:
771:
764:
757:
745:
744:
740:
733:
721:
720:
713:
706:
694:
693:
689:
682:
670:
669:
665:
655:
653:
645:
644:
640:
630:
628:
620:
619:
615:
606:
604:
596:
595:
591:
580:
565:
564:
560:
553:
538:
537:
533:
526:
511:
510:
506:
499:
484:
483:
479:
469:
467:
462:
461:
457:
447:
445:
440:
439:
435:
425:
423:
414:
413:
409:
399:
397:
393:
392:
388:
383:
356:
302:
287:vector graphics
283:raster graphics
205:user experience
197:
186:
180:
177:
134:
132:
118:
102:
91:
66:
31:Web performance
28:
23:
22:
15:
12:
11:
5:
967:
965:
957:
956:
946:
945:
935:
934:
910:
886:
862:
838:
813:
789:
762:
755:
738:
731:
711:
704:
687:
680:
663:
638:
613:
589:
578:
558:
551:
531:
524:
504:
497:
477:
455:
433:
415:Sharon, Bell.
407:
385:
384:
382:
379:
355:
352:
344:
343:
340:
333:
327:
320:
301:
298:
213:web developers
199:
198:
105:
103:
96:
90:
87:
65:
62:
54:mobile devices
26:
24:
14:
13:
10:
9:
6:
4:
3:
2:
966:
955:
952:
951:
949:
942:
924:
920:
914:
911:
900:
896:
890:
887:
876:
872:
866:
863:
852:
848:
842:
839:
827:
823:
817:
814:
803:
799:
793:
790:
779:
775:
769:
767:
763:
758:
756:9781803231723
752:
748:
742:
739:
734:
732:9783944540948
728:
724:
718:
716:
712:
707:
705:9781492069805
701:
697:
691:
688:
683:
681:9781785284625
677:
673:
667:
664:
652:
648:
642:
639:
627:
623:
617:
614:
603:
599:
593:
590:
585:
581:
575:
571:
570:
562:
559:
554:
548:
544:
543:
535:
532:
527:
521:
517:
516:
508:
505:
500:
494:
490:
489:
481:
478:
466:
459:
456:
444:
437:
434:
422:
418:
411:
408:
396:
390:
387:
380:
378:
375:
373:
369:
365:
360:
353:
351:
349:
341:
338:
334:
332:
328:
325:
321:
318:
314:
313:
312:
309:
307:
299:
297:
294:
290:
288:
284:
280:
276:
271:
267:
265:
260:
256:
252:
248:
246:
242:
237:
235:
231:
226:
223:
221:
216:
214:
210:
209:web designers
206:
195:
192:
184:
173:
170:
166:
163:
159:
156:
152:
149:
145:
142: –
141:
137:
136:Find sources:
130:
126:
122:
116:
115:
111:
106:This section
104:
100:
95:
94:
88:
86:
84:
78:
74:
71:
63:
61:
59:
55:
50:
48:
44:
40:
36:
32:
19:
938:
926:. Retrieved
922:
913:
902:. Retrieved
898:
889:
878:. Retrieved
874:
865:
854:. Retrieved
850:
841:
830:. Retrieved
828:. 2021-01-12
825:
816:
805:. Retrieved
801:
792:
781:. Retrieved
777:
746:
741:
722:
695:
690:
671:
666:
654:. Retrieved
650:
641:
629:. Retrieved
625:
616:
605:. Retrieved
601:
592:
584:the original
568:
561:
541:
534:
514:
507:
487:
480:
468:. Retrieved
458:
446:. Retrieved
436:
424:. Retrieved
420:
410:
398:. Retrieved
389:
376:
361:
357:
345:
310:
303:
293:Lazy loading
291:
268:
249:
238:
227:
224:
217:
202:
187:
178:
168:
161:
154:
147:
135:
119:Please help
107:
79:
75:
69:
67:
51:
46:
42:
30:
29:
331:parallelism
324:multiplexed
275:compression
39:web browser
928:2023-01-09
904:2023-01-09
880:2023-01-09
856:2023-01-09
832:2023-01-09
807:2023-01-09
783:2023-01-09
651:CSS Tricks
607:2022-03-15
579:0596529309
552:1491935774
525:1491935774
498:059600172X
470:4 December
448:4 December
426:4 December
421:CDNetworks
400:4 December
381:References
241:JavaScript
151:newspapers
322:is fully
264:web cache
108:does not
35:web pages
948:Category
749:. 2022.
698:. 2018.
674:. 2015.
656:14 April
631:14 April
306:overhead
259:software
181:May 2017
923:web.dev
354:Metrics
255:latency
165:scholar
129:removed
114:sources
85:works.
64:History
940:
753:
729:
702:
678:
576:
549:
522:
495:
368:NuxtJS
337:header
317:binary
273:lossy
167:
160:
153:
146:
138:
364:React
335:uses
279:pixel
172:JSTOR
158:books
45:, or
751:ISBN
727:ISBN
700:ISBN
676:ISBN
658:2017
633:2017
574:ISBN
547:ISBN
520:ISBN
493:ISBN
472:2012
450:2012
428:2012
402:2012
370:and
243:and
211:and
144:news
112:any
110:cite
83:HTTP
899:npm
875:npm
372:Vue
315:is
123:by
950::
921:.
897:.
873:.
849:.
824:.
800:.
776:.
765:^
725:.
714:^
649:.
624:.
600:.
419:.
366:,
41:.
931:.
907:.
883:.
859:.
835:.
810:.
786:.
759:.
735:.
708:.
684:.
660:.
635:.
610:.
555:.
528:.
501:.
474:.
452:.
430:.
404:.
194:)
188:(
183:)
179:(
169:·
162:·
155:·
148:·
131:.
117:.
20:)
Text is available under the Creative Commons Attribution-ShareAlike License. Additional terms may apply.
