Entspannt zu Google PageSpeed 100%, damit es keine Qual wird. Diskussionen, ob die Erreichung von Google PageSpeed Insights Werten mit 100% anzustreben sind, gibt es viele. Google ist jedoch nicht der alleinige Wert, der zählt. Es geht auch um Ladezeiten, SEO, Requests, Schriften und viele andere Puzzleteile, die eine Website ausmachen. Wer aber das Optimale nicht erreicht, kann nicht bewusst zugunsten von Usability und Experience(UX) die PageSpeed (Lighthouse) Werte reduzieren.
1. Zum Einstieg
Google PageSpeed 100% sind die Werte, die ausgespuckt werden, wenn mit Google PageSpeed Insights und Lighthouse der Beitrag getestet wird. Wenn die Ergebnisse alle 100% zeigen, wird gefeiert, weil ja das Ziel Google PageSpeed 100 % erreicht ist.
Die Ausgangsposition für diesen Beitrag liegt bei Lighthouse und PageSpeed sauber bei 100%, wobei hier nur die PageSpeed-Werte betrachtet werden sollen. Die Lighthouse-Werte sind in gewissen Grenzen von dem aufgerufenen Rechner abhängig.
Ok, bei den Mobile-Werten ist die Leistung nur bei 99%. Der Wert ist aber sehr schwer auf 100% zu bringen, weil die Hinweise auf die Minderung sehr dürftig sind.
Da wir nun feiern konnten – wir haben ja 100% erreicht – werden einige Plugins hinzugefügt, die für mehr Usability und Experience(UX) sorgen.
2. Aller Anfang ist schwer
Die Auswahl eines Standard Theme wird nicht zum Erfolg führen, weil es einfach nicht den Strukturen folgt, die erforderlich sind, um das Ziel Lighthouse 100% zu erreichen. Bildgrößen, Content-Bereiche, Sidebar etc. sind wenig oder gar nicht anpassbar. Hier trifft man einfach auf zu starre Strukturen, die Individualität nicht gestatten.
Eine Website sollte individuell und persönlich sein und das Widerspiegeln, was den Websiteinhaber – Person oder Firma – ausmacht.
Es ist wichtig, ein geeignetes Starter-Theme auszuwählen, um die erforderlichen Strukturen implementieren zu können.
Ein Wermutstropfen ist es natürlich, dass man sich dann mit CSS und PHP herumschlagen muss – wobei es irgendwann doch zum Spaß ausartet. Beides ist nicht unbedingt schwer zu erlernen, um gewisse Grundlagen beherrschen zu können, zum Profi muss jedoch viel Ehrgeiz investiert werden. Wenn das Ergebnis jedoch eine individuelle Website mit großartigen PageSpeed Werten ist, wird der Aufwand gerechtfertigt.
2.1 Warum und wieso dieses Theme
Mit underscores.me als Starter Theme ist eine Top Grundlage gegeben, weil alle Strukturen enthalten sind, die zum Aufsetzen einer tollen Anwendung enthalten sind – es ist eben von den Leuten die auch WordPress geschrieben haben.
Wenn die Website das erste Mal mit diesem Theme aufgerufen wird, ist das Aussehen erschreckend und zeigt eigentlich, dass man einiges zu tun hat, um sie zu einem Erlebnis zu machen.
2.2 Auswahl von Plugins
Plugins sind unbestritten erforderlich, denn hier wird die Fachkompetenz geliefert, die man selbst nicht hat – und auch vom Arbeitsaufwand nicht realisieren kann. Einige sind mit recht kostenpflichtig, weil hier ganze Teams ihren Lebensunterhalt verdienen. Inwieweit der Preis angemessen ist, muss jeder selbst einschätzen.
Die Entwickler der freien Plugins haben aber auch ganz sicher eine Spende oder einen Kommentar verdient, weil auch hier persönlicher Ehrgeiz und viel Zeit eingebracht wird, um das Plugin leben zu lassen. Wir haben nichts von großartigen Plugins, die irgendwann sterben, weil der Schöpfer es aufgibt.
Zu viele Plugins können den Brei verderben, ein schlechtes Plugin verdirbt ihn garantiert. mediendr.de
Die Anzahl von guten Plugins ist nicht ausschlaggebend für das Ergebnis, wenn gewisse Regeln eingehalten werden.
2.3 Trennung von Mobile und Desktop
Eine Trennung von Mobile- und Desktop-Anwendung ist unbedingt erforderlich, damit man über Verzweigungen Einfluss nehmen kann.
Damit ist es möglich:
- Sidebars nur für Desktop
- Gezieltes Wegschalten von Sidebars
- Auswahl Bildgrößen für Desktop und Mobile
- Unterschiedliche Schriften
2.4 Auswahl Bildgrößen
Die Standardbildgrößen von WordPress passen nicht zum eigenen Layout – hier sind Anpassungen und Erweiterungen erforderlich. Vorgabe ist immer der zur Verfügung stehenden Content-Bereich, damit nicht der Internet Explorer die Bilder anpassen muss – dies ist dann meistens der Grund für schlechte Ladezeiten.
3. Verwendete Plugins
Nr.
Name
Plugin-Link
Version
Desciption
1
Query Monitor
3.17.2
The developer tools panel for WordPress.
2
ACF Content Analysis for Yoast SEO
https://wordpress.org/plugins/acf-content-analysis-for-yoast-seo/
3.2
Ensure that Yoast SEO analyzes all Advanced Custom Fields 5.7+ content including Flexible Content and Repeaters.
3
Advanced Custom Fields: Extended PRO
0.9.1
All-in-one enhancement suite that improves WordPress & Advanced Custom Fields.
4
Admin Columns Pro
6.4.18
Customize columns on the administration screens for post(types), users and other content. Filter and sort content, and edit posts directly from the posts overview. All via an intuitive, easy-to-use drag-and-drop interface.
5
Admin Menu Editor Pro
2.28
Lets you directly edit the WordPress admin menu. You can re-order, hide or rename existing menus, add custom menus and more.
6
Advanced Custom Fields PRO
https://www.advancedcustomfields.com
6.4.1
Customize WordPress with powerful, professional and intuitive fields.
7
Advanced Database Cleaner PRO
https://sigmaplugin.com/downloads/wordpress-advanced-database-cleaner
3.2.11
Clean database by deleting orphaned data such as 'old revisions', 'old drafts', 'orphan options', etc. Optimize database and more.
8
AME Branding Add-on
https://adminmenueditor.com/branding-add-on/
1.3.11
Adds branding options to Admin Menu Editor Pro. It creates three new tabs on the "Settings → Menu Editor Pro" page: "Branding", "Login", and "Colors".
9
Borlabs Cookie
3.3.8
Borlabs Cookie helps you make your website GDPR compliant by providing an opt-in option to its visitors.
10
Disable Gutenberg
https://perishablepress.com/disable-gutenberg/
3.2.3
Disables Gutenberg Block Editor and restores the Classic Editor and original Edit Post screen. Provides options to enable on specific post types, user roles, and more.
11
Imagify
https://wordpress.org/plugins/imagify/
2.2.5
Dramatically reduce image file sizes without losing quality, make your website load faster, boost your SEO and save money on your bandwidth using Imagify, the new most advanced image optimization tool.
12
Loco Translate
https://wordpress.org/plugins/loco-translate/
2.7.2
Translate themes and plugins directly in WordPress
13
Media Library Assistant
3.26
Enhances the Media Library; powerful [mla_gallery] [mla_tag_cloud] [mla_term_list], taxonomy support, IPTC/EXIF/XMP/PDF processing, bulk/quick edit.
14
Max Mega Menu - Pro Addon
2.4.3
Extends the free version of Max Mega Menu with additional functionality.
15
Max Mega Menu
3.5
An easy to use mega menu plugin. Written the WordPress way.
16
Page scroll to id
http://manos.malihu.gr/page-scroll-to-id
1.7.9
Page scroll to id is an easy-to-use jQuery plugin that enables animated (smooth) page scrolling to specific id within the document.
17
Posts Table Pro
https://barn2.com/wordpress-plugins/posts-table-pro/
3.3.4
Display any WordPress content in an instant data table with powerful search, sort and filter capabilities.
18
Relevanssi Premium
2.27.6
This premium plugin replaces WordPress search with a relevance-sorting search.
19
Shortcodes Ultimate: Extra Shortcodes
https://getshortcodes.com/docs/extra-shortcodes-user-guide/
1.8.5
Extra set of shortcodes for Shortcodes Ultimate
20
Shortcodes Ultimate: Additional Skins
https://getshortcodes.com/docs/additional-skins-user-guide/
1.6.3
Set of additional skins for Shortcodes Ultimate
21
Shortcodes Ultimate
7.3.5
A comprehensive collection of visual components for WordPress
22
Mobile Detect
https://www.tinywp.in/wp_is_mobile-exclude-ipad/
3.1.0
Excludes tablets, such as iPad, from being detected as mobile in wp_is_mobile!
23
UpdraftPlus - Backup/Restore
2.25.5.26
Backup and restore: take backups locally, or backup to Amazon S3, Dropbox, Google Drive, Rackspace, (S)FTP, WebDAV & email, on automatic schedules.
24
User Switching
https://wordpress.org/plugins/user-switching/
1.9.2
Instant switching between user accounts in WordPress
25
Wordfence Security
8.0.5
Wordfence Security - Anti-virus, Firewall and Malware Scan
26
Yoast SEO
25.1
The first true all-in-one SEO solution for WordPress, including on-page content analysis, XML sitemaps and much more.
27
WP Links
5.30
Check & scan all links + open external links in a new tab or window, control "nofollow" and "noopener", set font icon; SEO friendly.
28
WP Rocket | Customize Mobile Cache options
https://docs.wp-rocket.me/article/708-mobile-cache
-
Customize WP Rocket's mobile cache by changing the default settings.
29
WP Rocket
3.18.3
The best WordPress performance plugin.
30
AME Toolbar Editor
1.5.1
Lets you edit the WordPress Toolbar (a.k.a. Admin Bar) - the horizontal menu at the top of your page that shows up when you're logged in. You can hide, move, rename and edit existing items, as well as create new menu items. Requires Admin Menu Editor Pro.
31
WPFront Scroll Top
http://wpfront.com/scroll-top-plugin/
2.2
Allows the visitor to easily scroll back to the top of the page.
4. Plugins für User Experience (UX) und Usability
Für eine bessere Experience(UX) und Usability muss gestattet werden, dass einige Plugins gegen PageSpeed gewinnen, da sonst die Website keinen Spaß bei der Nutzung (Joy of use) macht. Für diese wird eine bewusste Reduzierung in den Bewertungen hingenommen.
Für die eingesetzten Plugins wird eine Begründung für den Einsatz und die daraus resultierenden Veränderungen der Page Speed Werte dargelegt. Es werden Möglichkeiten gezeigt, um wieder dafür zu sorgen, dass die Ausgangs PageSpeed Werte wieder nahezu erreicht werden- ohne Einschränkungen wird es jedoch meistens nicht gehen.
Wollen wir PageSpeed 100% Bewertungen auf der ganzen Site haben, müssen wird diese zusätzlichen Plugins einfach weglassen. Wie bereits geschrieben ist es einfach die Entscheidung 100% oder mehr Benutzerfreundlichkeit.
Die Grundlage sind PageSpeed Werte mit 100%.
5. Prüfung der Anwendung und Beiträge
Nach jeder Korrektur sei es programmtechnisch als auch textlich, müssen Prüfungen durchlaufen werden, damit die Anwendung den erreichten Standard beibehält. Dies sind unter anderem die Google Lighthouse und PageSpeed Werte, als auch die SEO-Ergebnisse.
6. Fazit: Google PageSpeed (Lighthouse) 100% ganz entspannt
Das Ziel ist mit Strukturen und einigen Arbeitsaufwand grundsätzlich zu erreichen. Unbestritten ist viel Energie – auch einige Sackgassen – erforderlich, um den richtigen Weg dorthin zu finden. Das Ergebnis ist eine Website, die individuell, persönlich und mit eigenem Design aufwartet.