Tag - Losing

How to Optimize Images for Web Performance without Losing Quality


Did you know that optimizing your images before uploading to WordPress can have a huge impact on your website speed?

When starting a new blog, many beginners simply upload images without optimizing them for web. These large image files make your website slower.

You can fix this by using image optimization best practices as part of your regular blogging routine.

In this article, we will show you how to optimize your images for faster web performance without losing quality. We will also share automatic image optimization plugins for WordPress that can make your life easy.

How to Optimize Your Images in WordPress (Step by Step)

What is Image Optimization? (Optimized vs Unoptimized Images)

Image optimization is a process of saving and delivering images in the smallest possible file size without reducing the overall image quality.

While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.

Here’s an example of optimized vs unoptimized image:

Optimized vs Unoptimized Images in WordPress

As you can see, when optimized properly the same image can be 75% smaller than the original without any loss in quality.

How does Image Optimization work?

In simple terms, image optimization work by using compression technology like “Lossy” and “Lossless” which helps reduce the overall file size without any noticeable loss of quality.

What does it mean to Optimize Images?

If you ever received a recommendation to optimize images by your WordPress hosting support or by a speed test tool, then all it means is that you need to reduce the file size of your images by optimizing them for web.

Why is Image Optimization Important? What are the Benefits of Image Optimization?

While there are many benefits of optimizing your images, below are the top ones that you should know:

  • Faster website speed
  • Improved SEO rankings
  • Higher overall conversion rate for sales and leads
  • Less storage and bandwidth (which can reduce hosting and CDN cost)
  • Faster website backups (also reduces cost of backup storage)

Outside of video, images are the next heaviest item on a web page. According to HTTP archive, images make up on average 21% of a total webpage’s weight.

Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.

Now you might be wondering how big of a difference can image optimization really make?

According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and 16% decrease in customer satisfaction.

How speed affects your website

If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster loading websites.

This means that by optimizing your images for web, you can both improve website speed and boost WordPress SEO rankings.

How to Save and Optimize Images for Web Performance?

The key to successful image optimization for web performance is to find the perfect balance between lowest file size and acceptable image quality.

The three things that play a huge role in image optimization are:

  • Image file format (JPEG vs PNG vs GIF)
  • Compression (Higher compression = smaller file size)
  • Image Dimensions (height and width)

By choosing the right combination of the three, you can reduce your image size by up to 80%.

Let’s take a look at each of these in more details.

1. Image File Format

For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.

To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple images or when you need transparent images, and GIF for animated images only.

For those who don’t know the difference between each file type, PNG image format is uncompressed which means it is a higher quality image. The downside is that file sizes are much larger.

On the other hand, JPEG is a compressed file format which slightly reduces image quality in order to provide a significantly smaller file size.

Whereas GIF only uses 256 colors along with lossless compression which makes it the best choice for animated images.

On WPBeginner, we use all three image formats based on the type of image.

2. Compression

The next thing is image compression which plays a huge role in image optimization.

There are different types and levels of image compression available. The settings for each will vary depending on the image compression tool you use.

Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.

You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.

Although it’s a bit manual, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.

There are also several popular WordPress plugins like Optimole, EWWW Image Optimizer, and others that can automatically compress images when you first upload them. Many beginners and even large corporations prefer to use these image optimization plugins because it’s easy and convenient.

We will share more about these WordPress plugins later in the article.

3. Image Dimensions

Normally, when you import a photo from your phone or a digital camera, it has a very high resolution and large file dimensions (height and width).

Typically, these photos have a resolution of 300 DPI and dimensions starting from 2000 pixels and more. These high-quality photos are well-suited for print or desktop publishing. They are not suitable for websites.

Reducing file dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using an image editing software on your computer.

For example, we optimized a photo with 1.8 MB original file size, 300 DPI resolution, and image dimensions of 4900×3200 pixels.

We chose jpeg format for higher compression and changed dimensions to 1200×795 pixels, and it reduced the image file size to 103 KB. That’s 94% less than the original file size.

Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.

Image Optimization Tools and Programs

As we mentioned earlier, most image editing software come with image optimization and compression settings.

Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for web (with just a few clicks).

We recommend using these tools to optimize images before you upload them to WordPress, specially if you are a perfectionist.

This method helps you save disk space on your WordPress hosting account, and it guarantee the fastest image with the best quality since you manually review each image.

Adobe Photoshop

Adobe Photoshop is a premium software that comes with a feature to save images optimized for the web. Simply open your image and click on the “File » Save for Web” option.

This will open a new dialog box. On the right, you can set different image formats. For JPEG format, you will see different quality options. When you select your options, it will also show you the file size on the bottom left.

Saving images optimized for the web using Photoshop

GIMP

GIMP is a free and open source alternative to popular Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.

First, you need to open your image in GIMP and then select File » Export As option. This will bring up the save file dialog box. Give your file a new name and then click on the export button.

Export image in GIMP

This will bring up image export options. For jpeg files, you can select the compression level to reduce file size. Finally, click on the export button to save the optimized image file.

TinyPNG

TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG files. All you have to do is go to their website and upload your images (simple drag & drop).

Using TinyPNG to optimize images for WordPress

They will compress the image, and give you the download link. You can use their sister website, TinyJPG, for JPEG image compression.

They also have an extension for Adobe Photoshop which is what we use as part of our image editing process because it combines the best of TinyPNG and TinyJPG inside Photoshop.

For developers, they have an API to convert images automatically, and for beginners they have a WordPress plugin that can automatically do it for you (more on this later).

JPEG Mini

JPEGmini uses a lossless compression technology which significantly reduces the size of images without affecting their perceptual quality. You can also compare the quality of your original image and the compressed image.

JPEGMini online image compression tool

You can use their web version for free, or purchase the program for your computer. They also have a paid API to automate the process for your server.

ImageOptim

ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.

ImageOptim

Windows alternative to this is Trimage.

Image Optimization Plugins for WordPress

We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.

Below is our list of the recommended WordPress image compression plugins:

  1. Optimole – popular plugin by the team behind ThemeIsle.
  2. EWWW Image Optimizer
  3. Compress JPEG & PNG images – plugin by TinyPNG team mentioned above in the article.
  4. Imagify – plugin by the popular WP Rocket plugin team.
  5. ShortPixel Image Optimizer
  6. WP Smush
  7. reSmush.it

Using any of these WordPress image optimization plugin will help you speed up your website.

Final Thoughts and Best Practices for Image Optimization

If you’re not saving images optimized for web, then you need to start doing so now. It will make a huge difference on your site speed, and your users will thank you for it.

Not to mention, faster websites are great for SEO, and you will likely see an increase in your search engine rankings.

Outside of image optimization, the two things that will significantly help you speed up your website is using a WordPress caching plugin and using a WordPress CDN.

Alternatively, you can use a managed WordPress hosting company because they often offer both caching and CDN as part of the platform.

We hope this article helped you learn how to optimize your images in WordPress. You may also want to see our guide on how to improve your WordPress security and the best WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Optimize Images for Web Performance without Losing Quality appeared first on WPBeginner.



Source link

How to Update WordPress Theme without Losing Customization


One of the best things about WordPress is the easy customization options that you get with WordPress themes and plugins.

You can also take these customizations to the next level by adding your own code snippets and CSS styles to your WordPress theme.

The problem arises when an update becomes available for your theme. If you are not careful, then there is a high chance that you’ll lose some of those changes you made to your theme.

In this article, we will show you how to easily update a WordPress theme without losing customization. We will also cover how to properly customize your themes, so you are not affected when a new theme update is released.

Properly updating WordPress theme without losing customizations

How Theme Updates Work in WordPress?

WordPress comes with a powerful system to install updates for not just WordPress itself but for plugins and themes as well.

Your WordPress website regularly checks for updates and display them under Dashboard » Updates page.

WordPress updates

When a theme update becomes available, you’ll also see a notification on the Appearance » Themes page.

Theme updates

Updates are really important for the security and performance of your WordPress website. Aside from security and bug fixes, theme developers can also introduce new features with these updates.

You can simply click on the update button to install the new version.

WordPress will then download the theme package, unzip it, and replace the old files with the newer version.

This will overwrite all old theme files installed on your website. If you manually added custom code to your WordPress theme files, then you’ll lose those changes.

That being said, let’s take a look at which theme changes are safe and which customizations will be erased.

What Type of Theme Customizations Can You Lose During an Update?

There are multiple ways you can customize a WordPress theme. Some of these theme customizations are safe because your changes are stored in the WordPress database itself.

This includes all changes made through the built-in WordPress theme customizer which you can access by visiting Appearance » Customize page.

WordPress theme customizer

The theme customizer allows you to modify your WordPress theme and store all changes in the WordPress database. You can change the header image, colors, layout, custom CSS, and more.

Your WordPress widgets and navigation menus are also not affected by the theme updates.

Popular WordPress themes like Astra and Ocean WP now come with companion plugins. These plugins are used to add extra features to your theme. Any theme changes made using these companion plugins are also not affected by the theme update.

If you customize your WordPress layout using a WordPress page builder like Divi, Beaver Builder, Elementor, etc, then those changes will also not be impacted.

Any other features that you have added to your website using a plugin are also safe. For example, your WordPress contact forms, Google Analytics, email newsletter popups, and more.

Customizations that you’ll lose during the update

If you have added any code to your theme’s functions.php file, then it will disappear. Any CSS changes that you have added directly to your theme’s stylesheet (style.css) file will also be wiped off.

Now that we know which changes will be erased, let’s talk about how to preserve and restore them after the theme update.

Step 1. Preparing for The Theme Update

First thing you need to do is connect to your WordPress hosting account using an FTP client.

Once connected, go to the /wp-content/themes/ folder and download your theme folder to your computer.

Download your WordPress theme

This folder will be the backup of your theme, and we will use it later to copy and paste customizations after updating the theme.

Step 2. Download The Updated Theme and Move Customizations

Now we want to transfer customizations we have made to the old theme files to the updated version.

Simply visit your theme’s website and download the latest version to your computer. Locate the theme’s zip file and extract it.

You should now have both, the new version and your old customized theme on your computer.

If you remember the changes you made to your theme, then simply copy and paste the code snippets from the old theme to the new version.

On the other hand, if you do not remember the changes you made, then you will have to find them first. The easiest way to do this is by comparing your theme files.

You’ll need to use a file comparison software like WinMerge (kaleidoscope for Mac, Meld for Linux).

Open both theme folders in file comparison software. It will show files side by side allowing you to quickly compares files to locate the customizations you have added to the old theme.

Compare theme changes

You can then copy and paste the code from the old theme file to the same file in the new theme.

Step 3. Upload the New Theme Folder

After copying your changes to the new theme, you are now ready to upload the updated version to your website.

Simply connect to your website using the FTP client and go to the /wp-content/themes/ folder. Select the new theme folder and update it to your website.

Upload updated theme

Your FTP client will warn you that the files with the same name already exist. You need to choose <strongOverwrite to make sure that your old theme files are replaced by new files.

Overwrite

That’s all. You have successfully updated your WordPress theme. Visit your website to make sure that everything is working as expected.

How to Avoid Losing Changes During Theme Update

If you want to add code snippets or custom styles to your WordPress theme, then there are some best practices that you should follow.

The best solution is to create a child theme and add your custom code to child theme’s files.

However, many WordPress beginners may not feel comfortable creating a child theme. Luckily, there are easier solutions available.

For all your custom code changes, you can use the code snippets plugin.

It allows you to safely add custom code snippets without breaking your website, and your changes will not be affected by theme updates. You can even change your WordPress theme without losing those changes.

For CSS code, you can save it all under the theme customizer’s ‘Additional CSS’ tab.

Additional CSS

For more information, see our guide on how to add custom CSS in WordPress.

Alternatively, you can also use the powerful CSS Hero plugin to easily customize the styles without even writing any CSS code.

We hope this article helped you update your WordPress theme without losing customization. If you come across any issues, then check out our guide on most common WordPress errors and how to fix them.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Easily Move WordPress to a New Domain (without Losing SEO)


Do you want to move your WordPress site to a new domain? Changing your website’s domain name can significantly impact your SEO rankings, and it’s a process that needs to be done very carefully.

While you cannot avoid temporary SEO fluctuations when moving your website to a new domain, you can definitely minimize the impact and quickly regain your search traffic and rankings.

In this guide, we will show you the proper way to move WordPress to a new domain without losing SEO.

Properly moving WordPress to another domain name

Here’s the 5 step process that we will cover to help you migrate your WordPress site to a new domain name:

  1. Create a Duplicator package of your WordPress site
  2. Create a database for new domain name
  3. Unpack WordPress on new domain
  4. Setup Permanent 301 redirects
  5. Notify Google about the change

Before You Start

Before you start, we want to emphasize a few things.

The process of switching to a new domain will temporarily affect your search engine rankings as Google and other search engines adjust to the changes.

Yes, this will also temporarily affect your search traffic as well. Please keep in mind that this is normal, and it happens to all websites that switch to a new domain.

However, you can dramatically decrease the SEO impact by following this guide. We will show you the right way of moving your WordPress site to a new domain name, setting up proper 301 redirects, and notifying search engines.

Please note that this guide is not for moving WordPress site to a new web host. This is for switching a domain name. Yes, while the process is similar, there are extra things involved in this process.

Pre-Steps

In this guide, we are assuming that you have your WordPress site setup on oldsite.com, and you are trying to migrate it to newsite.com.

We are also assuming that you already have a web hosting account, and you are familiar with your web hosting control panel.

You will also need to know how to use FTP.

In case you don’t have a web hosting account, we recommend using Bluehost (great for small sites + comes with a free domain) or WP Engine (great for large sites).

Once you have your new web hosting account and domain name, you’re ready to start the process.

Step 1: Create a Duplicator package of Your WordPress Site

The first thing you need to do is create a full backup of your WordPress site. While there are many WordPress backup plugins available, the one we’re going to show in this step does both backups and migrations.

It’s Duplicator and it’s a completely free plugin.

Let’s start by installing and activating the Duplicator plugin on your old domain name. For more details, see our step by step guide on how to install a WordPress plugin.

Once activated, the plugin will add a Duplicator menu item in your WordPress admin. You need to click on the Duplicator menu, and then click on the create button to create a new package.

Create a new Duplicator package

After that, you will be asked to click on the Next button to continue.

Duplicator will now run the website duplicator wizard. First, it will run some tests to see if everything is in order. If all items are marked ‘Good’, then click on the ‘Build’ button.

Build Duplicator package for switching to new domain name

The plugin will now start creating a duplicator package of your WordPress site. This process may take a few minutes depending on the size of your website.

Once finished, you’ll see download options for Installer and the Archive package. You need to click on the ‘One click download’ link to download both files to your computer.

Download Duplicator package

The archive file is a complete copy of your website, and this will allow you to move WordPress to another domain name. The installer script will automate and run the migration by unpacking the archive file.

Step 2. Create a Database for New Domain Name

Before you can move, you’ll need a database to unpack WordPress on your new domain name.

If you have already created a database, then you can skip this step.

To create a database, you need to visit your hosting account’s cPanel dashboard, scroll down to the ‘Databases’ section, and then click on the ‘MySQL Databases’ icon.

Database icon in CPanel

On the next screen, you’ll see a field to create a new database. Simply provide a name for your database and click on the ‘Create Database’ button.

Create database for switching to another domain name

cPanel will now create a new database for you. After that, you need to scroll down to the MySQL Users section.

Next, provide a username and password for your new user and click on the ‘Create a user’ button.

Adding a new MySQL user

The new user you just created, still does not have permission to work on the database. Let’s change that.

Scroll down to the ‘Add User to Database’ section. Simply select the database user you created from the dropdown menu next to the ‘User’ field, then select the database, and click on the add button.

Add user to database

Your database is now ready to be used on for moving WordPress to the new domain name. Make sure to note down the database name, username, and password. You’ll need this information in the next step.

Step 3. Unpacking WordPress on New Domain Name

Now you need to upload the Duplicator files you downloaded earlier to your new domain name.

First, connect to your domain name using an FTP client. Once connected, make sure that the root directory of your website is completely empty.

After that, you can upload the archive and installer files to the root directory.

Upload Duplicator files to new domain name

Once both files have finished uploading, you are now ready to unpack WordPress.

Open a new browser tab and go to the following URL:

http://example.com/installer.php

Don’t forget to replace example.com with your new domain name. This will launch the Duplicator migration wizard.

Duplicator wizard

The installer will look for the archive file. You need to check the terms and conditions checkbox and click on the next button to continue.

Now, the installer will ask you to enter your WordPress database information.

Your host will likely be localhost. After that, you will enter the details of the database you created for your new domain name in the earlier step.

Connect to the database for your new domain name

Once done, click on the next button to continue.

Duplicator will now unpack your WordPress database backup from the archive into your new database.

Next, it will ask you to update site URL or Path. You shouldn’t have to change anything since it automatically detects the URL of your new domain name and its path.

If it doesn’t, then you can change the URL to your new domain name. After that, click on the next button to continue.

Update URL to your new domian name

Duplicator will now finish the migration.

You can click on the ‘Admin Login’ button to enter the WordPress admin area of your website on the new domain name.

Finishing WordPress migration to new domain name

Step 4. Setting up Permanent 301 Redirects

Setting up a permanent 301 redirect is very important for both SEO and user experience.

This step will allow you to automatically redirect users and search engines to your new domain name.

In other words, whenever someone lands on one of your old posts or pages, they will be automatically redirected to your site on the new domain.

To setup a permanent 301 redirect, you need to connect to your old site using FTP and edit the .htaccess file.

This will be located in the same directory as your wp-includes or wp-admin folder. Open the .htaccess file and paste the following code at the very top:

#Options +FollowSymLinks
RewriteEngine on
RewriteRule ^(.*)$ http://www.newsite.com/$1 [R=301,L]

Note: Replace newsite.com with your new domain in the above code.

Once you have applied these changes, then visit your old domain name. It should automatically redirect you to the new domain.

If it doesn’t, then it means the redirection is not setup properly, and your server likely doesn’t support redirect rules. You need to reach your web hosting’s support to get RewriteEngine turned on.

Step 5. Notifying Google About the Change

Now that you have moved WordPress to a new domain name and setup redirects, it is time to notify Google about the change of address. This will help Google find your new domain name quickly and start showing it in search results.

First, you need to add your new domain name to the Google Search Console. See step 1 in our Google Search Console guide for instructions.

After you have added your new site, you need to switch to the old version of Google Search Console.

Go to old version of Google Search Console

Next, you need to switch to your old domain name and then click on the gear icon at the top to launch change of address tool.

Change of address tool

On the next screen, Google Search Console will show you a step by step wizard to submit your change of address request.

First it will ask you to select your new site from the drop down menu. After that, click on the check button to test 301 redirects and then confirm verification.

Change of address for your old domain name

Finally, click on the submit button to send your address change request.

Notify Users About the Move to New Domain Name

While the 301 redirects do their job, it is always good to make a public announcement about the migration.

You can do this by simply writing a blog post on your new site and sharing it on your social media accounts.

If you have an email marketing list, then you should send a newsletter to let all your subscribers know.

This can be helpful in a lot of ways.

First and foremost, your users are more likely to remember the new domain once they read about it.

Second, you can ask your users to let you know if they see any bugs. You alone cannot test your site in all different type of browsers and system environments. It’s always helpful to have a fresh pair of eyes looking at it.

We hope that this tutorial helped you move your WordPress site to a new domain name. You may also want to see our guide on how to track your search keyword rankings after moving to a new domain name.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Move WordPress to a New Domain (without Losing SEO) appeared first on WPBeginner.



Source link