search
HomeWeb Front-endFront-end Q&AHave you ever felt that your web page is getting bloated?

With the development of infrastructure, our Internet speed is getting faster and faster, so do you feel that the loading speed of web pages has become faster? Have you ever thought that web pages are getting bloated? According to the HTTP Archive report, after investigating about 500,000 web pages, they found that the average size of each web page was slightly less than 2Mb, reaching 1953Kb, an increase of 15% from last year.

Of course, the websites investigated do not include complex web applications over there. Last year, the increase was 32%. Although the rate has narrowed this year, it is still not optimistic.

 Be careful with multiple pictures

  By segmenting the content of the web page, we can also understand the impact of each part on changes in web page capacity.

As can be seen from the above table:

HTML content has increased by 2Kb, which is not a big number, but it can increase the content a lot. The professed trends of reduction and refinement are deceptive.

CSS has increased by 11Kb. Responsive web design and CSS3 should have contributed a lot to this increase, but JavaScript has not decreased. Although there are many CSS management and reduction tools, each website requests an average of 6 CSS files.

27% of the websites in the survey still use Flash, mainly used in advertising, videos and games. This is a 5% decrease from last year, which is not as much as we imagined.

Another biggest contributor is pictures, which account for 85% of the entire web page capacity! Although the resolution of images is getting higher and higher, Retina screen devices only account for a small part, and there are many tools that can help reduce image usage. In addition, some web pages have more than 50 pictures, isn't this too overwhelming!

 Not a good thing

  Compared with last year’s 32% and the 30% the year before, the 15% growth does not seem to be much, but another question is, has the average bandwidth increased so fast? And with the development of mobile Internet, one-third of users now use mobile devices to access web pages. What about traffic charges?

For website owners, increasingly bloated web pages are not a good thing:

The user experience becomes worse. No matter how good the content of the website is, it is wrong to load slowly and make people wait!

By making the web page reach 2Mb, do you want to ignore one-third of mobile users?

Google will lower the website rating and make it harder to search. (Of course Google has never said the specific operation process)

The more code there is, the greater the possibility of crashing.

With such a large traffic volume, does it really cost nothing?

 The reason? lazy!

 As for the reason? Some people speculate that CMS templates and frameworks are overused. They allow developers to develop faster and cheaper, but at the expense of quality and efficiency. The tool contains many functions that are not used at all, but removing them is a tedious task.

In addition, there are also reasons such as developers’ tight budgets and limited development time. However, some people sum it up in one word: lazy.

But at least, it has nothing to do with the web browser.


Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
CSS IDs vs Classes: which is better for accessibility?CSS IDs vs Classes: which is better for accessibility?May 10, 2025 am 12:02 AM

Classesarebetterforaccessibilityinwebdevelopment.1)Classescanbeappliedtomultipleelements,ensuringconsistentstylesandbehaviors,whichaidsuserswithdisabilities.2)TheyfacilitatetheuseofARIAattributesacrossgroupsofelements,enhancinguserexperience.3)Classe

CSS: Understanding the Difference Between Class and ID SelectorsCSS: Understanding the Difference Between Class and ID SelectorsMay 09, 2025 pm 06:13 PM

Classselectorsarereusableformultipleelements,whileIDselectorsareuniqueandusedonceperpage.1)Classes,denotedbyaperiod(.),areidealforstylingmultipleelementslikebuttons.2)IDs,denotedbyahash(#),areperfectforuniqueelementslikeanavigationmenu.3)IDshavehighe

CSS Styling: Choosing Between Class and ID SelectorsCSS Styling: Choosing Between Class and ID SelectorsMay 09, 2025 pm 06:09 PM

In CSS style, the class selector or ID selector should be selected according to the project requirements: 1) The class selector is suitable for reuse and is suitable for the same style of multiple elements; 2) The ID selector is suitable for unique elements and has higher priority, but should be used with caution to avoid maintenance difficulties.

HTML5: LimitationsHTML5: LimitationsMay 09, 2025 pm 05:57 PM

HTML5hasseverallimitationsincludinglackofsupportforadvancedgraphics,basicformvalidation,cross-browsercompatibilityissues,performanceimpacts,andsecurityconcerns.1)Forcomplexgraphics,HTML5'scanvasisinsufficient,requiringlibrarieslikeWebGLorThree.js.2)I

CSS: Is one style more priority than another?CSS: Is one style more priority than another?May 09, 2025 pm 05:33 PM

Yes,onestylecanhavemoreprioritythananotherinCSSduetospecificityandthecascade.1)Specificityactsasascoringsystemwheremorespecificselectorshavehigherpriority.2)Thecascadedeterminesstyleapplicationorder,withlaterrulesoverridingearlieronesofequalspecifici

What are the significant goals of the HTML5 specification?What are the significant goals of the HTML5 specification?May 09, 2025 pm 05:25 PM

ThesignificantgoalsofHTML5aretoenhancemultimediasupport,ensurehumanreadability,maintainconsistencyacrossdevices,andensurebackwardcompatibility.1)HTML5improvesmultimediawithnativeelementslikeand.2)ItusessemanticelementsforbetterreadabilityandSEO.3)Its

What are the limitations of React?What are the limitations of React?May 02, 2025 am 12:26 AM

React'slimitationsinclude:1)asteeplearningcurveduetoitsvastecosystem,2)SEOchallengeswithclient-siderendering,3)potentialperformanceissuesinlargeapplications,4)complexstatemanagementasappsgrow,and5)theneedtokeepupwithitsrapidevolution.Thesefactorsshou

React's Learning Curve: Challenges for New DevelopersReact's Learning Curve: Challenges for New DevelopersMay 02, 2025 am 12:24 AM

Reactischallengingforbeginnersduetoitssteeplearningcurveandparadigmshifttocomponent-basedarchitecture.1)Startwithofficialdocumentationforasolidfoundation.2)UnderstandJSXandhowtoembedJavaScriptwithinit.3)Learntousefunctionalcomponentswithhooksforstate

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools