Building a good looking Web site that delivers useful information to visitors is very important. Once built, it is important that the site have solid Search Engine Optimization (SEO) so that it ranks well in the search engines and gets seen by more people. In the first part of this series, we have a set of tutorials explaining different types of SEO.
In the early days of Web design we had GIF and JPEG. Then PNG came along in the mid 90s to provide a very good alternative to GIF. Other formats have come and gone since then with none of them truly taking hold. That is, until now! The folks at Google have created the WebP format and it is one you should consider using. Let’s look at why it is beneficial and then how to use it on your WordPress site.
There are two major types of images: lossless and lossy. WebP has answers for both and those answers provide smaller files than the alternatives. Smaller files mean Web pages load faster and that’s always a good thing.
We now use JPEG format for lossy images. Lossy images have different sizes based on how much quality you are willing to sacrifice. When using an equivalent quality, WebP images are 25-35% smaller than JPEG.
PNG is typically used for lossless images and has the benefit of an alpha channel. What’s an alpha channel? It allows for varying levels of transparency. WebP can do lossless and an alpha channel while being 26% smaller than PNG.
If any of you want all the technical details, Google has the info for you. While Google provides a tool for converting images to WebP, it may not be the best choice right now for Web designers. WebP is directly supported in Chrome and Opera, but not other browsers. So if you use it directly, your pages will probably not display correctly in other browsers.
How Do I Use WebP With WordPress?
If you try to directly upload a WebP image into WordPress today, you’ll likely get a message that the file type isn’t allowed for security reasons. Given the limited browser support, that’s isn’t such a bad thing. The best way to use WebP with WordPress is via a plugin. While there are several choices, the best free option is the EWWW Image Optimizer. The plugin has a number of other features, but we’re focused on the WebP support.
Using the EWWWW Image Optimizer Plugin, you’ll still upload JPG and PNG files just as you’ve always done. The plugin converts those to WebP format and serves them up to site visitors using a supported browser. JPG images will become lossy WebP images and PNG images will become lossless WebP images (with alpha channel intact). It is also compatible with caching and content delivery networks. This option is as simple as installing the plugin and enabling the WebP feature.
Given that installing the plugin will make your images at least 25% smaller, why not give it a try now! it is a very simple way to speed up your site. Also pretty cool for geeky visitors to know you are using the latest in imaging technology.
Recently I got notification that a site was temporarily disabled because it had malware on it. Now that the issue is resolved, I believe it to be a false positive and overreaction from the hosting company. It also came on the night that I met a cleanup expert who works for Wordfence, the popular WordPress security plug-in. That meeting came in handy as I noticed scans on some of my sites weren’t completing successfully. My new Wordfence contact helped me find the appropriate settings to allow scans to complete and I wanted to share them with you.
Each of my own sites is hosted at SiteGround and some were recently migrated from other hosting. Even though the SiteGround hosting is far more robust than the previous hosting, I found that Wordfence scans on my sites were hanging up well before the scan was completed.
Let’s first look at the order of a Wordfence scan. Items go from left to right during a scan and the first three are only available for those with the premium version of Wordfence. My scans were hanging up in the middle of the File Changes stage and therefore never got to the Malware Scan. This was very frustrating as it left open the possibility for malware to go undetected.
Many of the things I needed to change were found on the Wordfence | All Options page. Once on that page, scroll down to the Scan Options section. While my sites were not set to do a High Sensitivity scan, it was recommended I not choose this option. All of the available General Options were checked, except for the last three. The boxes not checked are Scan files outside your WordPress installation, Scan images, binary and other files as if they were executable and Enable HIGH SENSITIVITY scanning.
In my own attempts to find a solution, I had tried a much higher Maximum execution time (100) based on a tutorial I’d read. My contact suggested setting this at 15. Probably the biggest thing changed was in the Advanced Scan Options. Each time a scan fails, the file on which it fails is added to the Exclude files list. Mine had grown fairly long and everything on that list was cleared. In it’s place, a few file types were added. While the file types can include malware, none can be executed directly so they are very low risk. The exact entry for those file types is listed below. *.svg *.jpg *.png *.zip *.bak
Once these changes were made (and the Save Changes button clicked), the scan ran successfully. Knowing that any problems will be detected quickly helps a Web geek sleep much better at night. Should you have Wordfence scan problems, I hope these suggested changes will help you find a way to get the scan running successfully again.
In order for your business to be successful online, you need more than just a good Web site. We’ve gathered some tutorials that may help your business both on and offline.
Let’s start with three tutorials on services that may help your business. VoIP is one of our favorite technologies as we use it for all of our phone lines. While we don’t use the other two services, they may be of use to you.
Now for some tutorials about your Web site. Should you monetize it with subscriptions? If so, Facebook will have a way to do this soon. Have you copyrighted your site? How are your blog posts performing in search rankings? Details on each of these areas are found in the tutorials below.
Last summer a relative was visiting and we decided to go into the local olive oil store. It was an eye opening trip for me and I’m always looking for local businesses in need of a Web site. When I got back to the office, I gave their existing site a look and knew that I could be a big help to them. Below is a screenshot of the top part of their old home page.
One of the first things I typically do with a site is see how it works on a phone. This one didn’t work well at all as there was no navigation. It was about the fifth time I looked over the site that I realized it had a store and you had to click on the credit card icons to get to it. Plus, it just needed a design makeover.
Once we were done, the top of the home page had a new look and it works great on mobile. The very first elements are the phone number and email address. On a phone, a visitor can click the phone number and it will dial the store. Menus have a cleaner look and they translate well to a phone. While not shown on this screenshot, there are also featured products and a box for signing up for their mailing list.
Social media was barely visible on the old site with a somewhat hidden Facebook icon. The new site features prominent icons for Facebook, Instagram and Pinterest as well as recent posts embedded throughout the site.
Some visitors to the site and store will be very knowledgeable about olive oil. While I know it tastes good and has health benefits, I don’t know much more. That’s a perfect reason for the site to have a section labeled Learning Center. On the old site, it wasn’t very inviting and it was easy for me to overlook. Below is an example.
Everything was stuffed on a single page. We broke out each topic into an individual lesson and gave the page a more appealing look. Not shown in the screenshot below is the sidebar promoting other parts of the site or the navigation shown in the earlier shot.
Now visitors can easily see the title of each lesson and click on it to learn more. Now learning about olive oil is more appealing and can help direct visitors to products they can purchase.
One of the most popular types of site on the Web are recipes. The old site had some recipes though they weren’t presented in a way to draw in visitors. Below is a screenshot of the old site.
Just as with the learning center, all recipes were on a single page. We felt it important that each recipe be laid out similarly to the popular recipe sites. The main recipe page simply has links to each of the individual recipes as shown below.
When you click on one of the recipes, it takes you to a detail page. Having all of the distinct pages also gives search engines more content to rank so the site will be found more often. Below you can see how the recipe is laid out and we even included links for purchasing the products needed by the recipe.
What isn’t shown in the screenshot is a slider that links to all other recipes so that visitors can easily navigate through all of them if they like.
Of course the ultimate goal of the site is to provide a way for visitors to purchase products. While the old site had a store, it wasn’t obvious to visitors. Once you got to the store, you were presented with links to some general categories as shown below.
Clicking on a category led to another page with products and more clicks were required to add a product to the shopping cart. This was a very inefficient process and their online sales weren’t living up to their potential. We truly integrated the store into the site as you already saw on the recipe page. Below is the main store page also showing the sidebar.
In addition to the main store page, we also have dedicated pages for each category of products. Some of the products are added directly to the shopping cart, while others have options to select. Below is a product page that allow you to select the gift bag and bow color.
Early in the project I was asked by the owner if I felt this would increase their sales by 10%. I smiled and said I would be very disappointed if we only saw a 10% increase. I’m fully expecting their online sales to double with the new site.
