1. Planning

Before you start creating your slider, the first thing you should do is to plan your slider. These 5 questions can help you start before editing.

• What is your goal with the slider? This is one of the most important questions what you should know the answer for. Do you want to use it as a design element, call the user to an action, or do you want to make a gallery?
• Where will you put the slider? Will it be a homepage slider, a carousel at your product page, or do you want to put it into your post?
• What type of slider do you need? Do you want a full width slider, a full page slider or a carousel for your website?
• What will you put into the slider? If you have the text and the images before you start creating your slider, you can save time.
• How many slides do you want? Do you want to create a hero block with one slide, or an image slider with a predefined number of slides?

Take the time and answer these questions before you start to create your slider. It will make the editing easier and it is also important for creating a successful and well prepared slider.

2. Slider sizes

Setting a good slider size is a critical point in creating a slider. This value will define your slider size ratio, and the responsive sizes as well.

Set an optimal slider size

It is important to set an optimal slider size with which you will work. Don’t work with too big sizes. An optimal size for a slider is 1200px width and 500-800px height. In fact, we work with these numbers in our templates as well. Additionally, a smaller slider size makes it easier to edit your slider.

Choose the right layout

As every device has different size, setting the right layout is critical in creating a slider. The slider size defines the slider size ratio, but the layout defines how your slider should behaves on different screen sizes.

If you use Boxed layout then the slider can be as big as the container it’s in. If the Fullwidth layout is selected, the slider tries to fill the space between your browser’s left and right side, so the slider will reach outside of its container if needed. However, the height will be calculated based on the set slider size, so it won’t fill the browser window vertically. If you want your slider to have 100% width and the height of your screen, you can use the Full page layout.

Set limits

If you set a slider size, it will change with the screen. It can happen that your slider content will be too tall or too wide. To avoid that behaviour use the Limit Slide Width option. This will only restrain the width of the layers, but the background image will still stretch out to 100% width if your slider uses Full width layout.

3. Slider images

A well chosen slider image has a big impact on the visitor. It’s important what kind of images you use. There are more things you should pay attention if you want to create a good-looking and fast loading slider.

Use an optimized image

To create a good slider, it is necessary to pay attention to the quality and size of the images. A large image can slow down your slider’s speed, and it can be disturbing. You should pay attention that a small image can have a big size too, if its quality is too good. Above a particular level of quality people’s eyes can’t see the difference, so don’t use images with too high quality.

Set a device specific background image

It can happen that your background image looks and works perfectly on desktop, but not on mobile. Or it looks good also on mobile, but it’s loads slowly. Your mobile users should not load a wide and big image for their small screens. To avoid that you can set different images for each device in the Pro version of Smart Slider 3, which will reduce the loading time, too.

4. Content

To create a good responsive slider you should pay attention to the content of your slides. Your content is the reason why people come to your website. With Smart Slider 3 you can use a lot of layers such as heading or text layer with which you can build up a good content to your website. Media contents are also important, with a video slider you can grab the visitors’ attention as well.

Layout

Using a structure can be familiar from page builders. With rows and cols you can build up your slider, and it can help you align your layers, too. I can suggest that you should always use the content mode and a structure, it will make the whole building process easier.

Set a wrap after value

If you build up your slider with rows and cols, you can set breakpoints where the col should wrap. This setting is really useful on mobiles where you can put the cols under each other.

Different text length for every device

While a long text fits well on a large layer on your desktop slider, it is very unlikely that it will fit and look good on mobile. The text layer has a special option that no other layer has: it is possible to create device specific texts that can be managed on one layer.

5. Style

A good design can be an important point in a website. It is necessary that the visitor can read all the content on desktop and mobile devices as well. To create a clean but modern design try to maintain harmony in your slider. In other words, avoid using too many font families or colors.

• Check the responsive views. Always take a look at the mobile and tablet view, and make changes if it is needed.
• Keep the harmony. Use matching colors, and font-families.
• Avoid too much text. If you put too much text in your slider, the visitors won’t read it. Place a CTA button with a short text instead and navigate your visitors to another page.
• Mix the editing modes. Content mode is the best choice to create your structure and place your content. Canvas mode is perfect for decoration, and creating specially placed layers.
• Don’t take your design to the extreme. Don’t use too many animations, effects and colors on your slider, it can be disturbing for your visitors.

6. Mobile devices

Creating a mobile friendly website is a must have task what you should take into account since nowadays everybody uses their smart devices to browse on the web. With Smart Slider 3 you can create a responsive slider, but you should take care of a few things.

Font sizes

The layers that looked perfectly on desktop might need some adjustments on mobile. Usually what you need to change is the font size, what you can easily do with the Text Scale option. You can modify your font size with this function and it is device specific so the font size of the other devices will not change.

Hide layers on devices

You can disable a layer on any devices using the Show on option at the layer window. This feature is useful even if the layers are legible, but there are just too many of them, and that doesn’t really work well on mobile devices.

All in all, being able to hide any layer individually can make a huge difference when it comes to displaying the slider on smaller screen sizes.

Hide slides on devices

In the Pro version of Smart Slider you can hide not just layers, but entire slides on different devices. You can find this option at the Slide.

Hide sliders on devices

You can hide not only layers but your whole slider on different devices. If you don’t need the slider on a device, you can turn it off, and no codes will be placed on your site.

Controls

The layers and background images are not the only responsive parts of your slider. With controls it is possible to set a responsive value which will determine how much the control should scale down or up on different devices.

If changing the responsive value doesn’t help, the controls can also be hidden on any device. Hiding them will make the slider and the page cleaner and improve the user experience. The bullets are easy to click on a desktop, but when you use your phone, it is not easy to tap them with your fingers, so it is advised to simply turn them off on small devices.

7. SEO

Smart Slider 3 is an SEO friendly slider plugin, but you need to do your part, too. When you create a SEO friendly content, you need to pay attention to the basics of SEO. For instance, headings and paragraphs are important for your SEO structure. To ensure your slider does well in this matter, make sure to add headings and paragraphs as well. In order to make your images SEO friendly, be sure to always fill their alt tag.

8. Performance

Your users expect your site to load fast when they access it. The speed depends on a lot of factors and one of them is the slider. A slider can be an important point in a website loading time, so you should use it properly.

• Don’t use too many slides. Unless you create an image gallery, don’t put more than 5 slides to your slider.
• Optimize your images. Quality and size of the images are the most important factors what you should pay attention to. Don’t work with too high quality and too big images.
• Font-family rule. If you use many different font-families on your page, it can increase the loading time because they should load one by one. Try to limit the number of font families to maximum 3.
• Use the optimize settings. Smart Slider 3 have more options to optimize your slider. You can optimize your images to have lower resolution and quality. You can also convert them to WebP format or lazy load them.

9. Animation & Effects

Smart Slider 3 offers a lot of animation & effects, already in the free version. With a nice background animation you can cheer up your slider, and with layer animations you can grab your visitors’ attention and make a modern and good-looking slider.

Also you have an option to create an auto playing slider. This way you can share more content with your visitors, but you should take care of the slider autoplay interval, and always give a control for the user to stop it.

Conclusion

Smart Slider 3 has a lot of settings with which you can create a stunning slider. And if you know the points what you should pay attention to, creating a slider will be fun. Use optimized images, fill the alt tags, and check the result on different devices, and your slider will be an important part of your page. It’s also worth the time to check our tutorial videos and take a look at the settings in the slider examples, by which you can learn a lot.

The post 9 Point Ultimate Checklist to Create your Next Slider appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/slider-performance/ Tue, 13 Apr 2021 05:00:33 +0000 https://smartslider3.com/?post_type=blog&p=12371 Having a speedy website is crucial when you want to keep your visitors. As a matter of fact, as no one wants to wait more than a few seconds for a page to load. Because of this, everyone wants their site to load fast. But making a site load fast can be challenging, because of […]

The post How to Speed Up Your Slider appeared first on Smart Slider 3 — WordPress Plugin.

]]> Having a speedy website is crucial when you want to keep your visitors. As a matter of fact, as no one wants to wait more than a few seconds for a page to load. Because of this, everyone wants their site to load fast. But making a site load fast can be challenging, because of the rich media (images and videos) usage. Both images and videos load slower than texts, therefore they need to be optimized for the web.

Smart Slider 3 is a WordPress and Joomla slider plugin and it is a great choice to add rich media to your website. You can create an image slider, a video slider, even a whole landing page with this plugin. In this article I’ll show you how to check your site’s speed and how to speed up your sliders.

What can slow down a website?

The quick answer: anything. Even texts can slow down the page if they are really long. In most cases, the problem originates from the used rich media. Or it could be the fact that the server is just not fast enough to return the requested content in a timely manner.

Would you like to know how fast your site is? Use Google PageSpeed Insights to measure your site’s speed. It checks how fast your site loads, and gives you tips on where to improve it. Google PageSpeed Insights is an incredible tool. For this reason, they built it into Chrome browser, where it’s called Lighthouse.

The metrics of speed

Lighthouse has several different metrics which can describe your site speed. They’re all important to understand how to improve your site, so I’ll explain them in a few words.

• First Contentful Paint (FCP), which measures when the browser renders the first bit of content. It’s the first feedback to the user that the page is actually loading.
• Speed Index (SI) shows you how quickly the contents of a page are visibly populated.
• Largest Contentful Paint (LCP) provides details about the largest image or text paint before user input.
• Time to Interactive (TTI). It’s the point in time when the last Long Task finished.
• Total Blocking Time (TBT): it measures the total amount of time between FCP and TTI
• Cumulative Layout Shift (CLS) is a user-centric metric for measuring visual stability

The values of these metrics give you hints where you can improve your website. Unfortunately, usually, it is not so straightforward where to start. This is especially true if you’re new to web development.

What’s the best way to optimize your website?

Based on our experience the best way to optimize your website is by following this checklist:

1. Use a reliable hosting provider. A throttled web server can destroy all your achievements.
   1. Run the latest version of server software
   2. Use PHP with opcache enabled
   3. Use Cloudflare as middleware and set up caching policies properly
2. Always use the latest WordPress available
3. Test your theme in an empty WordPress installation and optimize it until you reach 100/100 on an empty page. You can find out the best example of how to do it here.
   1. You can try to optimize plugins to see which gives the best results with your theme.
   2. Prepare your “Link” header to give a hint to the browser on what to preload. This could be the style.css, a font family and every render-blocking resource.
   3. Try to get rid of as many render-blocking resources as you can.
   4. Use only one external font family and make sure it’s a variable font that is locally hosted.
   5. Reduce JavaScript usage and drop jQuery if you can
4. Use plugins that are optimized for Lighthouse. You won’t be able to fix a third-party plugin without breaking its updates.
5. Prepare your content for good scores. For example, use fewer images and videos above the fold. Also, make sure your images and videos are as optimized as possible.

How much impact plugins have on my site’s performance?

Every plugin you install on your website will eventually impact your site’s performance. They’ll lower your page speed score, and slow down your website. The only exceptions are optimizing plugins, as their purpose is to improve speed. What you should consider is how much impact each plugin has on your site performance. Also, whether the functionality the plugin gives you worth the price of performance.

If you’re looking to buy a plugin, ask the developers how they optimized their plugin for Lighthouse. Also, test the (demo) website of the plugin with Lighthouse yourself to see how well it performs. If the demo site’s performance is poor, you can’t expect to have good results on your own site either. After all, if the developers couldn’t make their own site perform well, how could you?

As a matter of fact, we’re convinced the content you create with Smart Slider 3 is important. It helps you give your users an amazing and memorable experience with your website. For this reason, we made every effort to optimize Smart Slider 3.5. As a result, our homepage, which we created using sliders only (except the header and the footer) got a 100/100 score. Isn’t that amazing?

Why is my slider loading slowly?

First of all, make sure that your slider is loading slowly on your website and not anything else. It might seem that Smart Slider 3 loads slow, but actually the whole site is slow. If your site isn’t fast, your slider can’t load fast either.

You can see what loads on your website for how long, if you use a website speed test. Or you could use Chrome or Firefox browsers. In this case, press F12 → click on the “Network” tab and refresh the page with hard refresh. Here you will see all elements of your page, and you can order them according to the loading time, too.

To create a fast-loading and optimized slider, it is important to pay attention to the quality and size of the images. A large image can slow down your slider and it can be disturbing for the visitor. You should pay attention that a small image can have a big size too if its quality is too good. Above a particular level of quality, people’s eyes can’t see the difference so don’t use images with too high quality.

Slider performance tips & tricks – How to create a fast-loading slider?

A fast-loading website is an expectation nowadays. Creating a slider can be an important point at the loading time of a Joomla or WordPress as well. So if you don’t use your slider properly, it can be slow. There are a few tips & tricks which you can create an optimized slider with.

1. Choose the correct image size

Choosing correct images is the most important part of optimizing your slider’s performance. First, make sure your images don’t weight more than 500kb. The easiest is to resize the pictures before you upload them to your website. An optimal image width is 1920px for a full width slider. So try to aim for that.

Also, you should pay attention to the quality of your media. In other words, don’t add too high quality pictures to your site. Additionally, if you use .jpgs instead of .pngs, you can save space, too.

2. Always plan your slider

Don’t rush into the slider creation. Plan your slider, prepare the assets (images, videos) you’ll use. Make sure they’re correctly sized for the slider you’ll create. It’s always better to think ahead, right? Check our slider checklist, and create a good-working slider.

3. Avoid using linked Absolute positioned layers.

Linking an Absolute layer means that it’s no longer positioned from its container, but from another Absolute layer. So, to be able to display the linked layer, the slider first need to calculate the position of the layer it’s linked to. After that, it can start to calculate the position of the second layer. This takes time, and the slider can’t show up until every layer position is calculated. Therefore using linked layers will slow down your site, and you should avoid using them.

4. Reduce the number of slides

Unless you want to make a gallery, don’t put more than 5 slides to your slider. If you have too many slides, and you have lots of layers on them, that can negatively impact the loading speed. Also, the slider can’t be so successful and not only because of the speed. If you have too many slides, the visitors won’t click through them. Try focusing on your most important message!

5. Header preload

You should preload every part of your site which counts as a render-blocking resource. If sliders play an important part in your website’s content, you should preload it in Smart Slider Global Settings → Framework → Header Preload.

6. Reduce the number and styles of fonts

Using many different font-families also can increase the loading time. Try to limit the number of the font-families to maximum 3. If you use icons, choose from only one icon set, because loading different icon sets takes more time, too.

7. Use SVG icons

Usually you’ll see font icons on the web. Smart Slider 3’s icon layer uses icons from the most popular libraries, such as Font Awesome 4 and Icomoon. Using such icons requires loading an extra font family and CSS file per font library. This affects your site’s speed.

8. Use a local cover image for videos.

When you add a YouTube or Vimeo video to your slide, it loads a cover image for the video. This image is coming from YouTube or Vimeo, and not from your own site. This means the speed of your site depends on how fast they serve the image. To ensure the optimized loading, use a cover image you host on your site.

9. Set the proper loading type for your sliders

Unless your slider loads above the fold, it shouldn’t load instantly, but only after the page has loaded.

10. Use the optimization settings of Smart Slider 3

Smart Slider 3 has many different options to help you optimize your slider. For example, you can convert your background and layer images to WebP format. Also, you can resize the pictures for desktop, tablet and mobile. As a result, you can optimize the loading for all kinds of visitors.

Smart Slider 3 optimization settings

There are cases when you can’t do some optimization steps. For example, if your slider is already published, you can’t just go and replace every png image with jpg. It would be super time-consuming. But there are still a bunch of tricks to speed up your slider.

For a better understanding, let me illustrate the possibilities with a few examples. I will create a new slider in Smart Slider 3 with three slides. Each slide has a background image (1, 2, 3), but they don’t have any layers. The file size of the images is pretty large, and they have high quality. The total file size of the three images is more than 15Mb. As a result, adding them to your site in any way will immediately slow it down.

Image optimization

The first image optimization option you should use is the Convert to WebP. WebP is a new image format for the web, which allows creating images with low file size but still great quality. So, the Convert to WebP option creates super fast loading WebP images from your pictures. Additionally, it reduces the file size, too.

You can also resize the converted WebP images to reduce their dimension. This way, you can get a more optimized image for each device.

As you can see, using the Convert to WebP option, the page size decreased 10 times. Additionally, this option drastically reduced the page loading time.

Furthermore, you can convert your layer images to WebP as well. As a result, you can reduce the size of the images you used in your layers. It’s worth noting that the Convert to WebP option works only on certain layers. For example, on the image layer, caption layer, and transition layer.

Lazy loading

Smart Slider 3 offers a lazy loading option for the slide background images. You can find it at Slider settings → Optimize tab → under Loading. It has two different options to help you fine tune your slider’s loading. The Delayed loading which loads the images after everything else has been loaded.

But what will make the most difference is the Lazy Loading. It only loads as many slide background images at once, as you want. For example, you can only load the first image of your slider. The other images will only load when the visitor switches to their slide. As a result, you can save up lots of loading time!

Since I have only three images, I set the slider to load only the first slide’s image. To achieve this, I set the Lazy loading → Load neighbor to 0 slides. As a result, only one of the 3 images will load.

As you can see, using the Lazy Loading option made the page load fast. Using the Convert to WebP and Resize options, the page loaded under 1 seconds. That’s a super fast loading time!

Additionally, the lazy loading option made the page load faster without using optimized WebP images. This means just by lazy loading your images you can save precious loading time.

Loading type

If your slider is not above the fold, it should not load instantly. So, at every slider which is below the fold, you should change the Loading type to After page loaded. This way, the slider’s codes won’t be loaded until the visitor scrolls to the slider.

The table below shows how much difference the After page loaded option makes. It’s worth noting that for this check, I placed the slider below the fold.

Speeding up a self-hosted video slider

If you have a video slider where you use your self-hosted videos, some of the suggestions above won’t help you at all. However, there are some tips that you can still apply to your case. For example, you can make your video have the same size as your slider. Remember, a background video doesn’t have to have too high quality. So you can reduce the file size by reducing the quality.

Also, you can disable the slide background video on mobile at the Optimize tab. So you can save loading time for your mobile users, and they will see only the background image.

Additionally, you can make Smart Slider 3 not to call your video until the slider is ready. You can achieve that if you set a slide background image, too. In this case, you can decrease the loading time of your page, because first the background image will load. You have many options to optimize the background image, so it will load a lot faster than the video ever could. Then video will start when the slider is completely ready.

Is your website still slow?

If you enabled the optimization options listed above without any effect, try using a cache or CDN. Joomla offers some caching methods by default that you can try. But for WordPress, you will need a 3rd party WordPress plugin, such as WP Rocket or W3 Total Cache.

Final Thoughts

Realizing that your website has slowed down never feels good. It can cause a headache when you try to figure out what causes the loss of speed. Also, you might make desperate steps when trying to make compromises to get back your fast pages.

Remember, most of the speed depends on the used rich media (both file size and amount). And that is something that you can optimize easily. For example, if you use Smart Slider, you can turn on a couple of options, and the slider will take care of the problems. Having a speedy slider (and webpage) is worth that few extra clicks, isn’t it?

The post How to Speed Up Your Slider appeared first on Smart Slider 3 — WordPress Plugin.

How to add images to your slider?

Smart Slider 3 fits perfectly to your WordPress powered site. As a result, you can add images to your slider from the WordPress Media Library. Each slide you create has its own background image. This lets you create amazing transition effects when the slide switches. By picking a different image for each slide, the slides can tell different stories.

With Smart Slider 3, you can not only set a background for each slide, but to the slider as well. A slider background image is behind all slides in the slider, which means it won’t change when the slide does. As a result, the image stays static in the background, while the other slides move on top of it. You can find the option at Slider settings → General tab, below Simple slider type – Settings. That’s how the result will look:

How does the slider decide on the way it displays the images?

When you set a background image on your computer, you can choose how it fits to the screen. Smart Slider 3 does the same with the slide background fill modes. The background fill mode of the image tells the slider how it should display the picture. For example, the slider might crop the image to make it cover the whole slider.

To avoid cropping problems, make sure that your slider and image sizes match. Of course, if you create a full screen slider, the images will be cropped on certain resolutions.

Slider image fill modes explained

Smart Slider 3 has 6 available fill modes, which you can set for each slide in the slider. Of course, you can change it for each particular slide as well. Let’s see how each mode works!

• Fill: This is the default mode for the slider. It crops the image, if needed, to make it cover the whole slider.
• Fit: This mode displays the full image without cropping. The parts where the image can’t reach the slider remain empty.
• Blur fit: Like fit mode, blur fit doesn’t crop the image. Unlike the fit mode, blur fit does not leave empty space in the slider. As a matter of fact, it fills them with the blurred version of the original image.
• Stretch: This mode makes the images cover the slider without cropping them. As a result, the images often end up distorted. Use with caution!
• Center: Despite the popular belief, this mode won’t make the slider centered. It simply puts the background image in its original size to the background. As a result, this fill mode loses its responsive behavior.

Here’s a video where you can see an example for every mode. I grabbed this image from Pixabay and chose 1280x720px size. After that, I created a new slider which has 1200x500px size. To illustrate the tile mode better, I used 640x360px image at its slide. In the video, I’ll show how each mode handles the image in the preview’s default desktop, tablet and mobile view.

Mobile and tablet optimization: create optimized images

In the Pro version of Smart Slider 3 you can convert your background and layer images to WebP format and generate small version of your images for smaller screens. As a result your mobile visitors won’t have to load an 1920px wide image for their small screens, but you can make them load, for example, a 500px wide image instead. To resize your images go to Slider settings ￫ Optimize tab and enable Convert to WebP then Resize.

Other background types in Smart Slider 3

Smart Slider 3 is a versatile slider plugin that allows you to create content rich sliders. That is why you aren’t limited to add nothing else but images to your slider. As a matter of fact, Smart Slider 3 Pro lets you set a slide background video instead. You can select an MP4 video from your WordPress Media Library. If the video is in an external source, you can just copy the URL to the video field.

Depending on what you want to create, it can make sense not to use any background image or video. In that case, you can select a simple color as background. By not choosing a background image, you can move the focus towards the content of the slide. This is useful, for instance, when you create hero sliders. The best part about background colors is that they’re available in the free version of Smart Slider 3 as well.

How to create a background overlay?

The overlay is useful to increase contrast between the text and the background. To create an overlay, first pick a background color. After that, lower the opacity of the image or video. As a result, you’ll see the color in the background, and the semi-transparent image or video above it.

If you need the image to be crystal clear with zero transparency, there’s another approach you can try. First, pick a background color and adjust its opacity. Second, turn on the Overlay option right next to it. This makes the color appear on top of the image or video, instead of being under it. In other words, the image or video will be in the background, and the semi-transparent color above it.

Conclusion

The best slider images are the ones that match your brand and make you look professional. That’s why you need to carefully select them for your beautiful sliders. You don’t always need background images though. Instead of an image, feel free to use a video background, as it can help a lot to strengthen your message.

The post Everything You Need to Know About Slider Images appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/slider-seo/ Wed, 13 May 2020 07:14:58 +0000 https://smartslider3.com/?post_type=blog&p=19462 SEO is crucial to make people find your website. It doesn’t matter how awesome your site and services are if no one can find you. But did you know you could use your slider for SEO purposes? Sliders are the most popular design elements you can find on a WordPress site, so it makes sense […]

The post How to Make your Slider SEO Friendly? appeared first on Smart Slider 3 — WordPress Plugin.

]]> SEO is crucial to make people find your website. It doesn’t matter how awesome your site and services are if no one can find you. But did you know you could use your slider for SEO purposes? Sliders are the most popular design elements you can find on a WordPress site, so it makes sense to use them for SEO. In order to do that, the slider must support the most essential SEO tools.

How do you recognize an SEO friendly slider?

It depends on the developers, whether a slider is bad for SEO or not. With this in mind, let’s see the top five aspects of an SEO friendly slider.

1. It’s not based on flash. Flash is an old technique, which was quite popular because of its fancy effects. Its popularity is fading, because no search engine can crawl its result. If a slider uses flash, it’s not SEO friendly, and you shouldn’t use that slider on your site.
2. It lets you write alt texts to your images. Alt texts help search engines index your images. It’s especially important when you create simple image sliders, which have no other text.
3. Ability to set proper H tags. H tags, like h1 or h2 help you structure your content better. A well structured content is crucial from SEO perspective. As a matter of fact, there should be only one h1 tag on each page of your site. So if your slider creates headings with h1 tag only and you can’t change that, dump this WordPress plugin.
4. Ability to write texts without H tags. Not all content needs to be a heading. A good slider plugin lets you add texts as paragraphs, too.
5. Has valid HTML structure. Search engines have a hard time indexing pages, which have invalid HTML structure. If your slider contains invalid codes, it will make your site and slider harder to index.

How to use your slider for SEO purposes?

Obviously, you can only use your slider for SEO purposes, if it’s SEO friendly. As a matter of fact, Smart Slider 3 is an SEO friendly slider, which means you can use it to do SEO. Any text you write to Smart Slider 3 using layers is crawlable by search engines. Let’s see what tools are available to create an SEO friendly slider!

Structure your slider using the heading layer

The heading tags you add to your site define the structure of your page. When people browse your site, they look for information. Headings give the reader an idea of the information they can get from the next paragraph. They’re also great to break the text up increasing its legibility.

The heading’s other main purpose is to structure your content. To make the structure more obvious for the reader, you can use different font sizes for the headings. For instance, decrease the font size for each lower heading you add. To put it another way, if you add an h2 heading which has 32px font size, use lower for the h3 headings.

Add SEO friendly content into your slider

Headings are crucial for SEO, but they can’t help much without having a good content. That awesome text is what you can place to the text layer. You should treat these texts the same way you would treat any other SEO text. Make sure it’s well written and interesting for the reader. Then place it on your slider in a clear format.

If you want to add captions to your images, you should use a text layer for that as well. It allows the search engines to crawl the text and that helps your SEO ranking. Furthermore, layers are actually responsive and can keep their legibility on mobile devices. Unfortunately, this isn’t true for texts which are part of the image. As a matter of fact, responsiveness is another important part of SEO.

Add alt text to your images to help search engines index them

Smart Slider 3 has a field to enter alt text for every image layer and background image. This helps search engines to crawl it, as if it were a static image. Of course, you should avoid using too high resolution images. They slow the site loading down, which can cause bad user experience.

Another key point of creating SEO friendly images is the actual name of the image. From SEO perspective, a relevant name is much better than a generic one. For instance, if you add an image which shows the Golden Gate Bridge, don’t name it DSC1523.jpg. Name it something like Golden_Gate_Bridge_San_Fransisco.jpg instead.

How does slider SEO work in real life?

If you feel using a slider for SEO purposes is too good to be true, then let’s see a real life example as proof. We have a couple of landing pages which only contain sliders. Of course, every slider is made with Smart Slider 3. One of these pages is the product page of Smart Slider 3 Free. Next to Real Time Slide Editor you can find the following image:

As you can see, the name of the image is realtimeeditor.png and its Alt tag is “Smart Slider Free – Slide Editor”. Thanks to this, Google knows the image and it was able to index it. Do an image search for the following keywords: “Smart Slider Free Slide Editor”. You’ll notice that the image shows up as the 6th result. Since it’s one of the first results, this 6th place is pretty great.

Can search engines read texts from the slider?

Of course they can! As an example, let’s take a deeper look at Gradient slider template. The page of this slider isn’t optimized for SEO. We’re only using it to demonstrate the template. Nevertheless, search engines can read the content from the slider. Let’s perform a simple search for “more than 70.000 happy users”. While the page wasn’t optimized for SEO, it shows up in the first page. Not only was Google able to find the page, it read both the h2 heading and the paragraph below.

As you can see from the screenshot, search engines like Google can read text from Smart Slider 3. Which means you can use Smart Slider 3 for SEO.

How smart search engines really are?

Developers at Google have made massive effort to understand web pages better. They no longer rely only on the page source to learn what is on the page. This means they run the codes on the website, or at least try to do so. Why is this good for your WordPress site? Because web development has developed a lot in the past years. There’s more and more JavaScript generated content on modern websites.

Of course, the search engines aren’t looking at pages like users do. Users, for instance, interact with the page. They click on animating elements or images, they check out tabs and accordions. Visitors scroll up and down checking out interesting effects. Search bots, on the other hand, simply crawl the page as it is when the page has finished loading.

What’s lazy loading and how does it affect your SEO slider?

When it comes to image loading optimization, people tend to think about lazy loading first. Lazy loading is generally done by JavaScript codes which runs some after the page has loaded. It’s a common approach to load the images on page scroll, and that’s something that search bots can’t mimic. At the present time, they can’t browse your site the same way as a real visitor does.

The situation with lazy loading and sliders is that the lazy loaded images show up on user request. In most cases, this request is the slide switching action. For instance, the visitor has checked out the content on your current slide and switches to the next. That’s the trigger that makes the second image appear. Unfortunately, this means lazy loading isn’t SEO friendly. The reason is rather simple: the images don’t exist on the website, until the slide switching happens.

What do you need to know about texts effects in your slider from SEO perspective?

Modern web designs are full of special text effects which only JavaScript can create. In Smart Slider 3, for instance, these effects are the split text animation and the typewriter. These effects look cool and appealing for visitors. Unfortunately, they’re not SEO friendly. To create, for instance, the typewriter effect, the code needs to split up the text to characters. Because of that, search engines don’t see them as words, but individual letters.

Conclusion

When you create a slider and keep SEO best practices in mind, this slider becomes a great asset on your site. In addition, if you create your slider and pay attention to its details, it won’t cause banner blindness. You can use a slider to save real estate on your home page or landing page, while strengthening your message.

After all, that’s what visitors came to your site for the first place: to find the information they look for. And if you structure your site well, they can find that information in your slider. Similarly, the search engines can find information in your slider as long as you use Smart Slider 3. So good luck on creating awesome sliders for SEO purposes!

The post How to Make your Slider SEO Friendly? appeared first on Smart Slider 3 — WordPress Plugin.

https://smartslider3.com/blog/most-common-wordpress-speed-optimization-myths/ Mon, 30 Sep 2019 05:00:52 +0000 https://smartslider3.com/?post_type=blog&p=22176 Website speed is an actual Google ranking factor. That’s why you need to emphasize site speed and performance. Unfortunately, there’s no easy solution to slow web speeds. There is no magic plugin, script, or tactic that will instantly speed up your website. Optimizing a WordPress site’s performance can be a daunting task, especially for larger […]

The post Most Common WordPress Speed Optimization Myths appeared first on Smart Slider 3 — WordPress Plugin.

]]> Website speed is an actual Google ranking factor. That’s why you need to emphasize site speed and performance. Unfortunately, there’s no easy solution to slow web speeds. There is no magic plugin, script, or tactic that will instantly speed up your website. Optimizing a WordPress site’s performance can be a daunting task, especially for larger sites.

This is a guest post written by Matija Kasapović, who is the owner of KasaReviews website. If you would like to write a guest post contact us.

Optimizing a website can be a difficult subject, whether you’re a developer or not. You will find a lot of published guides and online tutorials. Keep in mind the fact that most of them are written for a broad audience scope. They might not help much in improving your specific situation.

Here are a few common WordPress speed optimization myths that I would like to dispel.

1. More plugins result slower sites

When you first set up your WordPress site, you have a lot of tools at your fingertips. It can be very tempting to use as many available plugins as possible to add various features to your site. However, this can sometimes do more harm than good. Outdated, useless, or otherwise conflicting plugins can slow down your website and cause unexpected problems.

Plugins are okay as long as used effectively. Use only the ones that benefit your website. Uninstall or delete any plugins that are either outdated or serve no useful purpose.

Despite popular belief, it’s the quality, not the quantity of plugins that matters. It just takes one poorly-written plugin to cause errors or your site. Take some time to review your current plugins and remove ones that you don’t use or no longer need for your site needs.

2. You must use CDN

Content delivery network, or CDN, helps you serve assets (e.g., images, CSS files, JS files) to your visitor. They serve assets from the closest location to them as possible to reduce latency. Latency is the length of time it takes a server to send content to a user’s browser. The farther away visitor is from the server, the longer the delay in receiving content.

To put this in context, imagine you’re playing basketball and shooting on a basket. The farther away from the basket you are throwing a ball, the longer it will take for the ball to reach the basket. This same principle applies here. Using a CDN, content is distributed to site users around the globe. You rely on a network of servers to serve your site. As a result, the information is sent from the server closest to the visitor.

A CDN is an invaluable resource for companies and sites that have an international audience. If your reach is much smaller, that may be an unnecessary cost. If your server is located in, for example, Mexico and your site visitors are primarily from Mexico, then CDN might not bring many benefits. But if your visitors are mostly from Europe, then using CDN can help.

CDNs also act as an external server. This means that they have to conduct a DNS lookup to find each external server. That process can take considerable time (about 200 ms). If you’re going to use a CDN, make sure that the amount of time saved is more significant than the time spent for DNS lookup and resolution.

3. You should use all types of caching

There are many different caching options available. Database caching, page caching, Memcached are just a few of the many options. Some experts and publications will recommend using all available caching resources.

If you have a site that doesn’t have caching, your server will have to go into your database to find and collect all necessary components. Then it relays them to the browser via PHP for your site users every time they visit a particular page. This can take considerable time to accomplish.

Get on board! Join our 142,416 subscribers!

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

No spam. No charge. Just curated emails.

Page caching creates static HTML content files. This means that your PHP won’t have to regenerate your pages every time someone visits them. This saves a lot of time. Whenever someone visits a website that uses page caching, they’re not accessing the site’s database. Sometimes page caching makes caching the database unnecessarily.

There are also some instances where database caching maybe more effective. One example is sites that are very dynamic and in which page caching may not be realistic. However, this is an exception to the rule. For most bloggers and owners of different type of websites, there’s no need to worry about database caching.

Specific forms of caching operate at the server level. If you’re on a managed or shared hosting server, you maybe limited as to what you can do. The server’s host is in control. In these cases, you can still install a plugin for page caching, which is something that most site owners can do easily.

4. Caching plugin is all you need

A caching plugin is a great way to make your website faster. But it’s not the only tool that you can use. You can Optimize WordPress sites on many layers. When correctly configured, a caching plugin will definitely help. It can be a quick fix if your website is underperforming. But it’s just the final step in improving site speed.

Caching plugins can’t fix common problems such as poor code, but they can help minimize the effects. Taking the time to fix other component issues of the site can improve your website’s speed and performance.

5. Reduce HTTP requests

Many themes and plugins load images and script files from sites such as Facebook and Google, which can impact load times. If the plugins that you use make a lot of requests, don’t be surprised to see slower load times.

A common rule of thumb is to limit how many HTTP requests your site has to make. This is a good guideline, but there’s a little more to it than that. The great example regarding this is minification. Many minification plugins and tools will compress smaller CSS files into one large file. That means that instead of having 10 CSS files on your website, there’s now only one. That’s one HTTP request instead of 10 separate requests.

While this may be the optimal solution, it really depends on your situation. Most current web browsers can download multiple files at a time in parallel. In this case, you are better off having your browser download multiple files at the same time instead of waiting for one large file to download. Every site’s results vary, so you will need a test which option best fits your website.

6. You need expensive hosting to have better site speed

Having a good, reliable host for your WordPress site is essential. You can have two identical sites on two different hosting sites, and they will load completely different.

Most popular hosting providers spend considerable time on improving and maximizing performance. Shared hosting is a popular choice for many small businesses because it’s affordable. Just keep in mind that you are sharing resources with many other sites at the same time. A high-performing site on a shared server can slow down the performance of other sites on that network.

Free web hosting services are usually not recommended because they often have downtime and slow speed issues. Investing in good hosting is worth the expense. Poor hosting can limit how fast your site runs and could lead potential customers to do business with competitors. There are many great hosts out there. Cheap hosting isn’t always bad, and expensive hosting isn’t always great.

7. All WordPress themes are speed optimized

The amount of themes that you can choose is impressive so it’s important to consider speed when selecting one. Many well-known themes have bad coding, which can affect loading times. You need to choose a theme that is both visually appealing and has excellent performance in terms of speed. It may take a little bit of trial and error until you find a theme that strikes the perfect balance between these factors.

A lot of WordPress site owners choose basic themes and select high-performance plugins to achieve their desired visual feel and efficiency. Most of the code on your site is coming from themes so ones with poor coding can slow down a website. Multipurpose or “one size fits all” themes contain a lot of features. Some of them have extra scripts that they load but don’t use. If you have one of these kinds of themes, only activate the features that you’ll use.

8. Grade from page speed tools is important

After you’ve used a website speed testing tool such as GTMetrix, Google PageSpeed Insights, Pingdom, or others, your site will get a grade for its performance. You also get a list with different recommendations. People think that their site needs to have a perfect grade.

When a Googlebot goes to a site, all it looks at is how fast your pages load. It doesn’t know which grade speed testing tools gave your site. Higher grades don’t necessarily mean faster page load times. Speed grades and recommendations identify bottlenecks and other potential problem areas of your website. But each tool grades the same site differently.

Suggestions can improve your page loading times, but some are not very beneficial or can be challenging to execute. An example of this is when Google PageSpeed recommends moving JS and CSS files to your page’s footer. Some JS files are easy to move, but others could damage or break your site if moved. If you load your website without using CSS styles, it can appear to your site visitors that your site is broken. Performance grades are nice, but they don’t matter. How fast your pages load is what’s really important.

Optimizing WordPress Website Summary

WordPress is very easy to customize. It lets you optimize your site performance and speed as much as you need. Higher performing sites need more customization than most simpler projects.

Page load times can significantly affect how you run your online business. They impact conversion rates, bounce rates, user satisfaction, and the likelihood of repeat visitors to your site. WordPress page speed optimization can quickly become a world of wp-config.php, robots.txt, server architecture, and other factors that are often confusing or intimidating at first.

Speed optimization needs are different for every site. Sometimes you will need to try a few alternatives until you find the optimal solution. You will get a lot of advice and recommendations from outside sources, but not all will be beneficial.

WordPress is not the fastest platform to use, but there is always a way to improve your page load times without having to write any code.

The post Most Common WordPress Speed Optimization Myths appeared first on Smart Slider 3 — WordPress Plugin.

]]>

Create a Simple Image Slider with Smart Slider

First up, you need to install and activate Smart Slider 3 on your website. You can download the Free version or skip straight to the Pro version.

After you’ve activated the plugin, you’ll see a new menu item in your admin. Clicking on it will take you to the Smart Slider 3 dashboard. To create a new slider, click the green “New Project” button.

A modal will appear prompting you to choose whether you want to Create a New Project or Start with a Template. Select the first one, and enter a name for your simple image slider and the dimensions. There are also three different slider types to choose from depending on how you want your slider to look.

After you’ve clicked “Create,” you’ll be taken to the dashboard for your slider. Click on “Add Slide” and select “Image” to start working on your first slide.

The media library modal will then appear, where you can drag and drop in an image for your slide.

To add text to your slider, click on your slide (it’ll look like the image you just uploaded) to reach the Slide Editor.

Adding text is simple – just click on the text icon to the left of the Content/Canvas editor and a text layer will appear over your image. Replace the default text in the editing modal with the words you want to use, and then drag the text box where you want it to display over your slide.

Clicking on the paint bucket icon will bring up more style options for editing your text, such as fonts, colors, backgrounds and sizes.

And that’s the first slide done! At the top of the page, click “Save” on the right and then the name of your slider on the left to return to the slider dashboard.

Rather than repeat all the steps above to create a second slide, simply duplicate the first slide. Then click the second slide to edit it.

On the second slide’s dashboard, upload a new background image and replace the text with new words. Click “Save” and your second slide is ready. Repeat the steps above to create as many slides as you need for your simple image slider.

Optimizing Images

If you want your slider to be super fast, it’s important to optimize your images. You can get a head start by saving your images for the web using an image editor like Photoshop.

It’s also important that your images are the correct size for your slider, i.e. don’t upload 4000px by 2000px images for a slider that’s only 1000px by 800px in size.

Smart Slider 3 provides simple options for automatically optimizing your slide background images. On the slider dashboard, you can enable optimization and set the quality of your images. There are also options for optimizing thumbnails or layer images.

Configuring Animations/Transitions

With animations, you can configure how your slider moves between slides. Choose from six different animations and then set the duration.

For more advanced animations, it’s worth checking out Smart Slider 3 Pro. It has even more animation options for easing, parallax, speed, Ken Burns effect, particle and shape divider.

If you want to configure animations for your background images, you can do so in the dashboard for each individual slide.

Configuring Navigation

Next, you’ll want to customize the navigation arrows for your slider. Visit the Controls tab, where you can choose from a range of different designs for arrows, set colors, and even position where you want them to appear over your simple image slider.

The sections here let you add bullets and thumbnails to your slider.

Adding Your Slider to a Post or Page

Once you’re happy with how your slide looks and animates – you can preview it by clicking “Preview” in the top-left – click “Save” one last time. On the dashboard for your slider, you’ll notice three options in the “Publish” section.

The instructions are straightforward enough:

• Shortcode – Add the auto-generated shortcode into any post or page to display your slider.
• Page or Post editor – Smart Slider 3 adds an icon to the page and post editors, which you can also use to insert sliders.
• PHP code – For more advanced control over the placement of your sliders, you can copy-paste the provided PHP code.

Here’s what my finished simple image slider looks like on my test site (I used the shortcode option to insert it into a post):

Get Creative with Advanced Features

In this tutorial, I’ve walked you through how to create a simple image slider. But there’s so much more you can do with sliders – and with Smart Slider 3 Pro.

While the free version of the plugin is packed with features, the Pro versions let you pull dynamic content into slides, including WordPress posts, Pinterest and Flickr images, images from folders, YouTube videos, Facebook albums and more.

The best way to get a grasp of all the possibilities is to check out Smart Slider 3’s impressive Examples page, which features 100+ different sliders.

Like any of the examples above? You can use them! Each and every one of the 100+ sample sliders is available to import and customize in Smart Slider 3 Pro.

Wrapping Up

Smart Slider 3 is easily the best slider plugin for WordPress. Believe me, I’ve tested a lot of slider plugins and none even come close to offering the same ease-of-use and features.

Most free slider plugins are clunky and confusing to use. Smart Slider 3 has been designed with user experience at the forefront, ensuring that it takes no time at all to get the hang of how it works so you can put together a slider quickly and easily.

I hope this article has helped you with learning how to create a simple image slider for your site. If you have any questions, leave a comment below!

The post How to Create a Simple Image Slider with Smart Slider 3 appeared first on Smart Slider 3 — WordPress Plugin.