Web App

• September 12, 2024 • 6 mins read

Strategies To Increase Website Speed

How to increase my website speed loading time—is probably a question that runs through every website developer’s mind.

Amazon has once revealed that every 100 milliseconds of latency could lead to a 1% drop in revenue, highlighting the critical implications of high-speed webpages.

Page speed influences user engagement, retention, conversion rates, and search engine rankings. Hence, websites that load faster are likely to excel in these areas.

What Can You Do To Increase Website Loading Speed?

Here are some practices to enhance the loading times of web pages:

Image Optimization

Compress your image before uploading it to your website. Images of larger sizes will take up more time to render the image and also take up a lot of space on your website.

JPEG

Ideal for photographs. JPEGs provide high quality with relatively small file sizes. Ideal for colourful, vivid images where precise control over compression is crucial.

PNG

Provide transparency and work well for logos and user interface elements. Best suited for visuals with fewer than 16 colours. PNGs have bigger file sizes but offer better clarity.

WebP & AVIF

For compression and quality. WebP reduces image bandwidth significantly and is widely supported by browsers. AVIF offer better compression, but not all browsers it.

Although AVIF provides better compression and quality, it is crucial to note that AVIF is less supported due to the adoption in browsers being more recent.

Apart from picture formats, implementing srcset and sizes attributes in HTML allows the browser to select the most appropriate image size based on the device’s screen size and resolution for a better user experience on different devices.

#Code:
<picture>
  <source width="250" height="141" srcset="flower.webp" type="image/webp" media="(max-width: 300px)">
  <source width="250" height="141" srcset="flower.jpg" type="image/jpg" media="(max-width: 300px)">
  <source width="500" height="282" srcset="flower@2x.webp" type="image/webp" media="(max-width: 600px)">
  <source width="500" height="282" srcset="flower@2x.jpg" type="image/jpg" media="(max-width: 600px)">
  <source width="750" height="422" srcset="flower@3x.webp" type="image/webp" media="(max-width: 900px)">
  <source width="750" height="422" srcset="flower@3x.jpg" type="image/jpg" media="(max-width: 900px)">
  <source width="1000" height="563" srcset="flower@4x.webp" type="image/webp">
  <img width="1000" height="563" loading="lazy" src="flower@4x.jpg" type="image/jpg" alt="Flower">
</picture>
# Attribute
<a href="https://www.freepik.com/free-photo/close-up-daisies-outdoors_4505290.htm#fromView=search&page=1&position=0&uuid=20805bbe-8af7-4096-be53-7cf4dfe03b75">Image by freepik</a>
# Photos:
https://folder/ZQ71fNayJllOVcdUAOyuXHzHsKg?

Minimizing JavaScript & CSS

Optimise JavaScript and CSS to enhance content rendering speeds. Utilise async and defer attributes in script tags, to prevent JavaScript files from blocking and rendering the page.

Developers can use tools like Uglifyjs and CSSNano to eliminate unnecessary characters (such as spaces and comments) from code without affecting its functionality for the minification process. PurgeCSS can also eliminate unused codes on sites as well.

 <body>
    ...
    <script src="myscript.js" async/>
</body>

 <body>
    ...
    <script src="myscript.js" defer/>
</body>

Web Fonts Optimization

Use pre-installed web-safe fonts as default on various devices and operating systems. This can speed up the load times and guarantee that the text renders consistently across different user environments.

To avoid issues like invisible text (the “flash of invisible text” or FOIT) or unstyled text (the “flash of unstyled text” or FOUT), utilize the font-display property in CSS.

This allows you to control how fonts display during their load, letting you decide whether to temporarily show styled or unstyled text or not until the font is fully loaded.

Caching Strategies

Set up HTTP Headers using appropriate HTTP headers like Cache-Control to dictate how long these resources are stored locally before a new copy is requested from the server to maintain fresh content while optimizing loading times.

Store resources locally by utilising the browser’s capability to cache frequently accessed resources such as stylesheets, images, and JavaScript files. By using this technique, extra network requests are avoided on subsequent visits to the website.

# Sample Apache configuration (604800 = 7 days)
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>
# Sample nginx configuration
add_header 'Cache-Control' "max-age=604800, public";

Service Workers

Service workers function as background-running scripts that are separated from web pages.

This enables enhanced capabilities like catching and managing network requests and caching assets.

The core functionality of service workers involves caching assets for offline use to ensure the website remains functional offline or in low network conditions.

Furthermore, service workers can synchronize data in the background, ensuring seamless user interactions even with intermittent connectivity. This helps to maintain user data integrity across different sessions and devices.

HTTP/2 & HTTP/3

Upgrade to newer HTTP versions. It enhances the efficiency of request and response handling. HTTP/2 allows multiple requests and responses to overlap in a single connection, significantly reducing the overhead that was typical in HTTP/1.1.

HTTP/3, on the other hand, uses QUIC (Quick UDP Internet Connections), a new transport protocol that enhances security and reduces latency, particularly beneficial in mobile-heavy internet usage scenarios.

Developers can prioritize HTTP/2 and HTTP/3 for webpages to load first to optimize the perceived and actual speed of page loading.

Bonus read: 14 best secure coding practices in web application development.

Proper Hosting

Choose a hosting provider whose servers are situated in the same region as your main user base. The closer the server, the quicker the data transfer, reducing latency and speeding up load times.

Consider the pros and cons between shared hosting, Virtual Private Server (VPS) and dedicated hosting as they may affect user experience and search engine rankings if chosen wrongly.

Shared Hosting

Cost-effective option and suitable for smaller or less resource-intensive websites. However, it can be prone to performance issues if other sites on the same server experience spikes in traffic.

Virtual Private Server

VPS hosting offers more control and dedicated resources than shared hosting without the cost of a full dedicated server, making it a good middle-ground option.

Dedicated Services

Ideal for high-traffic and resource-intensive sites, dedicated servers provide maximum control and resources, ensuring that performance is not impacted by other users.

Database Optimization

Ensure your database is designed efficiently with properly indexed tables. A well-structured database can identify and retrieve data more rapidly, saving it from having to scan the entire table. This will reduce query time and enhance performance, especially with large datasets.

Conducting routine maintenance is crucial to increase your website speed. Regular updating and cleaning up of unnecessary data improves the efficiency of data retrieval and maintains performance over time.

Script Placements

Put your <script> at the bottom, preferably the <body> section. This will allow browsers to render the HTML, CSS, and other content first, without being delayed by JavaScript execution.

 <!DOCTYPE html>
  <html>
    <head>
      <title>Webpage</title>
    </head>
    <body>
      <!-- HTML content -->
      <script type="text/javascript">
      // JavaScript code
      </script>
    </body>
  </html>

Code Splitting

Code splitting is a method to divide a huge JavaScript bundle into smaller, more manageable chunks that load only when needed, thus optimising the loading efficiency of web applications.

Utilising dynamic imports in JavaScript frameworks like React, Angular, or Vue.js allows the site to load specific pieces of code on demand rather than loading the entire application upfront.

Another effective strategy is implementing route-based splitting. This ensures the users to only download the necessary code for the route they are visiting.

Lazy Loading

Use the loading='lazy' attribute in your HTML tags for all images and videos. This instructs the browser to only load these resources when they become visible to users. It can also be applied to CSS and JavaScript files.

Developers can utilise built-in or third-party libraries in frameworks like React, Angular, or Vue.js to control the lazy loading of scripts and stylesheets. This instructs the browser to only load these resources when they become visible to users.

Content Delivery Networks (CDNs)

Using CDNs to distribute the load of delivering can improve the speed of content delivery by caching content in multiple server locations around the world. Users can receive data faster and with less latency by using the server that is closest to them.

A/B Testing For Performance Enhancements

Testing different strategies to find what works best for your audience. For instance, you can test different image compression levels, CDN providers, or caching strategies to determine which configurations offer the best load times.

Conclusion

Web performance optimization is a vital aspect that will impact user satisfaction, engagement, conversion rates and search engine rankings, especially now that Google has announced that websites that are poorly optimised for mobile may not be ranked higher in their search engine anymore.

Keep in mind that improving website speed time is not a one-time fix. Hence, stay updated and continuously test your strategies to ensure your website speed increase!

Looking For Unbeatable Speed and Efficiency?

Our custom web application development service is here to help you.