How we optimized code and accelerated page speed on our website Information Websites

When it comes to developing a high-quality website, most companies only evaluate its visual appearance. However, if heavy code is hidden under the hood of a resource, and pages force a visitor to wait longer than a few seconds to load, no modern design will save the project from losing customers.

We decided to refine our website and significantly accelerate its metrics in Google PageSpeed Insights (GPS). A reliable technical foundation and instant interface response are critical for user retention.

Our main goal was to optimize the internal code architecture, eliminate rendering delays, and ensure that all website pages load instantly on both desktops and mobile devices.

Перехід на систему точкового завантаження

Transition to a modular loading system

Previously, on our website's frontend, styles were loaded according to a classic but inefficient scenario. During the first visit, the user's browser was forced to download and read bulky style files for the entire website at once, processing a lot of unnecessary code that was not used on the current page at all. This created artificial waiting time, slowed down the rendering of the first screen, and degraded ergonomics performance.

We completely changed this approach and implemented a modular style loading system. Now, the website connects exclusively those styles that are critical for the immediate display of the current viewport (Critical CSS). The styling of other, lower blocks and pages is loaded in parts, strictly on demand. This step radically freed the browser from waiting for unnecessary information and made the interface response instantaneous.

Elimination of code bloat via Webpack

During development, CSS rules inevitably accumulate in a project and eventually stop being applied: remnants of old blocks, duplicates, and styling that is no longer called anywhere. The browser downloads this ballast, even though it will never use it.

We reconfigured Webpack so that during each build, the system automatically scans the website templates and compares them with existing styles. All CSS rules that are not used anywhere on the website are removed without a trace at the compilation stage. Only the code that actually works gets into the final files, so the weight of styles is noticeably reduced, and the pages become lighter.

Separately, we fine-tuned JavaScript compilation. Previously, the code was prepared by default with a focus on compatibility with legacy browsers. Because of this, a lot of service code was mixed into the final version of the JS file, which modern users simply do not need. We specified the current browser versions that our audience actually uses in the build system. Thanks to this, redundant compatibility code disappeared, script files became more compact, and their processing became significantly faster without unnecessary load on the user's CPU.

Intelligent image loading logic

Heavy images are the main enemy of any portfolio or blog website's speed, as they make up the bulk of the total page weight. Unoptimized graphics place an excessive load on the network channel, which is why data downloads practically stop on mobile devices with slow internet.

Before optimization, the browser sequentially downloaded all images from the document structure, regardless of whether they were in the user's viewport. If a blog article contained many interface screenshots, the page on mobile devices began to lag severely, and users simply did not wait for the material to load.

To solve this problem, we implemented an intelligent graphics loading system. Now, during the initial rendering of the page, the browser spends resources only on images within the first screen. Other illustrations remain on standby and are loaded based on the Lazy Loading principle - strictly at the moment when the user scrolls to their physical location.

Additionally, we converted all graphic content to modern optimized formats, selecting the ideal balance between high layout detail and minimal file weight. This approach allowed us to fully preserve the quality of visual content and significantly increase the overall page loading speed.

Static caching optimization

Without configured caching, the server is forced to process every request from scratch, which greatly reduces website performance under heavy load. Previously, the user's browser re-downloaded the same static files on every transition between pages, even though they had not changed at all since their last visit.

We implemented an optimized static resource caching scheme at the web server level. Now, for all media files, styles, fonts, and JavaScript scripts, Cache-Control HTTP headers are clearly specified with a long time-to-live (TTL). This allows the browser to store statics locally and instantly pull them from memory during repeat visits, completely bypassing network requests to the server.

Optimization for AI and search crawlers

A modern SEO-optimized website must be convenient not only for people but also for automated systems. Previously, our website architecture was focused exclusively on classic search engine algorithms, which made it difficult for new intelligent assistants to crawl content.

We performed a deep technical optimization of the website for search agents and AI systems. We filled the website's code structure with special semantic hints and micro-marking (structured data). They help search robots, neural networks, and modern smart assistants accurately recognize and analyze page content. This significantly increased the website's clarity for robots, which directly improves the company's visibility in search networks and the quality of our materials' representation in AI services.

Results before and after optimization

To back up our claims with data, we recorded technical performance metrics in the Google PageSpeed Insights service for mobile devices - the hardest zone to optimize. The results of the comparative analysis proved the complete superiority of the new code setup.

Website Home Page

1. Before Optimization: Loading speed and overall performance experienced severe drops due to heavy scripts and render-blocking styles. The speed score was in the red/yellow zone, creating barriers on the first screen.

2.  After Optimization: Thanks to code optimization through Webpack and the implementation of modular styles (direct connection of Critical CSS for the first screen), the home page reached maximum efficiency metrics. We completely removed render-blocking resources, shifting the First Contentful Paint (FCP) speed into the green PageSpeed zone. Navigation became smooth, and the first screen loads instantly.
 

Blog Main Page

1. Before Optimization: A large number of article cards and heavy images greatly increased the page weight. Because of this, the website took a long time to load all media files sequentially, which slowed down the display of content on mobile device screens.
 

2.After Optimization: Applying the Lazy Loading image system allowed us to unburden the stream. Blog performance confidently moved into the green zone.
 

Blog Article Page (About Chatbots)

1.  Before Optimization: Long text filled with interactive elements and graphic interface examples caused delays while scrolling and long response times for the page.

2.After Optimization: Thanks to clearing out code bloat and configuring smart server caching, the article page opens instantly, providing a comfortable and fast reading experience.

Landing Page for "CRM Development" Service

1.Before Optimization: The page describing our main product contained complex interface blocks, interactive tabs, and heavy feedback forms, which negatively affected conversions due to delays.
 

2.After Optimization: Comprehensive optimization turned this landing page into a lightweight environment. All CRM functionality blocks and conversion cards work without any system delays.
 

Conclusion

The completed code optimization and the implementation of intelligent graphics loading have clearly demonstrated that frontend performance directly impacts user experience. Moving into the green zone of Google PageSpeed Insights allowed us to lay a solid foundation for SEO metric growth, as search engines always rank fast resources higher in organic results. Cleaning up styles, optimizing the Webpack build, and converting media content to modern formats improved page indexing by Googlebots, as the website stopped serving redundant data during crawling. At the same time, configuring server-side caching guarantees the absolute stability of the platform under load, even during a simultaneous influx of a large number of visitors.