A webpage is simply composed of coding and media, however simple, this combination serves up a vibrant palette of immersive communication and digital expression. Today, web developers have virtually endless programming languages, style variations, and media file formats to choose from when crafting a modern webpage. “What Makes a Webpage 🐌 Slow? Let’s Take a Look!” explores actionable methods to diagnose and improve webpage speed & performance that you can achieve right now!
Server underperformance, JavaScript bloat, outdated media formats, excessive DOM size, and too many HTTP requests can all sabotage the loading time and performance of a well-intentioned website design. However, you can fix these technical errors like a Dirigo Digital pro! Sounds daunting? You may be right—The ranking of live webpages is hypercompetitive with billions of webpages vying for top SERP positions. In fact, the indexed web contains at least 5.38 billion webpages as of June 2nd, 2024.
Wait…What, billions of webpages?! Top ranked web developers and designers are required to master every technical edge and digital advantage accessible to them in this ever-evolving 🌎 Wide Web cybernated arena. New and emerging internet performance technologies are being discovered at the speed of ⚡ lightning and in recent years, webpage speed has risen to the forefront of Google ranking factors.
Web Hosting & Server Performance
Website speed and performance initiates at the web server. Server resources, configurations, stability, and location are all 🔑 key factors to consider when producing a fast loading webpage. Site builders and hosting companies that only provide access to front-end design applications that utilize HTML, JavaScript, and CSS web languages do not provide the capability to configure web servers such as, Apache, Nginx, Oracle iPlanet, or Microsoft IIS.
Hosting companies such as GoDaddy, Bluehost, and HostGator all provide superior choices for accessing web servers and tools. These companies provide back-end web developers access to significant server resources such as Linux-based cPanel, MySQL database, and gzip compression that is based on the Deflate algorithm and minifies files through a lossless data compression file format.
The inclusion of a network firewall is an essential component for any performance-based server configuration. Not only do firewalls provide data privacy and security, firewalls increase server speeds by blocking botnets and bad web crawlers 👎 that slow websites down from their excessive volume of data requests. When server accessibility & network firewalls are combined with a content delivery network (server network that caches a website’s contents) a powerful trio for constructing a best practices web foundation is completed.
JavaScript Bloat & Inefficient Code 
Superfluous webpage coding with improperly integrated HTML, CSS, and JavaScript that utilizes outdated methodologies, or code leftovers from depreciated website upgrades from years past—Like the Flash!—Can all slow a website down to a 🐌 crawl. Building a new website from the ground-up has several advantages versus upgrading the coding of an existing website’s framework. For example, the ability to apply cutting-edge coding such as React JSX markup syntax.
Recently, Dirigo Digital upgraded the coding language, structure, and on-page SEO elements of a client’s website. We spearheaded webpage performance, page load time, cropped inefficient coding, and accoutered numerous improvements to the site’s search engine ranking qualifiers. The homepage was experiencing a slow load time and JavaScript bloat was one of the main culprits; see JS bloat example below:
Dated Media Formats ⚡ The Flash
In the early days of web dev, website designers relied on primitive multimedia frameworks and archaic media container formats, such as, Adobe Flash to create immersive webpages. The initial version of Flash was released in 1996 and only provided a 2D animation version for the 🌎 Wide Web. Flash animation (.swf & .fla) was undoubtedly the launching pad for future performance based web media formats, such as, WebP (Web Picture) & WebM (Web Media) raster graphics formats created by Google in 2010 replacing JPG, PNG, and GIF file formats.
We’ve all visited webpages void of any rich media or images to showoff the web designer’s artistic flair, or gravitas–Why is this? Perhaps the web developer thinks images and rich media slow a website down? This is not the case, web development has come a long way since the days of Flash, and Dirigo witnessed the complete transformation of website coding frameworks and media file formats from their origins.
Modern Image Format Google WebP 
(2010) vs. Defunct GIF (1987)
Below are: two seemingly identical images, however they are not the same! One image is animated and slows a webpage’s load time (we’ll stop there); One image is animated, but doesn’t slow a webpage down and enhances the user’s experience. Can you guess which image is enhanced for the web? You are correct if you chose the cool llamas WebP version!
Web Picture (WebP) for webpages is the clear performance winner versus Graphics Interchange Format (GIF). What about static images? How does WebP stack-up against Portable Network Graphics (PNG) and Joint Photographic Experts Group (JPG · JPEG)? 9 out of 10 Dirigo web dev experts recommend WebP over all other image file formats. You can utilize this toolset for animated image editing and converting your own website’s defunct image file formats to Dirigo Digital web devs’ recommended modernized WebP file format.
What about video file formats utilized for rich media embeds and webpage galleries, such as, Moving Pictures Experts Group (MPEG · MP4) and QuickTime multimedia (MOV)? Does WebP provide the needed resources? Yes, and No! WebP does handle complete animation styling, however, does not provide audio functions–For this, Google has provided Web Media (WebM); the web’s leading audiovisual file format.
Excessive DOM Size
DOM–No, we’re not referring to the lead developer’s big noggin (sort-of-like, Jimmy Neutron: Boy Genius). DOM is actually an acronym for Document Object Model. DOM is an Application Programming Interface (API) for web documents, and Google Chrome for Developers recommends, “[avoiding] an excessive DOM size.” HTML DOM expresses practically all web documents, such as, VBScript, Java, and Visual Basic as nodes and objects allowing different web browsers and programming languages the ability to interact with a webpage.
Web developers should avoid an excessive DOM size when constructing a new webpage and not curate JS, HTML, and CSS web code as an afterthought during website upgrades. Avoid a large DOM tree during the initial webpage build by streamlining modern-web code. Streamlined and efficient coding limits excessive tree nodes and object modules processed by the DOM which may slow a webpage’s performance. Optimizing a website’s code improves DOM resources and increases overall performance of memory, load time, network efficiency, and runtime. Pro web developers at Dirigo Digital utilize Google Lighthouse to benchmark DOM and body element node sizes.
Too Many HTTP Requests · Error 429 Response Status Code
HTTP 429 response status codes may be dispatched from an underpowered website server, triggered by excessive CMS plugins, or displayed due to redundant, malfunctioning APIs. The resulting HTTP Too Many Requests status page does not render a live webpage view, rather, “This page isn’t working if the problem continues, contact the site owner. HTTP ERROR 429” This error may be triggered by a website that can’t handle massive traffic requests, or by a real-time user spamming and abusing the site’s content-resources.
Social buttons, such as, Facebook Like buttons, Twitter HTTP Tweet data retrieval APIs, YouTube gallery video streaming APIs, and Google Analytic scripts all load data and graphical interfaces retrieved from outside networks that levy a server’s resources. Server configuration repositories and CPU performance resources are limited by the site owner’s hosting plan level, accessibility to server performance settings, and the assets allocated to server; Hardware and software.
Server-side 429 response codes sent to real time users are an absolute page-blocker and increases Bounce Rate exponentially. To resolve 429 response codes, web developers can adjust the server’s HTTP request rate limits, decrease CMS plugins, remove redundant APIs, and allocate more resources to the server’s hardware and software.
