While in real life, the concept of control can bring quite a lot of headaches and struggles if it’s poorly interpreted, things are on the opposite side of the spectrum in the digital world.

For instance, trying to be in control of your partner’s choices makes no sense. Give them the due credit and let them make the best decisions. Trust and allow them to be true to themselves, however they define it. Otherwise, it does not only feel weird and frustrating; it will not end okay.

Who wants a relationship where you are living under surveillance all the time?

When it comes to the digital arena, things get various flavors, and it’s wise to deconstruct them thoroughly. You not only need to be in control of your online presence, but there’s no other way around if you want to get results in the long haul.

Please let me walk you through a personal adventure to better grasp the importance of taking good care of your content. I received some valuable lessons, so make sure you learn from my mistakes and do a better job.

For the sake of keeping the narrative crystal clear, I will refer to my website for the rest of the article. Putting skin in the game is something familiar at Pixelgrade, and it brought plenty of good things along the way. Let’s do it!

Keep the keys, outsource what’s mandatory

This experience taught me a few valuable things I still carry with me, so I preach them whenever I have the occasion. The most important lesson I got is that I can’t outsource my responsibility. Having a website comes with both rewards and requests, so I understood what depends on me entirely, whatnot, and whom to work with to solve the things I don’t know.

I used to believe that focusing on crafting stories is enough, but life threw me a different conclusion at me. Now, I’m aware it’s my job to know about things like hosting, which plugins do what, the recurring payment of a domain name, and the importance of keeping WordPress up-to-date (even though I’m not there yet), and such. I have no claim to know them in-depth, but at least I can link the pieces of the puzzle and get the whole picture. In the end, every bit counts and impacts the website’s success no matter how one might put it—through the lens of performance, security, traffic, sales, etc.

Another valuable lesson that stuck with me is the importance of making time to choose the right partner for my needs. When I worked with Thomas and Kevin, I wasn’t looking to save a buck or two; it just felt natural to do stuff with folks from the same community. However, the subconscious thinking showed me that I achieved exactly that. 

I intended to get the job done. I didn’t have the know-how nor the criteria to make the best choices. Everyone was talking in an alien language, which made the communication fragile.

The website is your digital house, and as with the real one, you need to keep the keys in your pocket.

oana

In the end, convenience brought me to a vulnerable spot, where I made poor decisions. Looking back, I still don’t know what would have happened with my website if I did not get a job at Pixelgrade, a place where we help people build solid websites for a living. If I were to be true to myself and honest, chances were super high to have followed in the same path: call a friend, give him whatever he needs to make my website run, trust him entirely, and hope for the best.

The only clarity I had back then was that I was keen to invest all my resources in crafting meaningful stories. They brought me a lot of satisfaction; they kept my wheels spinning; they were the fuel of my website. I did not realize that in the absence of everything else, it’s mission impossible.

Such oversight gives you a lot of peace of mind and the opportunity to shape your growth. There’s no better way to start building a name for yourself, to craft the entire experience for your visitors, to stay in touch with them constantly, to nurture a community around your work than having a reliable website that speaks to the core of your personality.

I’m still learning about the system that governs a website, but I’m grateful to know that I have the right partners shadowing my evolution and giving me little room for mistakes. This serenity contributes to my inner balance, and I genuinely need this safety to keep writing stories that make the world a better place. This is my labor of love and way of contributing to making a dent in the universe.

The post Own your website content to control the experience appeared first on Pixelgrade.

Quick navigation:

• Which images formats to use in WordPress for faster loading
• A complete guide for optimizing images on a WordPress website (5 crystal clear steps to follow plus a bonus)

Along with the advent of the visual web, images have become ubiquitous in and around your content.  

Along with the advent of the visual web, images have become ubiquitous in and around your content.  

The rise in availability of cameras and smartphones with excellent imaging capabilities, combined with an abundance of user-friendly photo editing software, allows everyone the opportunity to create incredible visual content for online usage.

The first part of this story is generally applicable to any image for the web. But since we at Pixelgrade have a knack for WordPress, I will also convey what happens with images from the moment they are uploaded in WordPress until ending up on the frontend of your site.

From photos that convey meaning you can’t express in words, various illustrations that complement and establish the mood of your writing, to graphics and charts that portray information related to your text, the visual canvas of an image is a central part of the toolbox you get when trying to spread your message throughout the web.

This is why I firmly believe you can benefit from a deeper understanding of how these bundles of colored pixels get created, transformed, and ultimately shown in a browser of your choosing.

Let’s dive in!

Which image formats to use in WordPress for faster loading

The first important thing to get to grips with is the concept of image formats and how do the different formats for the web help or prevent you from reaching your online goals.

When captured by the image sensor of a digital device (e.g., your smartphone or a DSLR), each photo initially exists in a raw format. This file holds almost all the data being generated by the sensor – a digital negative if you fancy film photography. 

All this data makes for huge image files; the primary purpose is to lose as little as possible information, not to save on space.

Beyond being this sort of absolute source of truth for the reality you’ve just captured, raw files are too complex to be used further, much less so on the web. 

That is why you take this format and convert it into formats better suited for the medium you are going for (like the web).

Keep in mind: Often, only professional cameras allow you to save raw image files. The rest of the devices convert them automatically into more frequent, more usable formats.

Most of the time you can easily deduce the format of an image from the extension of its file when seeing it in your Finder or Explorer (e.g., .jpg, .png, .svg, .gif, etc.) But why the many formats?

The web is a very diverse place with lots of actors all trying to do good (hopefully) by you, the user. From all the competing solutions trying to solve a particular image problem, in a given context, at a given time in the history of the web, the formats we have today gained traction and stuck around, some longer than they should.

One thing is clear: no image format will solve all problems. Choosing a specific one for your image implies accepting the compromises baked in its algorithm. To keep things “fun,” browser incompatibilities throw you the occasional curveball.

On the web, the most used (and safe to use) image formats are JPEG and PNG. While both are good friends with your browser, they are quite different since they were created for distinct use-cases.

On the one side, PNG is a lossless format in that it doesn’t lose visual details from the original image (at the same resolution). On the other one, JPEG has always tried to find the best balance between file size and visual fidelity, as a self-respecting lossy format should do.

The differences don’t stop here. For example, PNGs have an alpha channel besides the RGB trio, meaning you can have transparency. JPEGs are a no-go since its algorithm focuses on file size efficiency and adding transparency into the mix cancels out many of its tricks. 

PNGs are the ones that provide you with more flexibility and control, but JPEGs are your workhorse, your it-just-works solution.

Keep in mind: Image formats, like the web, don’t stand still and new format proposals pop up all the time aiming at improving the performance and flexibility of older ones. For example, JPEG2000 is a smarter JPEG-like format that allows for transparency or WebP from Google that promises to be the best of both worlds combining the advantages of PNG with the ones of JPEG, and then some – it can be lossless and lossy.

Why do images matter so much that browser makers lead veritable wars for crowning the better format (here, here)? For a straightforward and crystal clear reason: performance!

Ideally, we would all use uncompressed images, and everybody would be happy. Except we are humans and we always want more than we have; performance is no exception. 

Images have a very big impact on the loading times of a web page, averaging over 60% of the data transfer (video is close by and a similar discussion is taking place on that front also).

Ready to grasp our in-depth guide on making the most out of the images on your WordPress website without ruining the experience?

A complete guide for optimizing images on a WordPress website (5 crystal clear steps to follow plus a bonus)

With the risk of repeating myself, let me point out once more that we are talking about getting your photos on the web. Keep in mind that the steps that follow would be very different if you would be targeting print or video.

Step 1 — Choose the right format for your images

In general, you should employ a JPEG-first attitude. When transparency is not a consideration, go with a JPEG file with a decent compression ratio of 7 or 8. The scale is from 1 to 10, 1 being the highest compression and ten the least amount.

If you need transparency, then you definitely need the trusted PNG. Even though you don’t need to worry about losing details, you still have a couple of optimization tricks you can employ from time to time.

For instance, limiting the color palette (the default is a true-color palette – PNG-24, but you can try a reduced one for logos and graphics with few distinct colors – PNG-8). Your image editing software should give you these options when saving as .png.

Step 2 — Choose the pixel dimensions (resolution)

A crucial factor in determining an image file’s bytes size is the number of pixels it is formed from, the resolution.

Think of a digital picture as a two-dimensional matrix consisting of cells (pixels or px for short) arranged into rows and columns. An image 1000 pixels wide and 1000 tall represents a one megapixel image (1000×1000 = one million pixels).

Often the image captured by the camera is a large, high resolution one (20-50 Megapixels). While such dimensions are handy for large prints, for the web it doesn’t make any sense.

For the web, the general principle to follow is this: the smaller the resolution, the better. But how small is enough and where do we cross the line and end up with an unusable image?

It all comes down to future-proofing our [image] content. The layout (or theme if you are into WordPress) used to display your content is very likely to change in the future. The future layouts may use larger display sizes than your current one, or screen technologies will change and demand ever-increasing resolutions (see retina displays).

It is wise to size our images with a reasonable margin and aim for “safe” dimensions – somewhere between 2000px to 3000px in either width or height should suffice. Remember to always strive for the smaller number.

It is key to remember that this is the original image that you upload – think of it as the source of truth. It will very rarely be displayed or loaded at these dimensions. Also, this image represents the maximum quality (or information) available from here on out. At any step, the quality may decline but never exceed this one.

Keep in mind: After deciding on your image format and dimensions, I recommend the use of a simple local app for optimizing images. ImageOptim for Mac users or FileOptimizer for Windows folks. They strip out any meta-data in your files that is not needed for the web and do any optimizations that can be made lossless. Use one of these tools before uploading it.

Step 3 — Upload your image into WordPress

Now we start to look at the specifics of working with images in WordPress (or in most other CMSes).

When you upload an image through the WordPress interface (e.g., when editing a post), it goes through a series of transformations.

Depending on the needs of your theme and/or active plugins, from the original image (that is saved as it is) a series of thumbnails are automatically generated. These thumbnails are just miniature versions of your image of various sizes and aspect ratios.

The default behavior of WordPress is to keep the format and compression ratio of your original image when generating thumbnails. Thus, you can be sure that there is no loss of quality.

An important aspect of thumbnails is that they can be resized versions of the uploaded image (keeping the aspect ratio) or cropped ones (scaling and at the same time cutting certain parts to reach a new, desired, aspect ratio – for example a square thumbnail). 

Mainly your current theme decides how each thumbnail will be created, leaving little to no options for you to tackle.

Step 4 — Insert your image into the content

Once the image is uploaded, and thumbnails have been generated, you proceed to insert your image into your content – an article, a presentation page, or a product you sell.

Before you hit that sweet Insert button, you get to choose whether to use the original uploaded size (Full) or one of the thumbnail sizes (e.g. Large, Medium, Small). Go with the smallest one that suits your needs, but almost never with Full.

Besides inserting it into some textual content, an image can also be attached to a post or page in various forms. As a featured image, a hero or cover photo, part of a gallery, etc. – the image is becoming part of the meta-information around content. 

In these scenarios, most of the time, the decisions regarding whether to use the original image size or various thumbnail sizes are made programmatically by your theme or plugins.

Step 5 — Display the image to your visitors

We are almost at the end of the rainbow, and it’s about time to make all those decisions count. Let’s fire up some pixels on your readers’ screen.

We are almost at the end of the rainbow, and it’s about time to make all those decisions count. Let’s fire up some pixels on your readers’ screen.

Who does display the image? It is not you or me. You might say: this is WordPress’ job! Strangely, it isn’t. WordPress doesn’t display images; its responsibility lies only in assembling the page source (the HTML code) requested by the visitor via his browser. 

In that HTML code, you will find your image’s URL (usually as part of a <img> tag). Here is where WordPress’ responsibility ends – what comes next is literally out of its hands.

The question still stands: who puts your image in front of those starry-eyed readers? Well, their browser, of course! 

Not your browser running on this year’s hardware, with the power cord safely plugged in, a decent number of opened tabs and, last but not least, a broadband Internet connection.

Once WordPress has finished its job, your content(including images) is in the wild, all grown up and ready to face the realities of the web.

All jokes aside, the staggering diversity of environments your content will be displayed in should steer you towards having a more empathic attitude towards your readers. 

There are countless people (even in developed countries) that access your site on 3G or flaky 4G or have modest laptops that don’t have a quarter of a battery charge to spare just to visit a website.

Even if we put Internet speeds and hardware aside, we are still not out of the woods. The best is yet to come if you can bear with me a little longer. If not, I understand – all these decisions and complexity need some space to settle in.

Here’s the bonus: understand how browsers deal with images

What follows is an attempt at helping you better understand the inner “thoughts” of browsers as they tirelessly work to “paint” your images on other people’s displays. 

It is essential in properly calibrating your expectations when it comes to images on the web. So, once it receives the HTML, the browser gets busy and begins to analyze it with the sole aim of showing as fast as possible some pixels on the screen and avoid boring the pair of eyes in front of it.

When it encounters an image, it downloads the image file locally. Next, by interpreting the stylesheet(s) received for the page, the browser decides what the actual screen dimensions it needs to display the image at are.

Maybe it has “received” a 2000px by 1000px image but it needs to show it shrunken to 1000px by 500px. The browser is not fussy and gets cranking… 

It uses the big image and processes it on-the-fly to come up with a 1000×500 version of it to light up those pixels.

Since it operates under the pressure of boredom and available processing power, the browser needs to be extremely fast in this undertaking. The advanced algorithms used in your editing software or by WordPress when generating thumbnails have no place here. 

So the browser, more often than not, will cut corners and chose speed over quality – as in your images to be displayed at an unpredictable quality.

The same can happen when the browser receives a 500px by 500px image and needs to display it at 600px by 600px. Now it needs to “invent” some pixels – it does a surprisingly good job.

Besides these fundamental compromises baked into modern browsers, it is worth remembering that they are complex (open-source) projects and they have their fair share of bugs and incompatibilities (here, here, and here).

You could safely think: why not insert or generate the exact image size needed? All these “browser problems” would go away! If only it could be so simple – imagine all the sleepless nights we could save on this planet.

Remember that WordPress(aka the server-side of your site) is the one generating the thumbnails when you upload your image. 

Neither you or WordPress can know beforehand the variety of sizes needed. And in a world of literally limitless display sizes (small or large smartphones, phablets, tablets, laptops, desktop displays, TVs, etc.) it would be pointless even to try.

If all this sounds scary, you are not alone. Thankfully, where there are problems on the web, there is no shortage of solutions.

In recent years, the concept of responsive-images has surfaced to try and alleviate part of these problems and boost performance – at the cost of increased complexity.

The main idea is that WordPress shouldn’t offer the browser just one image URL, but several (usually most of the thumbnails that we have), and based on some rules we leave it to the browser to decide the best one to use. The principle is that the browser is the most knowledgeable of the reader’s context.

Still trying to boost performance, this time, the perceived performance by people, the concept of lazy-loading has gained momentum. 

This means loading (or downloading if you will) the images closer to the moment they are actually needed to be displayed (oftentimes as one scroll).

An unwanted side-effect of lazy-loading is the possibility of visual glitches, like images “jumping” into view due to the time difference between the detection and actually finalizing the transfer. As the saying goes, win some, lose some.

On top of these, some try to progressively load images by first transferring a tiny thumbnail and fetching the actual image behind the scenes – this aims at showing something as quickly as possible. Google has pioneered a new image format with this in mind (WebP), while Medium has taken this technique mainstream.

In a WordPress context, you already benefit from responsive-images, while lazy-loading or progressive-loading are available through various plugins. The setup is not so straight forward and may require technical assistance.

As you have seen, when it comes to digital images, the web is a wild environment and should be accepted as such if you value your good karma. The web is not the place of picture-perfect! It is the place of as-perfect-as-possible.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

This article is the fifth one in our series about web performance in general, and WordPress in particular. Even if I know for a fact 🤞 that you’ve kept a watchful eye on this series, here are the topics covered previously: a holistic view on web performance, decisive steps to choose your site’s hosting service, and setting up your website for top performance and Zen (or Jedi) mastery.

The post How to optimize images in WordPress for faster loading (complete guide) appeared first on Pixelgrade.

Throughout this series focused on web performance, you and I took a deep dive into the underlying philosophy and technological intricacies that impact performance in an online context.

Sometimes, I purposely took things slow and meandered into the all-to-important human side of things (probably bordering boredom), while, at other times, I picked up speed (for extra drama) when the more technical aspects needed to be analyzed. 

Now, we are going to go bananas. 🐒 I believe the time is right for a brain-dump of all the actionable things I have learned and tested throughout the years, in the WordPress ecosystem. So roll up your sleeves, put on a bandana, and try to keep up.

Cache everything

There is no getting around this one. You can not have a performant WordPress site without some form of caching, at least not in this day and age.

The expectations of both users and the Googles of the world have reached such heights that no matter how fast your PHP server is, it can’t serve up the HTML of your pages at the speed required for a blazing fast experience.

WordPress has no shortage of caching plugins that promise to take this off your plate. Sadly, the sheer volume of options doesn’t make your life consistently easier. This is because caching, despite being on everyone’s tongue, is not an easy problem to solve.

Sure, one could boil it down to: just capture the entire HTML of each page, save it as an HTML file somewhere, and then serve that directly, bypassing the PHP server.

The problem is that this is only half the problem, the easy part; the harder part is invalidating or refreshing the cache once you update your content (including publishing a new post, updating a plugin or theme).

Any self-respecting computer engineer will tell you that the two hardest problems in computer science, by far, are “naming things” (I am not kidding) and “cache invalidation.”

When it comes to caching, the last thing you want to do is a full cache refresh – delete everything you have in the cache and let it rebuild itself. This is very resource intensive and can temporarily degrade your website performance.

What you want is to refresh the least amount of cached pages while maintaining consistency. Easier said than done with highly dynamic, interconnected pages (like the sites we have today).

Since you don’t want to get bogged down into all the technical details of your site’s content, you rely on the caching plugin to do the hard work of determining (programmatically) what should be refreshed on each modification you make. Few plugins manage to do this consistently.

My go-to solution for caching today is WP Rocket. This is hands down the most bulletproof caching solution in the WordPress ecosystem today. To top it all up, this is also one of the easiest to use – talk about win-win situations. It is a premium plugin, but I am very confident it is worth every penny.

So do yourself a favor and don’t bother with free solutions. You are just going to waste a ton of time, endure plenty of headaches, only to come back to this solution.

Note: Managed WordPress hosting services usually have very good caching solutions implemented at a lower level (right in their infrastructure, not as WordPress plugins). You would have a hard time getting better performance out of a plugin solution (WP Rocket included). One thing to keep in mind when choosing your hosting. 

…except for WooCommerce

The dynamic nature of eCommerce makes it very hard and very tricky to cache. In the case of full-page caching (the most common type), if a single thing on the page changes, the entire page cache needs to be refreshed.

WooCommerce pages like checkout, cart, account are always left uncached (they might be referred to as skipped or excluded). This is because 99% of the time, each visitor to those pages will see different content, so there is no point in even trying to cache them.

Now you may have landing pages, pricing, or product pages that adapt to the user’s journey through your site. Those too can’t be cached because for the same URL you are using different content depending on who is watching.

You will need to manually fine tune the caching settings to account for this since no plugin can be aware of these particularities of your site.

Even if you can’t cache the HTML of these pages, you can still cache optimized versions of the static assets on these pages, like CSS, JS, and image files.

This is more the realm of art, than exact science because there is a truckload of factors that come into play: from your server’s capabilities, to whether or not to use a CDN service, to what plugins you are using, to finally the way your theme displays things. Best to leave this part to professionals, if you can afford it.

Note: There are dedicated managed WordPress hosting services aimed explicitly at WooCommerce that, again, take care of this on a lower level. They are not cheap, but if your sales can take it, you might want to consider them. Cloudways and LiquidWeb are a few of them.

Caching on steroids

All I have said so far applies in situations where you go for off-the-shelf, relatively cheap solutions. The kind of solutions most suited to individuals or small companies. But for the curious bunch among you, let me take a brief stab at explaining the way the “big boys” do it – just for the sake of keeping things in perspective. 

As a site owner, you might drool over the speed of the BBCs and Amazons of the world. You might even wonder: is there a way my site could load this fast? Open up your umbrellas: no, it couldn’t – not at a similar complexity.

To get to that level of performance, and keep it up there, you would need a totally custom site tailored to your content needs, your audience, and priorities. You simply cannot expect something off-the-shelf to have this kind of adaptability, even if “it’s just code.”

The “big boys” have tens, most often hundreds of designers and developers working to fine-tune that, optimize this, rebuild that using the latest and greatest technological advancement, rewrite this part for a minor increase in performance (and engagement). Performance at scale is hard and expensive.

Let me just give you a quick peek into such a high-end approach to the problem of cache invalidation described earlier. 

First, full cache refresh is not an option – some people will probably get fired if it comes down to that. 

Second, there is no single cache. There are layers upon layers of caches, each dedicated to a specific part of the page or of the data needed on that page. 

Third, a page is constructed from different components, each with their separate pipeline for generating the final HTML you see. 

Forth, each distinctive page (such as the product page) is optimized to contain the bare minimum in terms of CSS and JS (no global theme style.css in sight). 

Finally, nobody working on the content-side of such a site has the smallest expectation that his or her changes will appear immediately live (such as a product description change). The changes will be allowed to propagate throughout the various layers as fast as possible without damaging the performance and stability of the system.

As you can see, it’s OK to be curious and dream about performance Nirvana, but you need to be pragmatic about the costs and dedication involved.

Not from your neighborhood

When it comes to web performance, you need to get to grips with the fact that what matters is the experience of your audience, no matter where they might be located.

Often, people test their site on their own computer and phone, both on the same broadband connection. Sometimes, they might ask a friend or two to do the same from their home – most often they live nearby and have about the same income, hence the same high internet speed.

To mitigate this bias, a whole host of online services have sprung up, including the one from the “big daddy” of web performance, Google’s PageSpeed Insights. They analyze things algorithmically, following the latest guidelines and recommendations, from various locations around the world. Problem solved, carry on.

Not so fast. You need to do something with those insights, on top of the knowledge only you can possess. First, based on your target audience, you decide where your hosting should have its servers. The closer to your audience, the better. 

Second, you need to gauge the geographical spread of this audience. Is it highly concentrated in a Californian county or a Swiss canton? Or are you targeting English-speaking, bearded males in their 30s – can it get more cliché than this? – from both the US and the European Union?

With the first group, you can get away with just your server, but with the second one, you need to distribute things.

But Vlad, the last I heard we live in the 21st century, the internet is everywhere, I can Facetime with my friends from thousands of miles away, without a hitch.

Yes, it is, and yes you can. But that doesn’t mean anything. The Internet is a very fragile thing, much more so than most of its users realize. The infrastructure it relies on is a hodgepodge of independently developed networks forced to work together to the best of their abilities.

Big companies like Facebook or Netflix have developed a plethora of technologies to mitigate such a reality, but only for specific usages (like video).

CDN to the rescue. The name says it all: Content Delivery Network. Actually, not so much if you are not geekish at heart. A CDN service will spread your site’s static assets (CSS, JS, and image files aka the bulk of the stuff your readers wait for) across a series of interconnected servers. 

Nothing unusual if it wasn’t for two characteristics of these servers. One, they are geographically distributed throughout the globe, thus much more likely to be closer to your readers’ location.

Two, they are strategically (and expensively) positioned right next to major Internet junctions (look up “internet backbone” if in search of adventure), thus benefiting from far higher transfer speeds across the globe.

So, sign-up to a CDN provider of your choice (if your hosting provider doesn’t come with one), plug it into your caching solution and let it fly.

CDN on steroids

I’ve already mentioned Cloudflare when I talked about choosing your hosting provider, but only focused on their free plan as a sure way to give your site a performance boost, on the cheap.

Cloudflare is the real deal when it comes to web performance. They have managed to build such a vast, comprehensive and technically advanced stack that one can only marvel at. While their free plan only skims the surface, once you start paying things really take off.

Think of Cloudflare as a way to get access to some of those “big boys toys” that I’ve talked about earlier, but at a fraction of their cost. Hell, most of the large sites out there use them on top of their custom optimizations.

To consider Cloudflare a CDN is a huge understatement. Besides CDN, they provide really advanced security, automatic CSS and JS optimization, automatic image optimization and improved loading, even HTML caching (your visitors could still reach your site even if your server is down), to name a few. Performance and security bonanza.

There are some caveats since this is, after all, a general service with limited flexibility, but you should really give it a try if you are more of a technical kind. Some frictions appear when dealing with highly dynamic pages like the WooCommerce ones, but are solvable with the higher tier plans. 

What about those pesky images

Love them all you can, but images are the log in the proverbial eye. No matter what you do to increase your web performance, you always revolve around them since this is the battle that decides the outcome of the war.

Even if you do all the caching in the world, distribute your files at the doorstep of every reader, if left unchecked, your images will still ruin everything.

I’ve already made my peace that you want them, despite my best efforts to explain why you shouldn’t. So what can we do to solve this shit once and for all?

There is no silver bullet since you want them because you intend to show them to your readers. One way or another, the image file needs to get from a server (CDN or not) to your visitor’s browser. That’s a given.

The only way to gain ground is to get creative and take advantage of the limitations inherent in our hardware and minds. Welcome to the land of perceived performance.

We will start by not loading the images at all (don’t show me those bulging eyes), and play a game of chicken with the reader by loading each image as late as possible. Voilà, lazy-loading images! 

That is it. The textual content loads as fast as possible, the Googles of the world are happy that people get to actually reading faster, the images are still there for indexing and SEO gains, your readers will not know the difference (most of the time). All these because the actual trickery is mostly done in the browser via a bit of JS.

Lazy-loading images is pretty much mainstream right now. Caching plugins like WP Rocket provide it out-of-the-box (even for videos), services like Cloudflare Pro do it for you (and take it to the extreme – think how images load on Medium).

All you need to do is make sure your WordPress theme plays well with it, as some layout problems might occur, especially with image heavy layouts.

What is going on with plugins

You’ve brought your images into submission, but, somehow you are still not pleasing the metrics Gods. All your effort seems futile. Don’t despair as you have made great strides and what remains is manageable, to some extent.

Most of the remaining “red flags” tools like PageSpeed Insights nag you about are ultimately related to your active WordPress plugins.

The problem is that each plugin with a front-facing job is very likely to add a CSS and/or a JS file to your pages (at least). These allow the plugin to live up to its promise: display a cart button, show a slideshow of images, provide social share buttons or newsletter subscription.

Since each of them is a separate product, each needs to cover for its own needs and behave in a way most likely to cover all use cases, of all users (not just you).

In the ideal scenario, each plugin would add CSS or JS files only to the pages that actually make use of its features. The reality is often somewhere between “I have no reliable way of knowing, so I will load my stuff everywhere” and “I could restrain myself, but I forgot or my developer hasn’t improved me.”

This leaves you, the site owner, with that endless list of files being loaded ruining your previous performance efforts. The solution is neither straight forward, neither without risks.

Note: Besides plugins, analytics, and tracking services (including social buttons) seem to load JS files like it’s Christmas. Exercise extra restraint with those. 

One way to clean up your pages from unneeded files are plugins that allow you to decide on a page by page basis (or group of pages) what CSS or JS files should not be loaded since they are not being actually used. One such plugin is Perfmatters.

Armed with such a tool, you start with your most important pages (probably your front page is a good place to start), look at the provided list of files and based on your knowledge decide if it should be there or not.

You can easily break things if you don’t have the full picture, so proceed with care, or leave it up to a professional. Thankfully, there are undo and reset buttons.

The brain-dump is over, and I hope you’ve managed to keep up and get some valuable insights.

Remember that web performance is a never-ending, relentless struggle. Whenever you can find the time or resources to invest in it you should do so since, most often, you need to do stuff just to stay in the same place.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

This article is the sixth one in our series about web performance in general, and WordPress in particular. For the sake of navigation, here are the topics covered previously: a holistic view on web performance, decisive steps to choose your site’s hosting service, getting intimate with the journey of an image on the web, setting up your website for top performance, and crafting your website content for performance bliss.

The post Take your WordPress site performance through the roof appeared first on Pixelgrade.

Content is king 👑! Content is here to stay ✊! Write killer content 🦈! Content is king, but context is God ⛪️! If content is king, then context is queen 👸🏻!

This is my way of starting on a high emoji-note, getting you all flabbergasted by cliché bonanza, and clearing the air for a more down-to-earth conversation. Take a few moments… let the tons of memes play out in your head… get it out of your system…breathe.

Now join me on a “casual” walk through the narrow pass between the highlands of click-bait-SEO-Google-growth-hack “glory” and the lowlands of never-read-404-pretty-battery-hog “agony.” I can’t promise you a safe passage, but, at the very least, it will be fun.

A frame is worth zero words

I know for a fact 🤞that you’ve been keeping a close eye on this series of stories about web performance. But just in case you forgot, previously, you’ve made up your mind about what you absolutely need to put in your digital home to make everything work smoothly. You built up the structure of your website.

I guess it’s about time to do some plastering, some painting, some prettifying. You are about to create a beautiful frame worthy of your soon to be content. You are ready to let loose those fizzy creative juices– they’ve been brewing for far too long.

Stop it. Just hold it in. Remember ☝️: we are on a narrow mountain pass. We have come so far together, and I am not going to let you slip on me now.

A frame is just that: a frame, a necessary compromise to structure your site’s content.

Keep it as minimal as possible. Don’t let it sneak up on you and get center stage. Once it did, you are very unlikely to reign it in. After all, it is your creation.

Things like the site’s header, sidebars, footer are all part of the frame. They help create a consistent experience across your pages, they help your readers feel at ease with a sense of familiarity, they provide essential services like navigation, discoverability, contact and the almighty subscribe.

That is all your frame should be allowed to do. And do it very efficiently, performance-wise:

• No long personal “epitaph” in the sidebar – that is what about pages were invented for 🗿
• No images unless the gods demand that sacrifice 🙏
• No header background image – a color, or two will suffice 🌈
• No latest comments, tag clouds, Facebook or Twitter feed widgets… because it’s not 2015 anymore 🤦‍♀️
• No pop-ups, side-windows or bottom-bars (unless obliged by GDPR) – you might stumble and fall off the path 👋

If you can manage to construct everything in your site’s “frame” out of text and CSS styling (like borders, backgrounds, some icons), you should give yourself a nice, long hug 🤗Your site has wings now.

The frame is optional

There is an all-too-common bias when it comes to websites and their “frame”: all that planning and effort will payoff since “a frame is forever” – you built it once and then it will do its job over and over again.

Sorry to ruin it for you, but this is simply not the reality of the web. Not today, maybe it was 15 years ago. Actually, it was never the intention of the world wide web to become a gallery of carefully crafted frames filled with content – glorified containers if you like.

Slowly, but surely, the frame is made obsolete. Gone are the “classicist” days of the 19th-century art. Embrace the frameless modernists, the contemporary street-art.

Your content (pages, stories, photos, videos) is getting a life of its own. Your readers are increasingly all-mobile, they are trying to make sense and find balance in an increasingly noisy world through apps that curate or gather content from various sources, people are saving content for later read in note-taking apps and services.

At the same time, you are keener to distribute your content wherever your audience is, rather than shepherding them to your own site.

Think mobile screens, RSS feed readers, Google AMP, Facebook posts, Medium publications, Apple News, Pocket, Instapaper. The list is endless, and the direction is clear: content is all that matters, not the frame.

Take this as an extra incentive to be as frugal as possible with the decorations around your content. It’s a shame to waste precious resources on something your readers are trying to get rid of.

But what about ME?

Doesn’t this mean that I can’t express my individuality, my brand… my ME?

There, there. Shake it off. We are better than that. We are more confident than that. We are also on a narrow path and need to stay firm on our feet.

Embrace this new reality, these constraints, and focus all your branding efforts on your content. Fuse your personal or business style with your content. Make them inseparable.

Focus on typography, formatting, visuals and illustrations, consistency across the board.

Your readers will appreciate the effort invested into the actual work, and your brand will become that more pervasive and resilient to the dynamics of the web.

What does this have to do with performance, you may ask? Everything! Like I’ve previously said in this series, you don’t gain performance, you lose it, you spend your performance budget. With this attitude towards your content and its frame, you are much more likely to spend much of that in the area that matters most to you and your readers.

1000 words per image

Actually, at the very least 1000 words per image. And since you are a really crafty image-maker, your’s are probably worth close to 2000 words, some even 2364. With the right alternation of images and textual content, you can say so much more. Much, much more…

After this healthy dose of not-so-subtle irony, let’s get real about images. There is photography where the image is the main content and text is secondary.

And then there is illustration/visualization where text is the main actor and the visuals are only there to reinforce and complement, secondary at best. There are rare cases where the two are on equal footing, but it is hardly the case online.

My focus is on the second case, that where we feel the need to add images to our “walls of text” to make them moodier, easier to swallow, funnier, or simply more professional looking.

I too have this feeling, this urge to do more for one’s crafted content, this desire to convey the message in multiple ways.

For the sake of your site’s performance, you and I both can do better, we can be more creative and subtle:

• Text can (also) have graphical properties: think about neatly styled quotes, expertly inserted forms or call-to-actions, drop caps (that big letter at the beginning of a paragraph), even the old fashioned bold and italics can do a lot if adequately considered.
• Achieve rhythm in your story through the proper use of headings and subheadings.
• A paragraph or a group of them can have a different background color – almost like a cover image.
• Play with empty space (colored or not), spacers and dividers

All these, and so many more are in the realm of what professional designers call: typography. It’s a realm of purity and ingenuity, of exploration into the subtleties of letters and graphics, of print-meet-your-pixel.

But, before I lose you to swirls of fonts or google searches, back to reality: using typography instead of images is decidedly more performant. Even with all the intricacies of downloading a couple of font files, extra CSS styling, the performance cost doesn’t come near a single full-width image.

I see you somewhat persuaded, but not by much. The allure of those 1000 words is deep. It feels like the safer bet, the thing that everybody is doing.

Consider this: an image may “speak” a 1000 words, but whose words are they? Your words? Or are they whatever the reader wants to see and hear?

When an image is a work of art (like artistic photography) that is the exact effect you are after – you count on that personal interpretation. But when an image is to be mere decoration, would you risk conveying the wrong message, in misalignment with your story?

No 👊! Images are just my thing

Hold on there, Mr. Frodo! You carry a great burden 💍.. We could share the load 🤫

If I need to make it any clearer, images are your site’s performance Achilles heel. 🦶With just a couple of clicks you can easily double, triple, quadruple your load time. But since you must, let’s explore some of the ways you could reign them in and maintain some performance balance.

First, you need to study and get to know this burden. Without a proper understanding of the powers at play when it comes to images, all our journey so far would have been for nothing.

As part of this series about web performance, I have written at length about the journey an image has to make before ending up on a screen near you. I won’t go into all that again, but I will give you the gist of it:

• An image file is nothing more than a long list of pixels and some extra metadata; a 1000×500 pixels image means 500K pixels adding up to at least 150-200 KB of data; this whole article’s text (in HTML) is around 10KB
• The format you use for your images makes a huge difference in file size; use JPEGs by default, PNGs when transparency is needed
• Pay close attention to the maximum pixel size of your image file and the size you use it at in your content; smaller is always better
• Use tools specially made to optimize images for use on the web
• Let go of picture-perfect and embrace as-perfect-as-possible.

Now, I couldn’t call myself a proper companion if I wouldn’t do a little pushback and share some trickery:

• If you use simple illustrations, like vector graphics, consider using the SVG format; it is very efficient in terms of size (it’s just text); there are tools that can (try to) convert regular images into SVGs; here is a simple how-to related to WordPress and some tools
• If you want your visitors to look at photos in as much detail as possible, consider using a lightbox system where you would include a smallish thumbnail in the content and, on click, a full-screen modal would open up with the full-size image; here is a WordPress plugin just for this
• Videos are surprisingly performant when taking into account their complexity; due to the explosive growth of online video distribution, video player technology is very much at the cutting-edge of performance; generally, video players load the actual video only when it’s needed, they don’t drag down the loading of the page
• Consider using lazy-loading for images on your site; at least, this way each image will be loaded only when it’s time to display it, on scroll
• Use automatic image optimization so you can get an extra performance layer; there are various WordPress plugins that provide this with ease (Imagify, Smush, Compress JPEG & PNG Images).

So, add images in your content if you must, but make sure you give them their due attention and optimization. Don’t let them burn through all of your performance budget and then some.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

We’ve made it! Though shaky or overly enthusiastic at times, you and I managed to find our way.

Craft your site’s content with performance in mind, and it will be well equipped to live up to its full potential – however big or small that is. If you manage also to create good writing to start with, you and your site are a thing of beauty. 🤩🙇‍♀️🙇‍♂

This article is the fifth one in our series about web performance in general, and WordPress in particular. Even if I know for a fact 🤞 that you’ve kept a watchful eye on this series, here are the topics covered previously: a holistic view on web performance, decisive steps to choose your site’s hosting service, getting intimate with the journey of an image on the web, and setting up your website for top performance and Zen (or Jedi) mastery.

The post Craft your website content for optimal performance appeared first on Pixelgrade.

One of the goals I have with this series of stories is to help you find and maintain a balance between your dreams and pragmatism. It is far from easy, so don’t beat yourself up too much when things slip on either side – thankfully it’s just the web, the most flexible playground there is.

Part #1 – Managing your desires for performance’s sake

A curious thing about performance is that you don’t gain it, most often you lose it. Your future site, in its most basic form (text wrapped in HTML) is a dream-come-true for performance zealots. The only things keeping it back are background infrastructure and a 2G connection.

Starting from this utterly utopic state of things, as you begin adding stuff like styles, images, animations, backend behavior – you know… 2019 sort of stuff,  as you start building an actual house not just a place to sit under a tree, you also chip away at that performance. The main thing is knowing how to lose it for the right reasons.

The architect within

From my own experience as an architect (the kind that designs houses, not software), I know that everyone has an almost instant, confident answer to the question: How should your house be like?

Each of us has a dream scenario in our heads about fulfilling that most basic of needs – the need for shelter. This virtual home evolves throughout our lives, like an imaginary friend, unconsciously “stealing” bits and pieces from past homes, from movies and magazines, from our travels.

It becomes a scrapbook of desires ready to be dumped all at once the minute we decide (and afford) to build our own house. The same thing can happen in the digital realm.

Considering you are well on your way towards building a digital home for yourself or your business, I think it’s fair to assume you possess considerable past experiences with the web.

From browsing for your news, online shopping, interacting on various social media outlets, researching and learning new stuff, to online banking and interacting with local or state authorities, all this is your very own digital experience.

You think about your present site through the lenses of your past experiences. This can mean more inspiration to draw from, a stronger sense of what is possible and what others are doing, more room for you to imagine what you think you need to get the job done. These are all positive traits that can boost you and your project to success, however you may define it.

At the same time, you need to be aware that the same past experiences have “retrofitted” you with biases of all kinds. You may have confirmation bias (a quite common one) and ignore different, but equally suitable ways of doing things. You may have revolved, unknowingly, in certain bubbles and your expectations reflect that, but your readers or customers may not. You may be overstretching your knowledge of the online world and thus oversimplify the importance of some things, while conflating the importance of others.

It is helpful to actively maintain a balance between trusting your gut and questioning the knowledge and understanding you bring to the table.

Less is more when it comes to performance

Continuing with the house metaphor, while in real life your pocket’s size will tend to be inversely proportional with the scope of your desires, so too your site’s performance will dwindle the more stuff (aka features) you cram into it. Professionals actually speak in terms of your site’s performance budget. Keep that in mind while making decisions.

By pretty much any historical standard, we live in an age of plenty, and more so on the Internet. With the relentless blossoming of free and open-source solutions (abbreviated as FOSS if you want to speak geek), it seems pretty much anything is possible, without much effort.

Solutions are everywhere, tutorials to guide you along are a google search away, community advice is ever present. You are in the promised land of possibility.

The everyday reality is quite different. All these competing solutions add up to a lot of strain and uncertainty. The deluge of promotions disguised as advice is more than one person can handle (professional or not).

The bombastic language where everyone, and anything, is #1 that and #1 this, leads to more confusion rather than clarity. Trust is hard to come by, and you end up endlessly feeling unsure of the choices you’ve made.

Today, I see only one mindset that can counter this reality: be as frugal or thrifty as you can. Real life economics or principles don’t apply in the same way when it comes to free and open-source software.

There are no missed opportunities that can never be reclaimed – you can always change your mind and try something you considered a year ago. You can never cover all your bases because there are too many of them and they are always changing – so why bother?

Always question what you want

The first step in the frugality I just talked about is filtering your own desires. We, humans, are complex creatures, with complicated lives and even more convoluted minds. But this doesn’t mean your website should reflect that. On the contrary, your site should be an exercise in simplicity, a stepping stone to Zen (or Jedi) mastery.

I can hear you craving for something actionable by now. OK, OK, I will pause for a bit.

1. Write down the definition of success you have for your site. It can be anything, but do yourself a favor and be sincere. If you manage to be brief, all the better.
2. Make a list of everything you want your site to have – feet off the brake. Go wild and document any little thing that is part of your vision. From “I want a large, centered logo” to “I want a newsletter subscription form” or “A Google Maps section is a must have.”
3. Now ruthlessly question each item on the list. I know you’ve poured your heart and soul there, you love each and every bullet point. Trust me, you need to reach out to your rational side and decide on each one if it is absolutely necessary for the success of your site. If in reasonable doubt, kill it.

Do this exercise when you have a couple of hours of alone, quiet time – you’re gonna need it.

With this newfound clarity on what your site actually needs to get the job done, let’s continue down the rabbit hole of making further decisions.

Everybody wants to be your site’s friend

Solutions on the web are increasingly presented to you as cheap, easy to understand, plug-and-play cloud services.

This makes all the sense in the world for those providing them: subscription-based business models, superior control of infrastructure and development, usage data to drive product decisions, a direct relationship with the customer, etc.

It makes sense for you also: plenty of features, superior service, reduced risk, lower cognitive load, constant improvements, etc.

The day to day reality is quite different. The last I heard, you are not trying to build the next Amazon.com, some big corporate or world-wide charity website.

If that’s the case, then I am barking at the wrong tree, and you should seek professional help (not the medical kind). You are on a small budget and wish to make the most out of it by leveraging the open-source software ecosystem.

While making full use of those services sounds glorious, what is actually happening is wishful thinking (I am guilty of this too).

You imagine yourself reaching such success with your site that all those control panels are brimming with activity, those emailing lists growing by the minute, that Google Analytics world map packed full of lovable dots, that comments section buzzing with people anxiously waiting for their thoughts to instantly be approved. Every one of those bits and pieces you’ve plugged into your home is working to the max.

More often than not, you will get to actually use about 10-20% of a platform’s functionality, and you will do so rarely, further diminishing their usefulness to you. Oh, and when you want those services talking to each other, the real fun begins – more services are needed. All the while, your site and your readers will pay the price, in performance that is.

Each external service you add to your site has a direct performance cost. No exceptions.

Think twice, actually many times, if you want to know everything about your visitors or just the number of times a certain article has been read; if your users are actually into Twitter, Facebook or Pinterest sharing (yes, those little buttons are a direct line to their servers); if you need that newsletter building platform, that social commenting system, that…The list is endless.

On top of performance costs, each of your “friends” represents a privacy and security risk to you and your visitors, one that is totally out of your control.

So, exercise extra restraint when thinking of adding external services as you are quite unlikely to pull them out – personal biases, marketing, and lock-in effects considered. Use them if they really solve a pain you and your site have in the present, not in the [ideal] future. 

Take pride in your choices

Be proud of that missing pop-up subscribe form. Be proud of your non-existent full-width, full-height slideshow. Be thankful for that simple front-page with “just” three navigation items. Be grateful to that missing sidebar. Be happy you don’t have an analytics dashboard to refresh all day.

Take pride in choosing to do less when everyone wants to do more. Be confident in building your website with web performance in mind. You are not missing out, instead, you have cleared your mind and that of your readers.

Oh, and be proud you have stayed with me thus far – no easy feat. I am thankful.

Part #2 – Setting up your WordPress website for performance

It’s been a long, winding road down web performance lane up to this point, but I am confident it was worth it since, by now, you probably have a firm grip on the healthy mental model needed to stay sane and get results.

I guess it’s about time we get to how does everything come together in the world of WordPress sites. Sorry if I kept you waiting, but you need to understand that such sites share the same performance struggles like any other.

WordPress has no intrinsic advantage when it comes to performance, no secret sauce. You just have a wide range of possibilities, more so than in pretty much any other open-source ecosystem.

But with many possibilities come…plenty of headaches. You’ve just half-heartedly, but decisively, trimmed down your list of expectations, gained some clarity and peace of mind, and now again?

The Universe (or me) must be playing tricks on you. Sadly, you are right – things are not getting any easier.

You need to keep your “question everything” hat on if you are to find suitable solutions to your checklist of needs. The WordPress ecosystem is very diverse when it comes to quality, especially performance wise. The reasons are quite obvious, but I won’t get into that now. Just accept it as a fact and let me help you with some tricks to navigate quicker.

The decisions you will make concerning this or that theme, plugin, or service, are nothing more than placing bets. You can never be sure that you’ve found the perfect solution in an environment as dynamic as WordPress.

The best you can do is go through some mental steps to minimize potential losses. This is the light in which I bring forth to you the following advice.

Stick to trusted authors and shops

Trust and reputation is probably the most important bearing you have when considering open-source software. It takes years of hard, consistent, incremental work to build them, and nobody wants to come close of jeopardizing this valuable, but fragile edifice – it has a nasty tendency to instantly disappear.

Look for individual authors and shops within the WordPress ecosystem that inspire the kind of trust you are after, that manage to reassure you that they are the real deal.

When assessing one you feel good about, quickly play the devil’s advocate and do a quick google with the name and terms like “scandal, problems, suspended, hack”. If the first results seem unrelated, good to go; if you stumble upon meaningful articles, read on and decide for yourself.

There are countless, lesser-known authors out there that produce very good products. It would seem almost unfair to exclude them, and it is. But life is short and you have little experience within the ecosystem – you have a site to get going.

So leave it up to agencies and professionals to dig them up, test-drive, and spread the word about them – you will get to use their products, one day. Right now, you are treading unknown waters and your boat could do without the extra risk.

Find a just-about-right theme

When looking for a theme to power-up the frontend of your site, stay away from multi-purpose themes. There, I said it.

Those themes are only useful in the hands of professionals that can navigate their hundreds of bells and whistles, not you. What you need is a WordPress theme that is close enough to your styling and functional needs.

Look for themes with a demo site that showcases a large part of the front-facing functionality on your list, and not much else. This way you will be confident that the theme author has kept its focus and delivered a solution-driven product. As a bonus, you will get the recommended plugins to go with that theme – fewer decisions for you.

By aiming for niche, focused WordPress themes, you stand a much better chance of staying in your performance budget.

Smaller plugins over larger ones

In WordPress, there are tens of good plugins (free or premium) for just about any problem you could imagine.

I strongly recommend you start with the free ones that are just a quick search away on WordPress.org. If you find yourself out of luck, explore premium offerings.

But, regardless if you go free or pro, try to use plugins that match only a specific problem on your list (or a group of closely related ones), not those that promise to bathe your site in feature-glory.

When it comes to plugins and performance, more plugins doesn’t necessarily mean less performance. Ten quality plugins will be less of a drag on performance than a big one, regardless of its quality.

Value decisions over options

When considering a theme or a plugin, take a long hard look at the options they provide you with. Run through this set of questions in your head:

• Do these options make sense without the need to go through the documentation?
• Do these options focus on what I want to achieve?
• Are there low-level, granular options that “empower” me more than I want?
• Are the options grouped in a meaningful way, reducing my cognitive load?

A good product should pass the bar described by these questions. It is a sign that the maker has taken upon itself the responsibility to do the hard work of making decisions, so you don’t have to. The functionality they provide should just work, with few chances of you messing things up.

Stay clear of products that brag about how many options they provide. They are just regular programming disguised as a visual interface.

They are useful to no one: if you are a programmer, you know how to code directly; if you are not into coding, you don’t have the needed knowledge to use these controls properly. Don’t fall for such scams that play on your ego.

Why is this important in terms of performance? When an author has taken the just, but challenging path of making a product with few, carefully considered options, you can be pretty sure that he cares about the quality of the code as well. It wouldn’t make sense to waste all that design effort on a crappy foundation.

When in doubt

When you have several equally promising plugins, go for the most used one – spread your bets. It is hard to make a case against sheer usage – something must be right with that plugin.

Sure, there are hidden gems out there that haven’t yet had a chance to shine, but it is not up to you to make that happen, not yet. You want well-tested, battle-hardened solutions that stood the test of time.

You may find yourself in a pickle due to conflicting reviews. It seems a number of people are super happy (5 stars), but an equal number are just dreading the day they used that product (1 stars).

I say: ignore both of these groups as their reviews are probably heavily biased. See what the 4 and 3 stars are saying and make your decision based on that.

If you are having trouble deciding between two premium offerings, whether it’s premium themes or plugins, test their support service and see which one suits you best.

Often, a team dedicated to delivering good products will also care about the customer service they provide. This is especially true in the WordPress world where the GPL license grants the user almost absolute freedom in terms of how he or she uses the code – product support becomes that much important as a differentiating factor.

A pragmatic helping hand

Now, I am going to do something that I generally avoided doing thus far, with few exceptions: give you specific recommendations of themes shops and plugins.

I intentionally stayed clear of pointing to this or that because of the wide variety of problems out there. I believe a solid understanding of the underlying challenges of web performance is of much greater value.

But since we narrowed the scope down to setting up your WordPress site, I can give you some pointers to start from when you are feeling lost or pressured by time. I will focus on solutions for the most common problems encountered in building a site.

All of these are solely based on my years of experience navigating the WordPress ecosystem, so don’t take them as definitive answers.

I have no affiliation with any of them, apart from Pixelgrade, obviously – so no affiliate links. Oh, and they are in no particular order, and definitely not exhaustive.

Trusted Themes Shops

• Pixelgrade – it goes without saying that I believe you should trust Pixelgrade as a reliable theme author 🙂
• Elmastudio
• Themes Kingdom
• Flo Themes
• The Theme Foundry

Trusted Plugins Shops

• Delicious Brains
• Pippin’s Plugins
• WPMedia
• iThemes

There are many other plugin creators out there, but I kept this list focused on just plugin shops with more than one plugin. Those individual authors or one-plugin companies will be mentioned below.

Now let’s start identifying likely plugin candidates for common functional WordPress problems. I will try to refrain from premium solutions where there are equally suitable free alternatives.

Contact Form Plugins

• Contact Form 7
• WP Forms Lite (premium version available)
• Ninja Forms (premium version available)

SEO Plugins

• Yoast (premium version available)
• All in One SEO Pack
• Slim SEO
• Google XML Sitemaps

Stats & Analytics Plugins

• Slimstat Analytics
• WP Statistics
• GA Google Analytics

Spam Prevention (Forms, Comments) Plugins

• Akismet Anti-Spam (premium version available)
• Antispam Bee

Proper Email Sending Plugins

• WP Mail SMTP
• Easy WP SMTP

Custom Content Order Plugins

• Intuitive Custom Post Order
• Post Type Order
• Category Order and Taxonomy Terms Order

Image Thumbnail Regeneration Plugins

When you change themes or play with more low-level image settings, you are going to need one of these:

• Regenerate Thumbnails
• Force Regenerate Thumbnails

Image Auto-Optimization Plugins

• Imagify (premium version available)
• Smush (premium version available)
• Compress JPEG & PNG Images (premium version available)

Conditional Display Menu Items Plugins

• If Menu

Social Sharing Buttons Plugins

• Social Warfare (premium version available)
• Ultimate Social Media Icons

SSL (Green Lock – HTTPS) Plugins

• Really Simple SSL
• WP Force SSL

There you go. Pick and choose from the lists above when you encounter those problems.

I stayed clear of external services recommendations because weighing in on a certain platform over another is beyond the scope of this article.

Most likely you will first decide on a certain service independent of WordPress, and then you will use the official WordPress plugin to do the integration.

Stay frugal and remember your list

As you can easily see, things add up with ease and complexity happily shoots up through the roof. Remember the principles laid out previously, the main one being to be as frugal as possible with the capabilities you plug into your digital home.

Try to create and keep close by the list with your desires that are absolutely crucial for the success of your site. If in doubt, shorten it.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

This article is the third one in our series about web performance in general, and WordPress in particular. If by any chance you’ve missed my previous thoughts expressed in this series, here are the topics covered: a sane way to understand and make peace with performance on the web, pragmatic steps to choose your site’s hosting service.

Update: Have a look at the next article in the series about the first steps in setting up your website for top performance and Zen (or Jedi) mastery. Think about it in terms of building the walls and roof of the house your content will live in.

The post How to set up your site for web performance appeared first on Pixelgrade.

At the same time, photos are the most resource-demanding type of content you could publish online and the top reason for slow websites. Keeping your website below an industry average of 1.88 MB is challenging, considering how many images you might need on a page and how big a photo can get.

If you want your audience to have a nicer experience when interacting with your photos online, I’ve lined up some tips that might point you in the right direction.

First of all, what is image compression and downscaling?

Almost every time you modify an image it gets saved in a compressed file format. A few popular examples are JPEG, GIF, TIFF, and PNG.

Compression is a lossy way of shrinking the file size of an image. It takes similar-looking bits of it and mushes them together in a way it thinks you won’t notice, and it may also reduce the number of colors in your image.

Higher compression usually results in lower quality. This can be seen when you edit a photo taken in high quality (namely in a Raw format), save the edited one in JPEG format, and the file you get is a lot smaller than the original, therefore losing some of the original details.

Downscaling means making your image smaller by lowering its resolution. This also reduces detail but in a more predictable way.

When you downscale an image, all the information gets crammed into fewer pixels, and since they have to share that space, they get merged together, losing some detail in the process.

Why does the file size need to be as small as possible? Because larger files take more time to load. People don’t like waiting 10 seconds for your website to load when most others take around only two.

If you want to get more in-depth about speed and why it has become such an important topic, make sure to read Vlad’s article on website performance.

How does downscaling affect file size?

Downscaling is a fast way of lowering file size by lowering the resolution of an image. It’s great if you want to keep compression low in order to preserve details. Though there is a point where details become too pixelated, so you have to decide what level of detail you want to have in your image.

The best use case for downscaling are thumbnails, previews, or if you use small images on your website. You can clearly see the file size benefits in the comparison below.

In the next example, you can see the grain pretty much disappearing when we go to 2000px, and at 1000px, you can’t distinguish the vertical lines of the railing. That’s probably the point where you know you went too far with downscaling.

Applying different compression levels on the same image

Compression seems to be the most common way to lower file size on the web, mostly because if you use it wisely, you can get it more than halfway down with little to no artifacts (the distortion of an image that happens as a side-effect of compression).

If you use small images on your site, most of the time, you can barely distinguish anything different between them.

In the images below, you can see the difference compression makes when it comes to file size. We went from 0.24 MB (or 240KB) to 0.16MB (or 160KB) on a 1000px image by going from high to medium quality without damaging the images very much.

As you can see, the differences are indistinguishable since the images are not very wide, but the file size difference between them will undoubtedly impact loading speed.

When going from medium to low quality, meaning a very aggressive compression, the size went from 160KB to just 8KB, but you can see how blocky the image gets; you can barely make out the walls’ texture.

Best Option? Use both methods

You should actually use both; that’s the most efficient way of doing it. As a rule of thumb, you should use larger resolution, less compressed images for covers, and lower resolution, more compressed ones in the place where the images are smaller (for example, inside blog posts).

Here are the extremes again; the first one is the highest quality at the original resolution, while the second one is 1/16th the scale and highly compressed. It’s only 0.5% the file size, and you can barely tell the difference in the example below.

Why is file size so important?

If you lower the file size, your website is going to load much faster. For example, while loading the compressed file, at 0.08MB, the visitor will see it instantly, but a 15MB image on a 3G connection can take 17 seconds to load, and that’s a 18650% increase in waiting time.

In a nutshell, people won’t have the patience to wait that long to see a picture, and since the recommended website loading time is around 3 seconds, you don’t want a single image to slow you down.

If you want to test your website’s performance, use Google’s PageSpeed Insights tool, and see where you stand.

What tools should I use to reduce file size?

In a pinch, I usually use and recommend these web tools to compress images quickly: compressjpeg.com & compresspng.com.

They work fast and you can upload multiple images at once and have a simple slider-based quality setting with a nifty preview. This way, you can see what you get both in terms of image quality and file size.

Other than those, I usually try to save my image at the file size and compression I want straight from the source, which is usually Lightroom, Photoshop, or Figma. They all have different ways in which you can save your image, but if you’re in a rush, their default settings are usually good enough for most purposes.

If you are not sure what type of images you should upload (e.g., .jpg, .png, .svg, .gif, etc.), I recommend checking out this article about image formats for the web.

If you can’t be bothered to do that yourself for every image, you can always use something like imagify.io, a WordPress plugin that does all that stuff right when you upload an image to your site. It’s the easiest way to go about optimizing images for WordPress, really.

To learn more about this, check out Vlad’s article on the first steps to take if you want to dabble with performance improvements straight from the source, your hosting provider.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

The post How to balance between image quality and website speed appeared first on Pixelgrade.

Getting your head around what to do first when it comes to your website’s performance is a daunting process. I am the first to admit this since with all my technical experience and knowledge I still find new angles to approach it. So no need to feel guilty. The web has failed you by making it so damn complicated.

Read along if you want to learn some down-to-earth ways of making the first steps towards a speedier site. This is a promise I’ve previously made in the article about getting into a sane mindset about performance. If you have the time, give it a read and come right back. I’ll wait.

Performance is a big thing these days, especially since Google forced everyone to pay attention to it, on numerous occasions (here, here). You got to “love” the carrot-and-stick that comes from everyone’s favorite search engine. When Google speaks about performance, everybody gets a sudden need for it.

Fortunately, the web ecosystem is listening and a whole host of ready-made solutions and services offer to lend a helping hand, often for no or very little money. I am going to highlight the most straightforward and easy to adopt of these solutions because few people have the time, expertise, or even the need for much more.

Free performance, up to a point

Let’s have a mutual understanding of performance and money. Straight out of the gate, economics 101: nothing of value comes for free, and performance is no exception.

After considering the fair offerings out there, it all comes down to how important web performance is to you and your audience, and how it matches with your budget. There is no point in agonizing about extra performance when you can’t afford it. Let your site and business grow, then come back and reevaluate.

There is virtually no end in sight for performance enhancements, but you don’t need to overdo it and lose focus on what really matters: the value and experience you are able to provide to your visitors.

I am going to assume you are not some CTO at a big company, but a passionate individual or a bunch of you that want to do their best in setting up their site for success. So let’s get bootstrapping for performance.

Hosting the needle in the haystack

One of the very first questions that pop to mind is: where to host this beautiful site of mine?

A quick search for hosting services delivers an endless list of providers, each promising the same things at wildly different price points. How is that? Confusion starts to set in, and you decide to go for the cheapest one and hope for the best.

Basic hosting has become a commodity and everyone either tries to talk you into purchasing from them or is striving to cram your website into an ever decreasing space.

Marketing and pricing strategy aside, all [honest] providers offer the same bang for the buck since they have pretty much the same costs, and routinely share the same datacenters (AWS, Azure, Google Cloud) or are part of the same conglomerate (EIG being the biggest).

My advice is to avoid shady, overly promising services and go with well-established brands where at least you benefit from the economies of scale. GoDaddy, Bluehost, SiteGround and A Small Orange come to mind. Pick the package that is closest to your needs today as you can always upgrade later on. If you have $5/month to spend and only one website to host, there is no benefit in having unlimited websites. You want the best single site hosting you can get.

Since WordPress is our main focus at Pixelgrade, and chances are yours too, it’s worth mentioning a different category of hosting services: dedicated or managed WordPress hosting. These types of packages are specifically optimized in terms of speed and ease of use for the WordPress platform. They are more expensive than general packages, but if you can afford it, definitely go for it. The boost in performance, security and overall experience shouldn’t be hard to spot.

So if you want to check out managed hosting for WordPress, I recommend these ones: GoDaddy, SiteGround, A Small Orange, Cloudways WooCommerce host, Flywheel, Bluehost, WPEngine. Just for kicks, here is how the top of the line services look like: Pagely, Presslabs.

Please keep in mind one important advantage of managed WordPress hostings in terms of speed and performance: the extra dollars you pay, most of the time, will mean savings along the way because you will not need to purchase premium caching or security plugins, pay for a CDN (Content Delivery Network) service, for backup services, etc.

What I mean is that if you are serious about your website and want to put considerable effort (and money) into it, it’s best to do yourself a favor and get a managed hosting around the $15-30/month range right off the bat. Fewer things to worry about along the way.

Now that hosting is no longer a head-scratcher, let’s see what else you can do to give your site that extra umf.

Performance from the clouds

Like I’ve said at the beginning, the web ecosystem acknowledged performance (and security) as a crucial way forward, quite early on, and sprung up dedicated services to help with that: ways to get your content closer to your reader’s geographical location (CDN), ways to make advanced image optimization algorithms available to everyone, ways to host your videos, and so on.

But one service stands well above others in terms of sheer usefulness: Cloudflare. And it starts for free to boot. I could not be more adamant: unless you have a really good reason not to, register your site with Cloudflare and get some big performance and security enhancements, for free. Their paid packages take things even further, but most of you will go a long way before that need arises.

I am in no way affiliated with Cloudflare, but, today, Cloudflare is a reliable bundle of performance and security services widely used throughout the web — a veritable backbone of the Internet.

The main thing it has going for it is its focus on customer experience and ease of use; you get access to (very) advanced technical innovations with a click of a button – no easy feat. Cloudflare is an excellent example of economies of scale working for the greater good (roughly 10% of all web requests pass through its servers at some point).

The fact that some hosting providers already offer a one-click option for activating Cloudflare speaks further about its importance and benefits.

While Cloudflare has plenty of options to choose from, you need to be quite technical or have the time to dig through their tutorials and documentation to be able to understand the implications. For most of you, the default configuration that you get when adding a new domain should be very much OK. So my recommendation is: don’t sweat it. Cloudflare’s primary focus are developers that know their stuff, but that doesn’t mean that the rest can’t reap the benefits. At most, you can configure a SSL certificate with a couple of clicks from the Crypto section of your domain’s dashboard and you are all green 🔒.

That is it. A solid hosting package from a respected provider and Cloudflare in front of it and you are all set to get going with setting up your site and get those creative juices flowing. All these have been so you can get closer to the fun part of it: crafting your content.

My next article will tackle just that: what you need to know and do when setting up your [WordPress] site for speedy user experience. Stay tuned!

Update: Have a look at the next article in the series about understanding images in a web context and keeping them in line with your web performance goals.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

The post The first steps in website performance appeared first on Pixelgrade.

We live smack in the middle of the age of speed. Everything from the way we cook our food, get from A to B, do our shopping, decide on the best place to live, to accomplishing our goals and relating to one another, these and many others revolve at some point around speed.

And this is a very special kind of speed because we’ve evolved to think in terms of minutes and seconds, and even less. Long gone are the hours, days, or weeks. This is decidedly the age of the digital speed.

Now that this grandiose intro has hopefully made you a little bit uncomfortable and curious for more, let’s see how do we relate to speed on the web, the most digital medium there is.

My aim is to give you the layman’s understanding of the powers at play in and around the conversation of website performance in this day and age. These powers are equally technological and human because we, the people, are the ultimate beneficiaries of this magical interplay. I will often touch on this since it’s the first thing we tend to forget or ignore.

Often, the conversation around web performance is either too technical to get to grips by the vast majority of site creators or, at the other extreme, is overly simplified into bite-sized prescriptions disguised as advice, without context or knowledge to empower you to make decisions on a day to day basis. I say you are better than that and you are willing to learn to take better care of your digital domain.

By getting to grips with the intricacies of the web and their impact on performance, my hope is to give you a better mental model to help you make decisions when crafting your content and your site.

I will follow up with separate stories that dig deeper into each area, but I believe it’s important to first understand the philosophy behind.

My speed is different than yours

We may be living speedy times, but let’s not forget that this is also the age of the individual, of the struggle to recognize and respect each and everyone’s unique traits and preferences.

Combine the two, and we soon realize that there is no standard for page speed, just like there is no standard for the perfect hairstyle or pair of socks (but these come close). This is how we’ve ended up with perceived site performance.

Everyone values time a little differently and, consequently, sees things with wildly different expectations.

Let this relativity sink in because this is the landscape we’re gonna have to navigate if we are to get to terms with performance on the web.

Have my cake and eat it too

Along with our world’s focus on the individual and its desires, we find ourselves in times of plenty (at least in the developed world). We want it all and then some. Since the web is fundamentally built by us and for us, it is no surprise that it has evolved to satisfy our ever-increasing hunger for more.

More images, videos and animations, more links, banners and ads, more popups and forms, more tracking, analytics and social media integrations.

If we are not careful, this web of ours can quickly get quite unsustainable.

Our relationship with technology has changed from one of mutual respect and understanding (the geeky 80s and 90s) to one where we don’t care (to know) about limitations or shortcomings and simply expect it to handle everything we throw at it without breaking a sweat (or asking for more money), and do good by us in the process. Does this ring a bell?

Paradoxically, along with technology penetrating almost every aspect of our lives we’ve become less literate about it.  We forget that software is built by ordinary people, not some benevolent geniuses that know better. Hence, code is fundamentally imperfect and in a constant state of change.

We need to regain that healthy dose of weariness about technology if we are to play up to its strengths and protect ourselves against its weaknesses.

With all the optimizations in the world, 10 images are more than 1; a full-width high-resolution image takes more time to download than a content-width one; 20 or 30 WordPress plugins are more than 5 or 10. You get the idea. Practice moderation and make everything count.

Speed is the new big

To understand just how human the web and the internet actually are, there is no better example than looking at how our quest for speed started with hardware and crossed into the realm of networks.

From times immemorial, the mother-of-all-solutions for making something better has consistently been: MAKE IT BIGGER! Bigger temples and cities, bigger countries and armies, bigger companies and fortunes. There is something irresistible about the simplicity and security of bigger.

[Digital] Technology isn’t any different. It all started with hardware and Moore’s law that predicted in the 70s the doubling of transistor density every two years. No easy feat, but again clear and reassuring in its outcomes: more transistors in, more performance out; no need to tackle complicated problems like new models of computing.

This brought us today when the hardware industry stands at the limits of physics: circuitry can’t be made thinner than an atom. How’s that for a reality check?

The internet followed the same beaten path: bigger reach and connectivity, bigger cables and data-centers, bigger data and analytics. Obviously, the web couldn’t have gone any other way: bigger and more sites, bigger and more files, bigger platforms and networks.

While in hardware we have physics to curb our excesses, the internet (and its offspring, the web) has no such luck.

These two are unlike anything we humans have ever built before. Nothing in our history comes remotely close to this level of complexity and dynamism. We could safely say that we haven’t made something, but given birth to it. They have a life of their own with rules and behaviors very little understood.

It is up to each of us who engage with and become part of these organisms to become more aware of their reality and contribute in meaningful, helpful ways. This is the only safe bet we have since we know very little about how things will unfold.

Abrupt complex systems intro aside, let’s see how we stubbornly try and force our old ways of thinking unto this new reality.

Robots want numbers

There is nothing more alluring to an algorithm then our impulse to “put a number on it,” all driven by “make it bigger.” Numbers are clear, definitive verdicts of a situation, they simplify arguments and help the decision-making process.

Unless they are flawed or misleading. Given the fact we live in digital/numerical times, our relationship with numbers needs to be a more nuanced, knowledgeable one, first and foremost for our own good. Strangely, as numbers have become less transparent and more complex in nature, we’ve come to believe and rely on them with far more ease.

Numbers are everywhere today, but they are not what they used to be or, at least, we’ve gotten better at understanding their genesis. Along with entering the “mainstream” of popular culture, they’ve become less objective and more infused with biases and interests, even manipulatory. Numbers that measure performance on the web are no exception.

Each entity that sticks a number to the performance of your site does so based on hundreds, if not thousands, of decisions and biases revolving around what is the definition of speed, for them.

Most of the time, these performance assessment services and tools have commercial entities behind them that, inevitably, focus the conversation on those aspects of speed that benefit the company. It’s not foul play or misleading the user. It’s obvious to be so.

Regardless of biases, these performance measuring tools can only, algorithmically, tackle that part of the definition that is common for their target audience.

Sure, I’ll admit that the likes of Google cast a wider net; this is what makes them very influential and trusted in the realm of web speed. But, you always need to remember that they are after the lowest common denominator of a very diverse group.

You are no robot. You’re after a much smaller audience that you can relate to and get to know better.

No one else but you can decide what your readers value most regarding performance and what are they willing to put up with. Do not abandon this unique advantage of yours when looking in an algorithmic mirror (eg. Google PageSpeed Insights or Pingdom Tools).

Now don’t get me wrong, more speed is always better. No one can argue with this. But chasing speed just for the sake of some number is not. Focusing on the most meaningful and cost-effective areas behind those numbers should be your goal.

People value experiences

Pure numbers only tell half the story, at best. I find it hard to believe that anyone uses a stopwatch when visiting your site. People just think that you have something valuable to offer and want to get it. This stays true regardless of you being a storyteller, a visual artist or a seller of some goods.

What people really appreciate is the experience they have when interacting with your digital domain. They want to feel valued and cared for, with all their quirks and contexts. If your people are all on flaky 3G connections, they care little about those pixel-perfect images of yours that take ages (and money) to download.

But if your community is awash with broadband connections then they care little about your bare-bones website with perfect scores and blazing speed; for them, you’ve failed to deliver an experience worthy of their loyalty.

I can think of only one way of managing this conundrum: love your readers more than they love you. Massively helpful, right? You’ve got to trust me on this. This is the only game you can hope to win in the neverending struggle for attention that defines most of the web.

You can try and play catch-up with Google and its algorithm, investing more and more time and money in the hope you will be in its good graces. Remember that this is a rigged game, and the rules can change at any time.

You can try and keep your website at the edge of technological developments, investing yet more time and money in the hope you will reap the benefits.

The web is moving way too fast for individuals or small groups to keep up with it.

Going down this rabbit hole is a great way to forget about the most important thing of all: your people, your community. They are far more likely to be with you for the long run.. if you only remember them.

Make peace and live a little

If you’ve made it thus far, I salute you! Getting one’s head around this web of ours is no easy feat, but you must think it’s worth it. I do too. You now have a better understanding of web performance than most web users and creators.

So where to next, you say? It almost seems that this is an unwinnable game. And it is. But so is life and that hasn’t stopped us from playing it. With the right mindset, I am confident you can play the digital game, gain from it and even find joy in it.

First of all, accept that there is no finality, no magic ingredient, no “I won, they lost,” no performance hall of fame, no trophy for the fastest site on the planet. If you are anything like me, you wouldn’t chase those even if they existed.

Secondly, direct the majority of your efforts towards your best bet: people. We are a long way from a machine-to-machine web, and you shouldn’t be at the forefront of that. Cater to the person in front of the screen, and you will be rewarded, sooner or later. Patience and resilience are advised.

Thirdly, don’t forget to live a little and enjoy the experiences others have crafted for you. If you can learn their tricks along the way, all the better, but the main thing is to expose yourself to diverse experiences, both digital and non-digital. Clear eyes and open hearts are advised.

👋 Don’t worry, I won’t leave you dead in the water for long. In follow-up articles I will try and give you my understanding and approach for everyday challenges when it comes to web performance.

Thank you for taking the time to read this, regardless of your speed.

Update: Here is the first one focused on taking the first steps towards a speedy website and the second one about understanding images in a web context and keeping them in line with your web performance goals.

Want to learn more about web performance? 🚀

Download our free eBook and learn how to improve your website and make it shine.

Download the free eBook

The post How to focus your efforts around website performance appeared first on Pixelgrade.