Website Speed Optimization Without Plugins

In today’s digital age, website speed is a critical factor influencing user experience and search engine rankings. Slow-loading websites can drive visitors away, impacting conversion rates and SEO. While there are numerous plugins available for WordPress website speed optimization, this article explores manual methods to achieve optimal performance without relying on additional plugins. We’ll delve into each aspect of speed optimization, including code snippets, implementation steps, and recommended online tools.

 

Image Optimization

Images play a crucial role in web content, but they can be a major factor in slowing down your site. Optimizing images manually involves compressing them without compromising quality.

Before uploading images to your WordPress site, utilize external tools like TinyPNG or ImageOptim to compress them without sacrificing quality. These tools reduce file sizes, resulting in faster loading times.

Specifying image dimensions in your HTML prevents the browser from reflowing the content, enhancing the overall user experience.

Responsive design is crucial in the mobile era. By using the “srcset” attribute, you enable the browser to choose the most appropriate image size based on the user’s device, reducing unnecessary bandwidth usage.

To enable responsive images, add the following code snippet to your theme’s functions.php file:

function theme_setup() {
    add_theme_support('post-thumbnails');
 
    // Add custom sizes ('name', 'width', 'height', 'crop')
    add_image_size('landscape_thumbnail', 320, 200, true);
    add_image_size('landscape_medium', 640, 400, true);
    add_image_size('landscape_medium_large', 960, 600, true);
    add_image_size('landscape_large', 1280, 800, true);
    add_image_size('landscape_larger', 1600, 1000, true);
    add_image_size('landscape_extra_large', 1920, 1200, true);
    add_image_size('landscape_extra_larger', 2240, 1400, true);
}
add_action('after_setup_theme', 'theme_setup');

This code snippet declares support for post thumbnails and defines a extra_large image size with a width of 1920 pixels and a height of 1080 pixels. Adding custom sizes can help delivering the best image size for users viewport.

This is how WordPress displays image that is uploaded in 1920×1080 original size in HTML:

<img
    src="https://kontra.agency/wp-content/uploads/2023/11/page-speed-1920x1200.jpg"
    srcset="https://kontra.agency/wp-content/uploads/2023/11/page-speed-1920x1200.jpg 1920w,
            https://kontra.agency/wp-content/uploads/2023/11/page-speed-320x200.jpg 320w,
            https://kontra.agency/wp-content/uploads/2023/11/page-speed-640x400.jpg 640w,
            https://kontra.agency/wp-content/uploads/2023/11/page-speed-960x600.jpg 960w,
            https://kontra.agency/wp-content/uploads/2023/11/page-speed-1280x800.jpg 1280w,
            https://kontra.agency/wp-content/uploads/2023/11/page-speed-1600x1000.jpg 1600w"
    sizes="(max-width: 1920px) 100vw, 1920px"
    width="1920" height="1200"
    alt="Website Speed Optimization Without Plugins"
>

WordPress will automatically put every image with the same aspect ratio in the srcset attribute.

Be sure to adjust the sizes attribute (you can do it with JavaScript) because if you use the default WordPress sizes and put the image in a container that is, for example, 360px width, the served image width will be 1920px. So, adjusting sizes attribute to 360px, the served image will be 640px (or the next image size that has the same or larger width size than the sizes value).

Browser Caching

Browser caching allows static files to be stored locally on the visitor’s device, reducing the need to download them on subsequent visits. By specifying expiration times for different file types, you can control how long browsers should cache them. Add the following code to your .htaccess file:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 2 days"
</IfModule>

This code sets expiration times for various file types, optimizing browser caching for improved performance.

Minification of CSS, JavaScript, and HTML

Minification involves removing unnecessary characters from code without altering its functionality. This reduces file sizes, leading to faster loading times.

• Use tools like CSS Minifier or Online CSS Minify to minify your CSS files. These tools eliminate whitespace and unnecessary characters, resulting in smaller file sizes.
• Minify your JavaScript files using tools like UglifyJS or Online JavaScript Minify. This process removes redundant code and optimizes the overall size.
• Optimize your HTML files with tools like HTML Minifier or Online HTML Minify. Minification streamlines HTML code by removing unnecessary elements and characters.

Reduce Server Requests

Minimizing server requests is vital for faster loading times. Each request to your server consumes resources, and reducing the number of requests can significantly improve speed.

Reduce server requests by combining multiple CSS and JavaScript files into single files. This minimizes the number of files the browser needs to download, improving loading times.

CSS sprites involve combining multiple small images into a single image file. By using background positioning, you can display specific portions of the sprite for different elements on your site, reducing the number of image requests.

Load non-essential scripts asynchronously to prevent them from blocking the rendering of the page. This allows crucial content to load first, providing a better user experience.

Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network of servers distributed globally, serving cached content to users from a server closest to their geographical location. Integrating a CDN with your WordPress site can significantly improve loading times.

Select a reputable CDN provider such as Cloudflare, Akamai, or Amazon CloudFront. These services distribute your site’s static content across servers worldwide, reducing latency. Most CDN providers offer plugins or integration guides for WordPress. Follow the instructions provided by your chosen CDN to seamlessly integrate it with your site.

Gzip Compression

Gzip compression reduces the size of your website’s files, including HTML, CSS, and JavaScript, before they are sent to the browser. This compression can significantly improve loading times.

Add the following code to your .htaccess file to enable Gzip compression:

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE font/opentype
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml

    # Remove browser bugs (only needed for really old browsers)
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
    Header append Vary User-Agent
</IfModule>

This code snippet instructs the server to compress various file types before delivering them to the browser.

Optimize WordPress Database

Over time, your WordPress database can accumulate unnecessary data, impacting performance. Regularly optimizing the database can lead to faster query execution times. Unused plugins and themes may leave behind residual data in the database. Remove any plugins or themes that you are not actively using.

Spam comments and post revisions contribute to database bloat. Use the following SQL queries to clean up your database:

DELETE FROM wp_comments WHERE comment_approved = 'spam';
DELETE FROM wp_postmeta WHERE meta_key = '_wp_trash_meta_time';
DELETE FROM wp_postmeta WHERE meta_key = '_wp_trash_meta_status';

Server Optimization

The server on which your WordPress site is hosted plays a crucial role in its speed and performance. Optimizing your server settings can lead to significant improvements.

Choose a hosting provider that specializes in WordPress hosting and offers performance optimizations. Providers like SiteGround and Kinsta are known for their WordPress-specific optimizations. Server-level caching involves caching content at the server level before it reaches WordPress. Consult your hosting provider’s documentation to enable server-level caching.

Lazy Loading for Images

Lazy loading delays the loading of off-screen images until the user scrolls to them. This can significantly reduce initial page load times.

Lazy loading is now a built-in feature in WordPress. If your theme doesn’t support it, add the following code to your theme’s functions.php file:

add_filter('wp_lazy_loading_enabled', '__return_true');

Reduce External HTTP Requests

External HTTP requests, such as calls to third-party scripts and resources, can impact your site’s speed. Minimizing these requests is crucial for optimal performance.

Evaluate and limit the number of third-party scripts on your site. Only include scripts that are essential for functionality. If you’re using custom fonts, consider hosting them locally rather than relying on external services like Google Fonts. This reduces external dependencies and speeds up font loading times.

Monitor and Analyze Performance

Regular monitoring and analysis of your site’s performance are crucial for maintaining optimal speed. Identify potential issues and address them promptly to ensure a seamless user experience.

Use tools like New Relic or Blackfire to monitor your site’s performance. These tools provide insights into server response times, database queries, and overall resource usage.

Advanced Database Optimization

While regular database optimization is crucial, advanced techniques can further enhance database performance for larger WordPress sites.

Ensure that your database tables are properly indexed. Indexing improves query performance by allowing the database to quickly locate and retrieve specific rows. Review and optimize complex database queries, especially those executed frequently. Use tools like Query Monitor to identify slow queries and address them.

Preconnect to Required External Domains

Preconnecting to external domains can speed up the loading of resources by initiating the connection process early. This is particularly useful for third-party services like analytics or social media platforms.

Determine which external domains your site relies on for resources. This could include domains for social media buttons, analytics scripts, or other third-party services. Add preconnect tags to your site’s HTML head section for the identified external domains. This informs the browser to start the connection process early.

<link rel="preconnect" href="https://external-domain.com">

Object Caching

Object caching stores database query results, reducing the need to repeatedly query the database. Both Memcached and Redis are an excellent choice for object caching.

Content Rendering and Critical Path

Understanding the critical rendering path is crucial for optimizing how browsers render your content. Streamlining this process ensures that users see your content quickly.

Identify and prioritize critical resources, such as stylesheets and scripts needed for initial page rendering. Load these resources first to expedite the rendering process. Above-the-fold content refers to the portion of a web page visible without scrolling. Optimize this content for faster rendering by minimizing the number of requests and reducing the size of critical resources.

WebP Image Format

WebP is a modern image format developed by Google that provides superior compression and quality compared to traditional formats like JPEG and PNG. Convert your images to WebP format to benefit from smaller file sizes without compromising image quality. Tools like Squoosh allow for easy conversion. Use the HTML <picture> element to serve WebP images to browsers that support the format while providing fallbacks for those that don’t.

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Description">
</picture>

DNS Prefetching

DNS prefetching involves resolving domain names before a user clicks on a link, reducing latency when loading external resources.

Identify external domains that your site relies on for resources, such as fonts, analytics, or third-party services. Add DNS prefetch tags to your HTML head section for the identified external domains. This allows the browser to resolve DNS queries in advance.

<link rel="dns-prefetch" href="//external-domain.com">

Optimize WordPress Theme Files

Optimizing your WordPress theme files, including stylesheets and scripts, is crucial for efficient loading and rendering.

Minify your theme’s CSS and JavaScript files to reduce their size. This involves removing unnecessary characters, whitespace, and comments.

Defer the loading of non-essential scripts to prioritize the loading of critical resources. This ensures faster initial page rendering.

 

Optimize WordPress Widgets

WordPress widgets can impact your site’s speed, especially if they make external requests or load resource-intensive content. If your widgets make external requests, limit their frequency to reduce the impact on your site’s loading times.

Implement caching for widget output to store and reuse the results, minimizing the need for repeated processing.

Progressive Web App (PWA) Optimization

Progressive Web Apps (PWAs) offer a seamless and faster user experience by combining the best of web and mobile applications.

Service workers enable background processes, allowing your PWA to work offline and load faster by caching essential resources.

The web app manifest is a JSON file that provides information about your PWA, such as its name, icon, and theme color. Including this file improves the user experience, especially on mobile devices. manifest.json example:

{
	"name": "Full Website Name",
	"short_name": "Website",
	"description": "Website description",
	"icons": [
		{
			"src": "android-icon-36x36.png",
			"sizes": "36x36",
			"type": "image\/png",
			"purpose": "maskable",
			"density": "0.75"
		},
		{
			"src": "android-icon-48x48.png",
			"sizes": "48x48",
			"type": "image\/png",
			"purpose": "maskable",
			"density": "1.0"
		},
		{
			"src": "android-icon-72x72.png",
			"sizes": "72x72",
			"type": "image\/png",
			"purpose": "maskable",
			"density": "1.5"
		},
		{
			"src": "android-icon-96x96.png",
			"sizes": "96x96",
			"type": "image\/png",
			"purpose": "maskable",
			"density": "2.0"
		},
		{
			"src": "android-icon-144x144.png",
			"sizes": "144x144",
			"type": "image\/png",
			"purpose": "maskable",
			"density": "3.0"
		},
		{
			"src": "android-icon-192x192.png",
			"sizes": "192x192",
			"type": "image\/png",
			"purpose": "maskable",
			"density": "4.0"
		},
		{
			"src": "favicon.png",
			"sizes": "512x512",
			"type": "image\/png",
			"purpose": "maskable"
		},
		{
			"src": "android-icon-36x36.png",
			"sizes": "36x36",
			"type": "image\/png",
			"purpose": "any",
			"density": "0.75"
		},
		{
			"src": "android-icon-48x48.png",
			"sizes": "48x48",
			"type": "image\/png",
			"purpose": "any",
			"density": "1.0"
		},
		{
			"src": "android-icon-72x72.png",
			"sizes": "72x72",
			"type": "image\/png",
			"purpose": "any",
			"density": "1.5"
		},
		{
			"src": "android-icon-96x96.png",
			"sizes": "96x96",
			"type": "image\/png",
			"purpose": "any",
			"density": "2.0"
		},
		{
			"src": "android-icon-144x144.png",
			"sizes": "144x144",
			"type": "image\/png",
			"purpose": "any",
			"density": "3.0"
		},
		{
			"src": "android-icon-192x192.png",
			"sizes": "192x192",
			"type": "image\/png",
			"purpose": "any",
			"density": "4.0"
		},
		{
			"src": "favicon.png",
			"sizes": "512x512",
			"type": "image\/png",
			"purpose": "any"
		}
	],
	"display": "standalone",
	"lang": "en",
	"start_url": "/",
	"scope": "/",
	"theme_color": "#FFFFFF",
	"background_color": "#FFFFFF"
}

Advanced Caching Strategies

Advanced caching strategies go beyond basic page caching and involve techniques like object caching, fragment caching, and dynamic caching. Implement fragment caching to cache specific sections of your page independently. This is useful for dynamic content that doesn’t change on every page load.

Use dynamic caching to create cached versions of your pages based on user roles, device types, or other dynamic criteria. This ensures personalized content is delivered quickly.

Content Delivery Network (CDN) Optimization

Optimizing your CDN configuration ensures that your WordPress site takes full advantage of distributed content delivery. Leverage edge caching to cache content closer to the end-users at CDN edge servers. This reduces latency and speeds up content delivery.

Configure your CDN to optimize images and assets on-the-fly, delivering appropriately sized and compressed files to users based on their devices.

Resource Hints for Faster Loading

Resource hints are HTML tags that provide the browser with additional information to optimize resource loading.

• Preload Critical Resources – Use the <link rel="preload"> tag to indicate resources that should be fetched as a priority, improving their loading speed.
• Prefetch External Resources – The <link rel="prefetch"> tag can be used to instruct the browser to fetch resources in the background, improving the speed of subsequent page loads.

Asynchronous and Deferred Script Loading

Loading scripts asynchronously or deferred helps prevent them from blocking the rendering of your page, leading to faster load times.

• Asynchronous Script Loading – Include the async attribute in your script tags to load them asynchronously, allowing other page elements to load simultaneously.

<script async src="your-script.js"></script>

• Deferred Script Loading – For non-essential scripts, use the defer attribute to ensure they don’t block the rendering of the page.

<script defer src="your-script.js"></script>

Critical CSS for Instant Rendering

Critical CSS is the minimal set of CSS required for the initial rendering of above-the-fold content. Including it inline eliminates render-blocking delays.

Use tools like Critical to extract and generate critical CSS for your above-the-fold content. Include the critical CSS directly in the HTML file to eliminate the need for an additional HTTP request.

Browser-Specific Resource Loading

Customizing resource loading based on the user’s browser can optimize the loading experience for each user.

Identify the user’s browser using the User-Agent HTTP header or JavaScript. Load specific resources optimized for the user’s browser, such as browser-specific JavaScript or image formats.

Decoupling WordPress for Headless Architecture

Decoupling WordPress involves separating the frontend from the backend, allowing for a headless architecture. This approach can lead to faster content delivery and improved performance.

Convert your WordPress site into a headless CMS by leveraging the WordPress REST API. This allows you to fetch and display content via separate frontend technologies. Choose a frontend technology that excels in speed, such as React or Vue.js. Optimize the frontend rendering process to reduce time-to-interactive metrics.

Conclusion

Incorporating these advanced WordPress website speed optimization techniques into your site’s strategy promises substantial improvements. By applying these strategies and continuously monitoring your site’s performance, you ensure that your WordPress website not only loads quickly but also maintains optimal speed over time.

And if you test your website with the Lighthouse tool, prepare for a celebration!

These cutting-edge strategies transcend conventional methods, positioning your website at the forefront of speed and efficiency. As technology evolves, staying ahead in optimization practices is key to delivering an exceptional user experience.

Feel free to check out this SEO tutorial, some cool animations or how to set up a web store.