Tag: Performance

  • Performance Improvements That Can Speed Up Your Website

    Performance Improvements That Can Speed Up Your Website

    Picture this: You’ve crafted an incredible WordPress website complete with engaging content and a design that could win awards. But there’s a catch – your site takes ages to load, and your audience’s enthusiasm wanes with each passing second. The load speed of a website is not just a number; it’s the gateway to transforming visitors into loyal customers and brand ambassadors. When your site is a speedster, it lays out a red carpet for everyone to dive into what you offer. Even Google rewards such sprightly sites with higher rankings, thanks to its consideration of page loading speed and server response time in its algorithm.

    However, sluggish server response times could spell doom. Don’t test the patience of your website visitors: they’ll just leave the site. Websites need to load fast to keep the audience riveted.

    Let’s explore how to achieve some WordPress performance improvements to ensure your website is as swift while keeping any of the pizazz delivered by Javascript and CSS, keeping your audience captivated and Google happy. Let’s supercharge your WordPress website!

    KASD (Keep A Simple Dom)

    Similar to the KISS rule, the complexity of your HTML can make or break your performance. While HTML is usually the smallest part of your page payload, it’s the conductor: it’s orchestrates what happens on the page. All of those instructions have to be weighed in and reconciled. If they are too complicated, that distills into a performance loss. This is especially important for designers who chase the mobile experience. It’s easy for designers to repeat an element for the sake of the mobile experience. That adds more complexity and leans of the web browser to show and hide elements based on the screen size or device. Instead, try to have one element that is always present with its look affected by CSS. Also, don’t be afraid to second guess the HTML output by WordPress page builders. They sometimes build cumbersome HTML that gives web browsers a heart attack.

    Image Optimization

    Images can sometimes be unnecessarily large. For instance, an icon measuring 72×72 pixels might actually be utilizing a 1400×800 pixel image. There could be a possibility of a plugin malfunction which requests an image that is too large for optimal performance. A GTMetrix report is handy in such situations as it not only identifies the images in need of optimization but also generates the optimized versions for you. Replacing the problem images with these optimized ones can improve performance.

    Understanding Image Formats. It’s crucial to discern between the different image formats like GIFs (pronounced with a hard or soft ‘G’– let’s not fight over this), JPEGs, PNGs, SVGs, and bitmaps. Each format has its own set of attributes, so choose the one that best suits the intended purpose within your presentation.

    JavaScript Placement

    Header Placement – Use With Caution. Placing JavaScript code in the header makes it execute before the rest of the content. However, this could also mean that the content display is paused until the JavaScript is fully executed, which is known as “render blocking.” For the end user, this is not desirable as they might end up staring at a blank screen for an extended period.

    Consider Footer Placement. Certain codes can be placed in the footer without any issues, such as analytics code, auxiliary code, or code pertaining to the lower sections of the web page (like a dynamic footer).

    Client-Side Caching

    Enable Content Caching. WordPress often appends query strings to URLs and modifies these strings with each load to ensure that images, scripts, or styles are loaded afresh. While this guarantees that the content is up-to-date, it can be time-consuming from an end user’s perspective.

    Modify Expiry Dates. By altering the expiry date, which is a metadata setting in the served assets, you can extend it to days or even months into the future. This allows the web browser to save some of the content on the user’s computer, which means it won’t have to re-download these elements each time the page is loaded. This takes advantage of browser caching, thus improving the loading speed for returning visitors.

    Handling Third-Party Assets in WordPress

    Third-party assets, though convenient, can adversely affect performance. It’s tempting to effortlessly integrate snippets from Instagram, Facebook, Google, Click-to-chat, or CRM tools into your WordPress site, but these can significantly slow it down.

    Gain Control Over External Assets. Whenever possible, try to host assets on your own site or CDN. For instance, download Google fonts and serve them from your WordPress site or your CDN.

    Serve Content via Server-Side Generated HTML. Instead of relying on Javascript to deliver or construct content, use server-side generated HTML, which is generally faster.

    Choose Wisely. Carefully decide on the third-party assets you want to include on specific pages. If performance is paramount, be discerning when it comes to incorporating third-party applications.

    GZIP Compression

    Minimizing file downloads is essential for speed. If a file is smaller, it takes less time to move it. Optimizing the number of files requested and reducing their size is key. In WordPress, each plugin and theme you use is likely to add multiple CSS and JS files, which can quickly accumulate to over 20 CSS and 20 JavaScript file requests.

    Use Plugins for consolidation. GZip Compression. Most web servers can serve files compressed with GZip, and almost all web browsers can decode them. Make sure this is enabled for your WordPress site for faster loading. WordPress plugins like WP Fastest Cache can combine CSS into fewer files and perform the same task for JavaScript.

    Server Caching in WordPress

    Cache Static Content. Store static versions of complex outputs, such as leaderboards, lists of recent posts, or stats, so that they don’t have to be regenerated every time.

    Optimize Before Shipping. Ensure that code is optimized on the server-side before it is sent to the client.

    Use Caching Plugins. Employ plugins like W3 Total Cache or WP Super Cache to enhance the caching capabilities of your WordPress site.

    Tune Keep-Alive Settings. Some browsers may repeatedly establish a connection to your server for each file request. By adjusting the server’s Keep-Alive settings, this connection can be maintained, saving time.

    Use Content Delivery Networks (CDNs) with WordPress. Integrating a CDN can alleviate the load on your server and provide faster content delivery by serving data from a location closer to the end user. In WordPress, this can be easily achieved by using plugins that facilitate CDN integration, such as WP Rocket.

    Flush Your Content

    Hang time is a killer when you’re waiting for a web page. This can be a side effect of the foundations of a website– PHP: the driver for WordPress and so many other website applications. By default, PHP can wait a long time before delivery of content back to the end user. It is possible to push it to begin earlier than otherwise. That sends content back to your audience faster. I do this by putting the flush() call at the top of the page.tpl.php file. If you’re about to output the themed data, you’re ready to deliver content, so I say push it out as soon as you can, even starting the process before the page.tpl.php is populated and served. One thing to note: flushing content may not be a tactic that plays well with GZip, so experiment.

    Consolidate CSS and JavaScript Files

    It’s highly beneficial to merge all your JavaScript files into a single file and do the same for CSS. Although content management systems like Drupal may inherently involve numerous supporting files, they often have the feature to aggregate JavaScript and CSS files. This consolidation can dramatically reduce the number of files from over 30 to just two or four. When using Wordress, add in a plugin like WP Fastest Cache to aggregate supporting files. While CSS can be aggregated with little jeopardy, aggregating JavaScript can lead to problems, so experiment before your deploy a change like that.

    Build and Use CSS Sprites

    CSS sprites allow you to use sections of a larger image to fulfill various graphical requirements on your web page. The concept of sprites is not new and has been used in video games for decades. However, its application in web design is relatively recent.

    By combining multiple elements into one image and utilizing CSS to extract the necessary sections, you can decrease the number of file downloads, which is crucial for performance. To effectively use CSS sprites, it’s essential to understand the intended use of the image and be adept in handling CSS backgrounds. This involves mastering techniques such as cropping and controlling image repetition.

    In WordPress, CSS sprites can be integrated into themes and plugins to enhance the loading speed and optimize graphical elements on your website.

    Need help?

    Part of what we do at Web321 is a set of performance improvements (aka a WordPress speed service). Do you want to talk about what we can do to improve your site speed?

  • Website Page Speed – Why It’s Even More Important in 2021

    Three factors figured heavily into your search engine positioning:

    • Technical SEO
    • Backlinks to your web pages
    • Website speed

    Performance or Page Speed is a factor Google and other search engines use to deliver the best content to the end user. If a site takes a long time to load, it reflects poorly on the search engine. Page speeds comes from two elements: the download of the webpage content; and the how hard it is for your web browser to interpret the content and turn it into a sensible looking webpage.

    These are some of the issues and ways to improve performance. Some are things that a website owner can directly affect. Some of topics best left up to the pros.

    Image Issues

    Images can be too big.a 72×72 pixel icon could actually use a 1400×800 image. Maybe, a plugin failed you and request an image that is too big to be optimal. The GTMetrix report will generate optimized images for you.

    Image format choices. Know the difference between GIFs (or is that GIF?), JPEGs, PNGs, SVGs and bitmaps. Use the ideal image for the role in the presentation.

    JavaScript Placement

    The header is the best (except when it isn’t). When Javascript code goes into the header, that code executes first. It will block the display of content until the Javascript fully executes. This is called “render blocking.” From an end-user perspective, this is horrible. They will be left with a white screen for much long than is ideal.

    Put some stuff into the Footer. Some code can always go into the footer: analytics code, helper code, code relevant to the lower sections of the page (eg. a dynamic footer).

    Client side Caching

    Make content cacheable. WordPress will put query strings onto the tail end of some URLs and change that string with each load to give you a new and fresh load of that image, script or styling. From an end user perspective, that takes a lot of time.

    Change the Expiry date (it’s a meta data setting in the served assets) to push it days or even months into the future. That let’s a web browser shoulder some of the load and keep copies of those elements on their computer instead of downloading them new with each page load.

    Third Party Assets

    Easy to deploy third party code almost always kill performance. While it’s handy to drop in a snippet from Instagram, Facebook, Google, Click-to-chat, CRM tools, those can kill performance.

    Pull as much as possible into your control. Download Google fonts and serve them from your site or your CDN.

    Deliver the content from server side generated HTML, not Javascript delivered / built code.

    Elect to leave out some of the third party assets on some pages. If performance is really important, be cautious of third party apps.

    Compression

    File downloads are a big time suck. Fewer files to request and smaller files are key.

    Each plugin and theme is likely to introduce several CSS and JS files apiece. This can quickly add to up to 20+ CSS and 20+ Javascript file requests.

    Plugins like AutoOptimize can consolidate the CSS into fewer files and it can do the same with JavaScript.

    Almost every web server is capable of serving out files compressed with GZip. Almost every web browser is capable of decoding GZipped files.

    Server Caching

    Store static copies of complex output (eg. leaderboards, lists of recent posts, stats).

    Optimize code on the server before it is shipped to the client.

    Deploy a plugin like W3 Total Cache, WP Cache, etc.

    Keep-Alive: Time is lost when some browsers reacquire the path to your server with each file request. By tweaking the server’s Keep Alive, you can keep that connection active.

    Content Delivery Networks (CDNs):

    Use a CDN to stow and deliver some of the content.
    A CDN can take the pressure off of the server.
    It can deliver content from a server closer to the end client.

    Flush Your Output

    Hang time is a killer when you’re waiting for a web page. By default, PHP can wait for a good length of time before delivery. It is possible to urge it to begin earlier than otherwise. That sends content back to your audience faster. I do this by putting the flush() call at the top of the page.tpl.php file. If you’re about to output the themed data, you’re ready to deliver content, so I say push it out as soon as you can, even starting the process before the page.tpl.php is populated and served. One thing to note: flushing content may not be a tactic that plays well with GZip.

    Aggregate CSS and Javascript

    You should collapse all of your Javascript and CSS into one file each (all CSS in one; all Javascript in the other). While Drupal does ask for a lot supporting files, it compensates by allowing for the aggregation of Javascript and CSS into collected files. In extreme cases, this knocks down the number of files from 30+ files down to two to four files. If you’re using a CMS make sure it can aggregate these supporting files. If you’re doing a manual web design, make sure you follow this rule as closely as possible.

    CSS Sprites

    CSS sprites use portions of a larger image to fulfill some graphical need on your web page. Spriting isn’t a new concept– I probably built my first sprite for a video game over 25 years ago. But its role in web design is comparatively new.In pursuit of fewer file downloads, you can lump multiple elements into a single image and then use CSS to slice that image for use. There is a lot of finesse to how you slice up an image with CSS. You need to pay attention to how the image will be used and you need to be comfortable using CSS backgrounds with cropping and the repeat concepts figured out.

    Too Much?

    If these performance tips are too much for you to implement, that’s okay. The good news: we deploy these techniques on every site we deploy. Web321 sites get all of the improvements possible to let the site out-perform the competition.

We’ll take good care of your website.

Copyright © 2025 – Web321 | All Right Reserved