Zasto ne treba da korisitite page builder-e? (Why shouldn't you use page builders?)

Post in English.

Lepota se ne prodaje, osim ako niste "prodavacica ljubavi".

Da pojasnim. 

Imate lep web sajt, kao na primer, Quilidreta (https://quilidreta.com/). Kada se otvori stranica ime firme tj. brenda se pojavi leteci s desne na levu stranu. Kako se spustate nize niz stranicu, tekst ulece s leve na desno, a slika s desne na levo. Dalje, naslov dolazi odozgo na dole, a novi proizvodi odozdo na gore. Ispod toga proizvodi na akciji se sami pomeraju s desna ulevo. Kazete, vauuu. I jeste vauuu. 

ALI

U prethodnom clanku sam pisala o tome da li jeftin web sajt nije dobar (otvorice se u novom tabu/kartici), gde izmedju ostalog ima deo o osnovnom SEO kojeg zapravo nema na pomenutom web sajtu. Takodje, tamo ima deo o page builder-u Elementor.

U ovom clanku, takodje analiziram web sajt Quilidreta.

Sta je zapravo page builder?

 Page builder je dodatak (plugin) za Wordpress platoformu za jednostavno - prevuci-i-pusti (drag-and-drop) kreiranje web sajta tj. alata za izradu web stranica. Takodje, postoji i page builder za Woocommerce (internet prodavnica). Woocommerce je takodje dodatak (plugin) za Wodpress.

1. Brzina.

Kada napravite web sajt sa nekim od page builder-a on moze izgledati lepo s prednje strane (front end), ali sa zadnje strane (back end) je nagomilan kod HTML, PHP, JS, CSS. Sto znaci da ce vreme za koje ce se otvoriti sadrzaj na stranici potrajati. 

Ova slika prikazuje ukupan broj fajlova koje je potrebno uzeti s web servera da bi se ucitala Quilidreta stranica. Uopsteno je pravilo da se za preuzimanje vise datoteka povecava broj zahteva servera, sto moze povecati vreme ucitavanja stranice. 

Ukupan broj resursa je 248. Od toga su 24 HTML stranice (staticke stranice), 108 su JS (JavaScript) fajlovi, 57 su CSS fajlovi (fajlovi za izgled web sajta), 48 su slike i 11 drugih resursa.

Ako pogledamo, Spenderella (https://spenderella.rs/) web sajt kod njih je situacija drugacija jer njihova internet prodavnica nije napravljena sa page builder-om.

Ukupan broj resursa je 68. Od toga su 2 HTML stranice (staticke stranice), 15 su JS (JavaScript) fajlovi, 13 su CSS fajlovi (fajlovi za izgled web sajta), 27 su slike i 11 drugih resursa.

Ukuona razlika je u 180 resursa.

Brzinu otvaranja web sajta Quilidreta mozete pogledati u clanku Jeftin web sajt nije dobar - Segment 4 - performans.

Brzina otvaranja Spenderella web sajta je mnogo bolja.

Performans ovog web sajta je B-. (Quilidreta  D-).

Brzina otvaranja web sajta je

brzina celog web sajta

Odgovor servera je 0.31 sekunda. Otvaranje celog sadrzaja web stranice je 3.2 sekundi. Brzina ucitavanja svih skripti na web stranici je 8.7 sekunde.

Ukupna tezina stranice je 3.8 MB. Podela tezine stranice: HTML 0.03MB, CSS 0.6 MB, JS (skripte) 1.17 MB, slike 1.64 MB i drugo 0.36 MB.

Spenderella ne da ne koristi page builder nego ne koristi ni Wordpress.

brzina na mobilnim uredjajima je dobra

Brzina otvaranja web sajta Spenderella na mobilnim uredjajima je 1.6 sekunde.

2. Drugi dodaci.

Kada koristite page builder on obicno zahteva koriscenje dodatnih dodataka. Na primer, WooLentor. Na web sajtu Quilidreta (https://quilidreta.com/) na tastaturi pritisnite CTRL+U, da vam se otovori izvorni kôd. Zatim pritisnite CTRL+F, da vam se otvori polje za pretragu. Ukucajte "woolentor" pa Enter. 

Dobila sam 12 pojaviljavanja.

WooLentor je Woocommerce page builder i Elementor dodatak. 

Znaci Quilidreta koristi dva page buildera. Wtf.

Vise opcija ili mogucnosti u vidu dodataka znaci duze vreme ucitavanja.

Veliki raspon funkcija alata za izradu web stranica (page builder-a) ocigledno se moze ostvariti samo s vise hiljada redova koda. U mnogim slucajevima, one su podeljene u razlicitim fajlovima (CSS i JS) koje je sve potrebno ucitati za prikazivanje web stranice. Ovaj deo se nadovezuje na prethodni, zar ne?

Da bi se ovo resilo, ne-koderi, koriste jos dodataka.

3. HTML oznacavanje (markup).

W3C HTML  validator vazan je jer je verovatnije da ce se web stranica s validnim HTML-om ispravno prikazati i funkcionisati. Takodje je vazno jer vas HTML oznacavanje (markup) salje odredjene signale pretrazivacima.

Quilidreta W3C validacija - pocetak

Quilidreta W3C validacija - kraj

Spenderella W3C validacija - i pocetak i kraj

Quilidreta ima 142 greske, a Spenderella samo 1.

A zasto je HTML oznacavanje bitno?

Ovo pomaze pretrazivacima da bolje razumeju sadrzaj web sajta. Kad mogu bolje razumeti va sadrzaj, pod pretpostavkom da odgovara onome sto neko trazi, vase ce se web stranice uopsteno bolje rangirati i zaraditi vise organskog saobracaja.

4. Nema pristupa vasem kodu.

Za pravilno detektovanje i resavanje tehnickih problema vezanih uz SEO na web stranicama, potrebno je da imate vi (ili kretor web sajta) pristup HTML-u koji je iza vase web stranice (back end). Ako koristite page builder nemate pristup tome. Jedino sto imate sa page builder-t om je prednja strana (front end) WYSIWYG (What You See Is What You Get = Ono sto vidite je ono sto cete dobiti) editora.

5. Ugnjezdeni (nested) HTML

Da bi dobili onaj vauuu s pocetka ovog clanka, page builder ce napraviti ugnjezdene HTML elemente. Zasto ovo nije dobro? Zato sto je potrebno vreme i procesorska snaga za ucitavanje i izvrsavanje, sto takodje utice na SEO. Secate se brzine otvaranja sadrzaja na web stranici? Drugacije receno, alati za izradu web stranica (page builder-i) automatski omotavaju sadrzaj div-ovima (div oznakama) stvarajuci nepotrebno "naduvanje koda" (code bloat). "Naduvavanje koda" znaci da je kôd duzi ili veci nego sto bi trebao da bude. 

Quilidreta kôd naslovne stranice

Spenderella kôd naslovne stranice

Quilidreta ima 1706 redova koda, a Spenderella 737. Da li vidite jos nesto? Velicina horizontalnog slajdera (sivog klizaca) kod Quilidrete je mnogo manja nego kod Spenderella web sajta. To znaci da je kôd kod Quilidrete mnogo veci, nego kod Spenderelle.

Ovako neuredan kôd je los za optimizaciju pretrazivaca - SEO jer pretrazivaci, poput Gugla, koriste kôd stranice kako bi razumeli njen sadrzaj. S neispravnim ili "naduvanim" kodom ili kodom s greskama vas web sajt ce se redje pojavljivati u rezultatima pretrazivanja (SERPs), a manje ljudi ce vas pronaci.

6. Upotreba kratkih-kodova (shortcodes).

Kratki-kodoci su pojednostavljeni kodovi, koje mnogi dodaci za Wordpress koriste kako bi ne-koderima (ne-web-developerima) dali funkcionalnost. Mnogi SEO strucnjaci veruju da to moze ometati SEO. Da pojasnim sta su kratki-kodovi. To su precice, koje kada svaki put kada neko poseti web stranicu na vasem web sajtu, ovi kratki-kodovi moraju se prosiriti na njihovu dugacku formu koda; a za ovo su potrebni veliki zahtevi vases web servera. Kratko kasnjenje pri ucitavanju vasih web stranica moze nastetiti vasem rangiranju u SERPs (Search Engine Results Pages = Rezultati Pretrage).

Post in English.

Beauty doesn’t sell unless you’re a “love seller”.

Let me explain.

You have a nice website, such as Quilidreta (https://quilidreta.com/). When the page opens, the name of the company or brand appears flying from right to left. As you go down the page, the text flows from left to right and the image from right to left. Next, the title comes from top to bottom, and new products from bottom to top. Below that, the products in action move from right to left. You say, wow. And it is wow.

BUT

In a previous article, I wrote about whether a Cheap website is not good (it will open in a new tab), where, among other things, there is a section on basic SEO that is not actually on the mentioned website. Also, there is a section about the page builder Elementor.

In this article, I also analyze the Quilidreta website.

What exactly is a page builder?

The builder is a plugin for the Wordpress platform for easy - drag-and-drop creation of a website, ie a tool for creating web pages. There is also a page builder for Woocommerce. Woocommerce is also a plugin for Wodpress.

1. Speed.

When you create a website with one of the page builders, it may look nice from the front end, but from the back end it is accumulated with HTML, PHP, JS, CSS. Which means it will take time for the content on the page to open.

This image shows the total number of files that need to be downloaded from the web server to load the Quilidreta page. As a general rule, downloading more files increases the number of server requests, which can increase the page load time.

The total number of resources is 248. Of these, 24 are HTML pages (static pages), 108 are JS (JavaScript) files, 57 are CSS files (website layout files), 48 are images and 11 other resources.

If we look at the Spenderella (https://spenderella.rs/) website, their situation is different because their online store was not made with a page builder.

The total number of resources is 68. Of these, 2 are HTML pages (static pages), 15 are JS (JavaScript) files, 13 are CSS files (website layout files), 27 are images and 11 other resources.

The total difference is in 180 resources.

You can see the speed of opening the Quilidreta website in the article Cheap website is not good - Segment 4 - performance.

The speed of opening the Spenderella website is much better.

The performance of this website is B-. (Quilidreta D-).

The opening speed of the website is

the speed of the entire website

The server response is 0.31 seconds. Opening the entire content of the website is 3.2 seconds. The loading speed of all scripts on the web page is 8.7 seconds.

The total weight of the page is 3.8 MB. Page weight distribution: HTML 0.03MB, CSS 0.6 MB, JS (scripts) 1.17 MB, images 1.64 MB and other 0.36 MB.

Spenderella doesn't use page builder, it doesn't use Wordpress either.

the speed on mobile devices is good

The speed of opening the Spenderella website on mobile devices is 1.6 seconds.

2. Other plugins.

When you use page builder it usually requires the use of additional plugins. For example, WooLentor. On the Quilidreta website (https://quilidreta.com/), press CTRL + U on your keyboard to open the source code. Then press CTRL + F to open the search box. Type "woolentor" and then Enter.

I got 12 appearances.

WooLentor is a Woocommerce page builder and Elementor plugin.

So Quilidreta uses two page builders. Wtf.

More options or options in the form of add-ons means a longer loading time.

The wide range of page builder functions can obviously only be accomplished with thousands of lines of code. In many cases, they are divided into different files (CSS and JS) that all need to be loaded to display the web page. This part builds on the previous one, right?

To solve this, non-coders use more plugins.

3. HTML markup.

The W3C HTML validator is important because a web page with valid HTML is more likely to display and function properly. It is also important because HTML markup sends certain signals to search engines.

Quilidreta W3C validation - start

Quilidreta W3C validation - end

Spenderella W3C validation - both start and end

Quilidreta has 142 errors and Spenderella only 1.

And why is HTML markup important?

This helps search engines better understand the content of the website. When they can better understand your content, assuming it matches what someone is looking for, your website will generally rank better and earn more organic traffic.

4. No access to your code.

To properly detect and resolve technical issues related to SEO on websites, you (or the website creator) need to have access to the HTML behind your website. If you use page builder you do not have access to it. The only thing you have with the page builder is the front end of the WYSIWYG (What You See Is What You Get editor.

5. Nested HTML

To get that wow from the beginning of this article, page builder will create nested HTML elements. Why is this not good? Because it takes time and processing power to load and execute, which also affects SEO. Remember the speed of opening content on a website? In other words, page builders automatically wrap the content with divs, creating unnecessary "code bloat". "Code bloat" means that the code is longer or larger than it should be.

Quilidreta home page code

Spenderella home page code

Quilidreta has 1706 lines of code, and Spenderella 737. Do you see anything else? The size of the horizontal slider (gray slider) on the Quilidreta is much smaller than on the Spenderella website. This means that the code in Quilidreta is much larger than in Spenderella.

This messy code is bad for search engine optimization - SEO because search engines, like Google, use the page's code to understand its content. With incorrect or "bloated" code or error code, your website will appear less frequently in search results (SERPs), and fewer people will find you.

6. Use of shortcodes.

Shortcodes are simplified codes, which many Wordpress plugins use to give functionality to non-coders (non-web developers). Many SEO experts believe this can hinder SEO. To clarify what short-codes are. These are shortcuts, which when every time someone visits a website on your website, these short-codes must extend to their long form of code; and this requires high demands on your web server. A short delay in loading your web pages can damage your ranking in the SERPs (Search Engine Results Pages).