wordpress website slow on mobile

wordpress website slow on mobile

   I'm pretty sure you'll see a huge performance boost a few days, I'm gonna show you how to speed up a wordpress site with 3 simple steps and take your site's speed like a super hero .

wordpress website slow on mobile

 Google has the size speed as a ranking signal for desktop searches since 2010 N. as of 2018 his speed became a ranking factor for mobile searches too and even though speed improvements will only affect a small percentage of slow websites faster page load times lead to better user experience and ultimately more revenue in fact a study by Google shows that as page load time goes up bounce rate rises with it. there are numerous reasons why your website might load slowly but the most common reasons that I've seen are due to slow connectivity cashing page size and sometimes more technical reasons like render blocking J. S.  

 There are tons of things to consider when it comes to wordpress site speed like your themes coat specific plugins you might be using server configurations image file sizes and more so as we go through the tutorial I'll try and explain the more technical reasons behind poor performance so you can hopefully diagnose further issues yourself all right so let me give you a background on the website will be optimizing and we'll start with some benchmark speeds  

  Step one DNS cloudflare:

 first thing you can do switch DNS providers to cloudflare's free DNS service now in order to understand why we use cloudflare you need to understand how the web works at least at an elementary level website are just files on the computer that are made accessible through the internet now each device that's connected to the internet as an I. P. address including the server that hosts your website so if your server is located in Los Angeles California and your visitor is in Las Vegas these 2 IP addresses need to create a connection in order to download the file contents to the device no I. P. addresses are tough to memorize and I doubt many people with key internal dress like this to visit your site that's where DNS comes into play. DNS stands for domain name system and it's often referred to as the phone book of the World Wide Web in short DNS naps domain names to IP address so people can type in a domain name to visit a website but the thing with this is that when someone types in the domain name in their browser I DNS lookup occurs to find the I. P. address of the server so that takes time and usually free DNS providers from your domain registrar are usually slow to respond greeting slower page load times cloudflare's DNS on the other hand is pretty darn fast considering it's free but again your mileage may vary depending on the DNS provider you're currently using so to set this up sign up for cloudflare account and then click add a set. And your domain name. Select income from your plan and after a few seconds cloudflare will give you a chance to review your DNS records click continue and you'll be asked to change our name servers which is something you need to do with your domain registrar.  

Step two use of wp bakit Plugin:

 next thing we did was purchased and installed the W. P. Bakit plug. W. P. rocket is an all in one site speed optimization plugin for wordpress in the make it super simple to make technical optimizations even if you have no clue what you're doing the plugin handles common pace speed optimizations like cashing preloading compression and lazy loads images to name a few. After activating the plugin you can access the WP rocket settings from the top navigation bar. if you're unfamiliar with caching it's basically a way to temporarily store copies of files so it can be delivered to visitors in a more efficient way and because the site is a basic blog that's responsive I enable caching for mobile devices. 

Next is file optimization which is where you'll spend the majority of your time. For the basic settings I chose the manifair HTML and optimize Google fonts unification just removes white space and comments from code which will reduce file size and smaller files load faster than larger ones I also chose the optimized Google fonts since the team uses that. The next section is about optimizing CSS files  

wordpress sites often include multiple CSS files some will be fifteens others for slogans in you might have added some custom ones too now whether you choose to activate this option or not well mostly depend on how your server delivers the files generally speaking your files will be loaded either using HTTP 1.one or H. T. T. P. 2. With 1.one your files will be loaded consecutively meaning one file needs to fully load before the next one starts loading so combining your CSS scripts can help reduce the load time because fewer CSS files will need to be loaded. Now with http 2 the files can load concurrently meaning if you have multiple CSS files they can begin loading at the same time so combining them won't necessarily be as impactful. To see if your site uses H. T. T. P. 2 you can use case tester and key in your U. R. L. the final option we enabled us to optimize CSS delivery basically this option will generate CSS needed for content above the fold it asynchronously load other CSS files so they don't block the rendering process now these concepts can be quite technical so I won't expand on these but in general these are page speed optimization best practices. All right let's go down to the Java script file section. So first I remove jquery migrate which is a file that's been added to wordpress since version 3.6 now since there weren't any issues with J. query for this theme or any plugins I chose to disable it as there's no point in loading and additional script without purpose again we chose the reunified J. S. files as we did with HTML and CSS in combined R. J. S. files since there were no conflicts or issues in the last option we enabled S. deferred loading of Java script this option will basically delay the loading of Java script files so the most important content like your HTML and CSS can be delivered to your visitors first and then the J. S. followed and this will in most cases fix the eliminate render blocking J. S. issue that you may have seen in pagespeed insights. 

wordpress website slow on mobile

Now it's important to note that if you choose the minute fight combine an order for your Java script files things may break on your site so it's important to actually test your site's functions before permanently leaving it on all right let's move on to the media category here I've chosen to lazy load all media files lazy load improves page speed because it differs the loading of images and videos and tell their visible on the screen in fact wordpress 5.5 a lazy load images by default so you won't necessarily need a plugin if you just want this feature. 

Next up is preloading preloading allows you to define essential resources so that browsers no the priority of files that should be loaded first for  

Last step use of CDNs:

 last thing I want to talk about here is using a CD yet and it's easiest to understand how these work if we look at our first example of how devices connect to web service so again if the server is now laying in a visitor is in Las Vegas it probably won't take very long for the 2 devices to connect seeing as a relatively close in proximity but what happens when someone from Germany India Australia or Singapore tries to connect to the web server it's going to take longer and that's where CDNs can help C. N. stands for content delivery network and that's exactly what it is a network of servers located all over the world that delivers content to visitors as fast as possible by using a CDn and you're essentially caching files on multiple servers globally then when a visitor tries to access your site you know connected to the one that's closest creating a faster connection between the user and the content so if your site attracts a global audience then it might be worth signing up for CDns and service enabling the option in WP rocket and adding the appropriate seating. Now there are other free caching plugins that have a lot of these features like auto optimized and W. 3 total cache but I personally prefer to pay a small fee for W. P. Bakit as I've had the best results with them  

 Now since we've already added lazy loading images this will solve a lot of problems but if you're using featured images that are above the fold on load then lazy load isn't going to help plus smaller images will save you with storage space so the simple solution is to compress your images using lossy or lossless compression and there's some great plugins that I'll do this for you like short pixel and image of fi now to give you an idea of how much image compression can help take a look at the wordpress media library here you'll see that your pixel has reduced the image sizes by quite a lot which will help improve page speed topics also has a feature that lets you serve images in the WebP format which basically lets you compress images even further without compromising quality by much just go to settings and choose your pixel then click on the advanced tab. make sure that you check this box so short pencil creates a web P. version of your images. So now that we've done the 3 main optimizations for wordpress site speed let's run the page speed tools and compare them with our regional benchmarks on page speed insights the page previously scored a 45 on mobile and now has a score of 95 you had a desktop score of 79 and now has a near perfect desktop score on paying down the page previously loaded in 1.72 seconds with a 1.7 megabyte page size in 63 requests with the new speed test you'll see there was a significant decrease on all 3 metrics page size is just over 900 kilobytes meantime came in at 200 milliseconds and the number of requests have shrunk by nearly 3 X.. 

I hope you enjoyed our today's article about wordpress website slow on mobile 

Give us feedback in comment section