1. This website uses cookies to improve service and provide a tailored user experience. By using this site, you agree to this use. See our Cookie Policy.
    Dismiss Notice

WordPress Optimization...

Discussion in 'HTML & JavaScript' started by Roger Marquez, Mar 8, 2020.

  1. Roger Marquez

    Roger Marquez Jr. VIP Jr. VIP

    Joined:
    Apr 17, 2017
    Messages:
    2,081
    Likes Received:
    1,556
    Gender:
    Male
    Occupation:
    IM Newbie
    Location:
    Maracaibo, Venezuela
    Home Page:
    Hi there family, I hope you´re doing amazing this Sunday Funday!

    First of all, I am not a programmer or web developer. I am tho currently trying to learn enough so I am capable of applying small customization to a WordPress based site and, optimize its page loading speed.

    I am currently working on this are related website and when I run an audit on chrome to check its unused coding I get this...
    [​IMG]

    Doing a little math isolating only the elementor related elements that are causing issues I get this...
    [​IMG]

    Is this normal when using Elementor?

    What is the best and newbie-friendly way to get rid of all these unused kilobytes?

    Any help will be deeply appreciated!

    Cheers!
     
  2. SirLouen

    SirLouen Jr. VIP Jr. VIP

    Joined:
    Jan 17, 2015
    Messages:
    1,611
    Likes Received:
    655
    Gender:
    Male
    Home Page:
    It's very complex. Check in the last column, the coverage in %. If you don't have CSS/JS skills you won't be able to figure out if what is not being covered (used code) is in fact being useful at all.

    As a rule of thumb: any script over 95% might be safe to be removed. Although you should test it after removal.

    Elementor is very heavy on JS and styles, so expect this to happen. Be aware that some styles and scripts are exclusively there for certain widgets, like the swiper.min.js, so if you are not using the swiper widgets, you can safely remove them

    How to remove them? There are plugins like Perfmatters or Asset CleanUp that help you in this task, and you can remove the scripts and styles just in certain pages.

    But if you are heavily using Elementor in your sites, you won't be able to remove any of those elements easily without breaking anything.
     
    • Thanks Thanks x 2
  3. OlafRustle

    OlafRustle Regular Member

    Joined:
    Dec 7, 2018
    Messages:
    389
    Likes Received:
    251
    Switch to the Oxygen builder. That is what I did but it was a pretty new site.
     
  4. DE_GAME

    DE_GAME Power Member

    Joined:
    Jan 20, 2019
    Messages:
    666
    Likes Received:
    260
    Gender:
    Male
    Use Oxygen it has less Bloat
     
    • Thanks Thanks x 1
  5. SeoNews

    SeoNews Junior Member

    Joined:
    Jun 1, 2016
    Messages:
    150
    Likes Received:
    38
    Gender:
    Male
    Yes indeed, Elementor does make your website a bit slower. I did a small test a few months ago.
    On the same hosting, using Astra theme i've built 2 Wordpress site.
    On the first: on homepage i put a Post Block using astra settings.
    On the second site: i did the same but i used elementor.
    And then tested both with gtmetrix.

    Site 1:
    PageSpeed Score
    (55%) (Issue: Serve scaled images!!!)
    YSlow Score
    (90%)

    Site 2:
    PageSpeed Score
    (48%) (The same issue: Serve scaled images!!!))
    YSlow Score
    (79%)

    This was just a very quick test that i did, maybe not very accurate. But the trend is clear.
     
    • Thanks Thanks x 1
  6. Roger Marquez

    Roger Marquez Jr. VIP Jr. VIP

    Joined:
    Apr 17, 2017
    Messages:
    2,081
    Likes Received:
    1,556
    Gender:
    Male
    Occupation:
    IM Newbie
    Location:
    Maracaibo, Venezuela
    Home Page:
    Thanks a lot for your replies and yes, been thinking switching over Oxygen after I saw that video on YouTube where the guy was just improving a site page loading speed but in reality was just promoting Oxygen as a page builder.

    I thought it was just a marketing stunt of his part so I didn't pay much attention.

    But since then, I've been regularly hearing a lot of great stuff about Oxygen.

    Definitely going to give it a try now.

    Thanks!
     
  7. Roger Marquez

    Roger Marquez Jr. VIP Jr. VIP

    Joined:
    Apr 17, 2017
    Messages:
    2,081
    Likes Received:
    1,556
    Gender:
    Male
    Occupation:
    IM Newbie
    Location:
    Maracaibo, Venezuela
    Home Page:
    Have another question for you guys...What if my site is built on Elementor but I want to switch to a different page builder...So I have to build everything again?
     
  8. yooray

    yooray Senior Member

    Joined:
    Sep 24, 2009
    Messages:
    1,041
    Likes Received:
    382
    Yes, It is clearly seen on the waterfall of the oxygen website in the video. It is really very light and fast as compared to divi, elementor and beaver builder. In speed and lightweight Oxygen is definitely my choice.

    Switching to a different page builder will have to build everything one by one from scratch. That will be a lot of work. But try what would be the best option.

    Thanks!
     
    • Thanks Thanks x 1
  9. OlafRustle

    OlafRustle Regular Member

    Joined:
    Dec 7, 2018
    Messages:
    389
    Likes Received:
    251
    Maybe this will help: https://nimbufy.com I have never tried it but it looks like it could solve your problem.
     
  10. Roger Marquez

    Roger Marquez Jr. VIP Jr. VIP

    Joined:
    Apr 17, 2017
    Messages:
    2,081
    Likes Received:
    1,556
    Gender:
    Male
    Occupation:
    IM Newbie
    Location:
    Maracaibo, Venezuela
    Home Page:
    Hahahaha my God! I was actually searching on Google/YouTube how to convert a site built on Elementor/Divi/Bakery into Oxygen and couldn´t find anything.

    Thanks a lot for sharing that!

    I see on the video that is on their homepage you have to copy the code from chrome...But, is that just for the page your at? Or does it copy the entire site?

    It´s a great share if it does what it claims but if I have to go page by page...DAMN!

    Still, way better than having to potentially rebuild an entire website :D :p
     
  11. SirLouen

    SirLouen Jr. VIP Jr. VIP

    Joined:
    Jan 17, 2015
    Messages:
    1,611
    Likes Received:
    655
    Gender:
    Male
    Home Page:
    Comment on the improve with Oxygen if you are able to make a 1:1 switch. Most of the people I've seen switching, tend to sacrifice on functionality, for a slight speed increase.

    What I'm currently liking a lot from Elementor is the integration with Rankmath, which other builders don't have.
     
    • Thanks Thanks x 1
  12. Roger Marquez

    Roger Marquez Jr. VIP Jr. VIP

    Joined:
    Apr 17, 2017
    Messages:
    2,081
    Likes Received:
    1,556
    Gender:
    Male
    Occupation:
    IM Newbie
    Location:
    Maracaibo, Venezuela
    Home Page:
    Yeah, don´t get me wrong.

    I F****NG LOVE ELEMENTOR!

    But right now I am balancing between a featured-pack page builder that is user-friendly or developing the same (or very close to it) professional-looking site that is fast-loading and, to be honest, I am choosing the ladder.

    Still, not quite sure if I will be making the switch. It´s hard to let go of Elementor after spending this much amount of time mastering, with all the addons and integrations you have at your disposal.

    I also thought there´s something that has to be lost during the conversion process and, on the site, the publicly state they don´t convert the KS part of the coding, only HTML and CSS.

    Not quite sure how much JS is used when building a site on Elementor but according to the screenshots I shared here, It looks like quite a lot.

    So, I think I prefer learning HTML, CSS, and JS enough so I can purge/clean/optimize Elementor unused kilobytes.

    To be honest, even though I am not a programmer, I´ve been spending time learning how to read and tweak these codes and I don´t think it´s that hard, it just an awful amount of work.

    I copy and past the code from the first element in the first screenshot, and it has over 50,000 lines of code. Thankfully, chrome let you know when inspecting the element (the page your at) what part of the code is not being used.

    I download it Visual Studio Code and I will start playing and testing to see if I am able to optimize a site by myself without breaking anything :D :p

    If you guys have any resources, tutorials or courses you think it will put me in the right path please, share it with me. It will save me a ton of time and, most likely, money!

    Cheers!